Rework Media for Responsive Images

[jhned]

I've been working on a responsive images plugin for WordPress since Blink implemented the srcset and sizes attributes. However, a colleague of mine remarked that it wouldn't be much use to work independently, since WordPress will eventually come up with a solution for responsive images. So, I'd like to gauge interest for this feature, and be involved in its development. Here are a few of my thoughts to get started:

For a start, I thought we could use the intermediate image sizes to fill out the srcset attribute of an image, and set sizes as an option in the Media Settings.

However, it became clear that it's probably not best to include any image size in the srcset attribute by default, but rather only images that match the aspect ratio.

Of course, a user may want an image to be rectangular on desktop and square on mobile, so maybe it would be better if we gave users a way to define image groups: each group uses a collection of image sizes for the srcset attribute, and has a custom sizes attribute defined. So, when a user goes to insert an image, instead of choosing a specific image size, they pick an image group.

So, my proposal is that we:

1. Create a method for users to define image groups on the Media Settings page
2. Use the image group sizes when inserting an image into the Editor, when setting the Post Thumbnail, etc.
3. When you update the settings for an image group, all img tags using that image group would need to be updated. This part will be intensive from a PHP/time standpoint, depending on how many images have been embedded across the site.

[helen]

A RICG-backed plugin is in development and is now at its initial release: ​https://wordpress.org/plugins/ricg-responsive-images/. There is also a Slack channel for those interested at #feature-respimg. Let's keep development there, and come back to this ticket when we are at the point of merge.