Make Google Photos img tags responsive

Blogger, like Google Photos, has great photos handling which allows you to resize an image just by tweaking its URL, which can be incredibly useful for using dynamic images to ensure that your mobile readers aren't downloading MB of data over their mobile network.

URL Size Parameter

Take, for example, a panoramic image that I took of the coliseum in Rome. Its original size is a whopping 4.6MB - overkill for any mobile client viewing it.
Even on an iPhone 6+, we're talking 1920x1080 res, when the original image itself is 8682x2630.

Uploading the image to Blogger and adding it to this post, we see straight away the resizing behaviour in action.


The image above is the default size when you insert into blogger's post editor: 320px wide.
The URL is:

http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s320/PANO_20140810_102814.jpg

The size parameter for the URL above is the s320 part. We can substitute any different size we want in there for the 320 to get a higher or lower quality version of the image.

HTML5 img srcset

In HTML5, the img tag was upgraded to have a srcset attribute. If you're looking for a great explanation of what this is and how to use it, I recommend Smashing Magazine's article.

TL;DR:
We basically give a set of image sizes followed by the minimum width at which the browser should use that image size.

<img src="http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s320/PANO_20140810_102814.jpg"
  srcset="http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s320/PANO_20140810_102814.jpg 320w,
  http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s640/PANO_20140810_102814.jpg 640w,
  http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s1200/PANO_20140810_102814.jpg 1200w,
  http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s1600/PANO_20140810_102814.jpg 1600w,
  http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s3200/PANO_20140810_102814.jpg 3200w" />
img srcset attribute for a responsive image.


Result:



The result is an image which the browser should, in theory, make smart requests for the appropriate size. Compare the above image, with a srcset, to the image without the srcset - both images have a src with the s320 parameter, and are CSS sized to 100% of the parent container's width:



Happy Blogging!

Luke

Comments

  1. Nice job. I've read a few articles on src set now but yours is simple, elegant and gets the message across. Looking forward to reading other tips you've been amassing here without my knowledge...

    Thanks for the post.

    ReplyDelete

Post a Comment

Popular posts from this blog

Filter out certain labels from my Blog Homepage

Change the landing page of my blog

Get Facebook to show feature image for your Blog's Homepage