[RFC] Bolt Native Responsive Images

[cdowdy]

I was curious if there were any interest in having responsive images (<img srcset> moreso at first followed by <picture>) as part of Bolt's core.

Current browser support for these are:

• Blink/Chrome/Opera supports both picture(38+) and srcset(34+)
• Firefox - Picture and srcset 33+ (behind a flag though)
• IE Spartan is in development for srcset
• Webkit/Safari implemented srcset
  caniuse -> srset
  caniuse -> picture
  Responsive Images.org Implementation Status

I've tinkered with this some as an extension but its extremely clunky, not coded very well at all and not ready for prime time.

My original thought process for the extension was to have a new twig tag (function), pass it either
a filename:

{{ respImg( 'filename.jpg' }}  

and use the cropping/resizing parameters from the extension config along with which sizes you'd like. This works for a developer who knows the sizes of the photo they've uploaded and where they are placing them or for a bolt site thats been setup by a forward thinking developer and has setup the responsive image sizes.

or a record.image:

{{ respImg( record.image ) }} 

The other way was to pass it the filename/record.image, cropping and possibly the widths you'd like to use along with alt text since for some bolt twig functions its not supplied:

{{ respImg( record.image, r, 320, 640, 800, 1200, "this is the alt text" ) }}

All of this would then be rendered as

<img src="/thumbs/640x0r/filename.jpg"  
     srcset="/thumbs/320x0r/filename.jpg 320w, 
     /thumbs/640x0r/filename.jpg 640w, 
     /thumbs/800x0r/filename.jpg 800w, 
     /thumbs/1200x0r/filename.jpg 1200w " 
     alt="this is the alt text" />  

Sticking with just srcset off the bat would be the easiest solution. The only issue by having Bolt generate the srcset markup is that we need a sizes= option.
The people who wrote the Responsive Images Spec have a wordpress plugin and they get the image width with javascript and use that seen here

For older browsers we'd still have to load picturefill but that exits quickly in browsers that support responsive images.

Is this in all of your opinions more suited to an extension for bolt? Or would you consider it part of the core?

Thanks!

[bobdenotter]

Hi Cory,

Would be cool to have. I think this is best suited for an extension, though. If it's an extension, you can be a little bit more "opinionated" about requiring extra bits of Javascript and the like. In core we try to keep those to a minimum. :-)

One suggestion for the syntax: I'd use a 'parameters' array. Like so:

{{ respImg( record.image, { 'crop': 'r', 'sizes': [320, 640, 800, 1200], 'alt: "this is the alt text" } ) }}

Then it'll leave room for future additions, and it works regardless of how many sizes you need.

As an aside: As of Bolt 2.1.6, the built in thumbnailer will support '@2x' thumbs.

[cdowdy]

Alright extension it is!

As for extra bits of javascript needed to be used; I mentioned the two above for a few reasons. In order to send say a 320px image to mobile browsers that dont recognize srcset instead of say a 1024px sized image you'd need picturefill. The other js file wouldn't be appropriate for Bolt after thinking on it because WordPress and Bolts thumbnails and media library differ a lot. WordPress you have that information after an image is uploaded (thumb size etc). Bolt the thumbs are created on the file then saved if the option is activated and stored outside of the file upload/management screen. Theoretically you could just echo back the image widths created by bolt and apply those with a min-width: {{ size }} pattern.. But I'll have to look at that again when I can find some more time..

You could skip loading picturefill all together and go with a markup pattern as follows:

<img src="img/src-small.png"
     srcset="img/large.png 1024w, img/medium.png 640w, img/small.png 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="placeholder images">

and only browsers that recognize srcset will download the appropriate srcset image... all others will download src-small.png

[bobdenotter]

As a guideline for things like this, where I'm not sure what the best option would be: I usually pick the easiest, simplest one. If people need the extra options, they'll complain for sure. They always do. :-)