Using picture, srcset and picturefill

The picture module for Drupal 7 now supports img-tags with the srcset-attribute, without the picture-tag. This is a great step forward, but it obviously raises the question what to use.

A practical example

In my last project I had to decide what to use, the picture-module had just been updated so now we were fortunate enough we could use img with srcset. As we only needed resolution switching, img with srcset was indeed the preferred option. But how about a polyfill? Scott Jehl, one of the developers of picturefill, has written a nice article on this subject: To Picturefill, or not to Picturefill. But, it’s more than a year old and browser-support has drastically changed in this period. Also, there is a difference between using picturefill with the picture-tag or, like we do, using it with just img with srcset.

Polyfill and img with srcset

The polyfill has the nasty habit of double downloads when the src-attribute is used on the img-tag, but only on browsers that have not completely implemented the spec. Some browsers have only implemented the x-descriptor, not the w-descriptor: Edge 12, Safari 8 for OS X, and Safari 8.4 for iOS. Those are the browsers that will have double downloads when the polyfill is used. Full support is available in Edge 13 and Safari 9. Of the main browsers only Internet Explorer (all versions) has not implemented the srcset-attribute at all. See http://caniuse.com/#feat=srcset and http://caniuse.com/#feat=picture. To prevent double downloads you should remove the src-attribute. The disadvantage is that images are only shown when javascript is enabled (and fully loaded), and your HTML-source is not standards-complient. Being a government website this last one was a no-go for our project. So in this case the choice was made to not use the polyfill, but instead use some proper Progressive Enhancement™. Browsers that do support srcset get optimized images, browsers that don’t support it get the images The Old Fashioned Way™, as supplied in the src-attribute, as if the srcset-attribute was never invented at all. At least they won’t get an experience as worse as they used to have.

Picturefill included in Drupal 8

In Drupal 8 the picturefill is included by default. There is some discussion about it and it might be that in a future release this is undone or a configurable option is added. Personally I would’ve liked that it’s not added to core, as the main use case is resolution switching and IMO picturefill is not needed in that case. On the other hand, it is easy to remove the picturefill library from your theme. In your theme .info.yml-file libraries and assets can be easily overridden. To remove picturefill you add these two lines of code: libraries-override: core/picturefill: false and your done.