Picturefill.WP plugin approach

[kylereicks]

In the spirit of sharing.

With the WordPress plugin Picturefill.WP, I took the approach of using srcset and sizes rather than the picture element, along the lines of this use case. The default settings for srcset is to include the thumbnail, medium, large, and full image sizes if they are available. The sizes setting by default is set to (max-width: {image size width}) 100vw, {image size width}, with the "image size width" taken from the image that was added to the editor.

Imitating some of WordPress' other features, srcset and sizes attributes can be set via register functions. This keeps much of the responsibility for responsive images at the theme level.

Even without the picture element, WordPress' image editing tools allow some minimal art direction. The thumbnail can be given different treatment from the rest of the images. More control of the editor would open up more possibilities for art direction.

I am interested to hear other ideas on this. Thanks very much to @Wilto for opening up a place for conversation.

[tevko]

@kylereicks very interesting. I took the opposite approach, which allows for no art direction at all. At the same time, I chose that approach so that the user would not have to think about responsive images, and the whole process would occur without them having to pay attention to different sizes and configurations. Does your plugin allow users to set/forget, so that they can implement a responsive image without having to determine sizes and resolution? I think the best solution would be one that allows the user to either choose their images, breakpoints, resolution, etc. or let wordpress handle everything automatically.

[kylereicks]

@tevko I think I was able to put together some useful defaults that make the plugin worthwhile without any configuration.

By default, Picturefill.WP parses the_content and alters all of the image tags to include srcset and sizes attributes. The advantage of srcset and sizes is the flexibility. While the strength of the picture element is the ability to tell the browser exactly what to do, srcset and sizes tells the browser, “These are the images we have to work with, and this is how the images are going to be styled and laid out,” and then leaves the browser to use the most appropriate image. The default I use for sizes (max-width: {image size width}) 100vw, {image size width} tells the browser, “if there is room for an image this wide, show that image, otherwise show the largest image that will fit, also taking into account screen resolution and maybe bandwidth.”

I think it would probably work well for WordPress core to add an add_theme_supports feature for responsive images. Then, when we select a medium image, instead of outputting something like <img src="medium.jpg" alt="an image" width="300" height="200" />, WordPress outputs something like this, <img srcset="thumbnail.jpg 150w, medium.jpg 300w, large.jpg 1024w, full.jpg 1600w" sizes="(max-width: 300px) 100vw, 300px" src="medium.jpg" alt="an image" width="300" height="200" />. This provides rudimentary responsiveness and could easily be combined with theme functions to register and assign srcset and sizes attributes to various image sizes based on how images are used in the theme.

It makes sense to me that most of the responsibility for responsive images should remain at the theme level, but it would be great to also have a GUI to add picture elements from the editor. Although I'm the first to admit that the potential complexity of the picture element makes designing a GUI a little daunting.