Yesterday I mentioned that I was struggling with embedding properly responsive images that will go lovely and large if you have a nice big screen, but only download a small image if that’s all I need. Added to which, I use Flickr to host all my images for me.
Thanks to Emily in the comments for alerting me to
srcset as being the way to do this properly.
While it doesn’t look like there’s a handy WordPress Flickr-embedder that will do this easily, you can spend a bit of time getting details of the URLs of each sized image, and put together some code that does the trick.
Here’s an example. If you’re looking at this on a mobile phone, you might only be seeing the 320px image. But on a lovely large or retina display, you may be seeing a 2048px image!
(At least I hope that’s the case)
Here’s the code I used to do this:
<a href="https://www.flickr.com/photos/adambowie/31836754726/" title="Across the rooftops at dawn"><img src="https://c1.staticflickr.com/1/427/31836754726_cbbe667b3e_n_d.jpg" srcset="https://c1.staticflickr.com/1/427/31836754726_cbbe667b3e_z_d.jpg 640w, https://c1.staticflickr.com/1/427/31836754726_cbbe667b3e_c_d.jpg 800w, https://c1.staticflickr.com/1/427/31836754726_cbbe667b3e_b_d.jpg 1024w,
https://c1.staticflickr.com/1/427/31836754726_d378ecf063_h_d.jpg 1600w, https://c1.staticflickr.com/1/427/31836754726_f37b9c6b4a_k_d.jpg 2048w" alt="Across the rooftops at dawn"></a>
Essentially, the first image,
31836754726_cbbe667b3e_n_d.jpg in my case, is the 320px image on Flickr. Then inside
srcset are some of the other different sizes available. I probably could reduce this list a little, since you do need to get the precise Flickr URLs for each size from the download page for the photo.
Still, I think this all works, and so despite being a little bit more of a hassle to embed a picture than previously, I’ll try to do something like this in the future. Then I’ll see if Google likes it!