Use picture tag on Blogger images for faster on small devices

Technically, Blogger do not have native API to return the desired size image. We can have full size as well as small thumbnail. Dave Rupert's technique to get the better response across all devices is pretty good. I would like to have it on my blog too. Hence I found a way to do that with Blogger feed and Javascript.

Why to use <picture>

The reason to use <picture> tag is that clever technology that holds behind it. <picture> tag holds <source> tags for specific screen sizes and <img> tag as fallback.

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

This makes images taking less time loading the image. In small devices no need to load high resolution images, we can decrease loading time by loading small size images.

Put them in Blogger

Well, it is not possible in Blogger natively as I mentioned before. To do so we we need to fetch post and their images via jQuery from Blogger feeds. Blogger images are hosted on Photos by Google. Every image URL contains a specific text for the size. We can replace that for each source and let picture tag selects which one to load.

To read how to fetch recent post via Blogger feeds, read this article. As you may read in this article about all json paths of each element. This is the path for first image of each post.

json.feed.entry[i].media$thumbnail.url

This returns a small size image as 72px by 72px. As I mentioned above, each photo have a specific text to change size of the image. All we going to do is to replace that text with some various sizes and put them in source tag. A normal size image will also be retrieved for fallback purpose.

var imageSrc = json.feed.entry[i].media$thumbnail.url,
  imageBig = imageSrc.replace("s72-c", "s900-no"),
  imageMed, imageDefault = imageSrc.replace("s72-c", "s500-no"),
  imageSmall = imageSrc.replace("s72-c", "s200-no"),
  pictureTag = '<picture><source media="(min-width:1024px)" src="' + imageBig + '"/><source media="(min-width:700px)" src="' + imageMed + '"/><source media="(min-width:500px)" src="' + imageSmall + '"/><img src="' + imageDefault + '"/></picture>';

Anatomy of image link

Image link by default contain s72-c. Here is the demo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp7t34G4q8y0CwXBaSZlRXUllLM5s33DZAo4yENQyWrL1-vZf8I0O_W33y2S6O5uu09-AlcAi1JtZkXk2tVsuIcxZY7fqc-HByEvdbhRr1Y5KMZEIbKBS1fKcBAaGOZkFl44qnA_xGOVI//s72-c/8072_funny_minimal.jpg

As you can see in above link, s72-c. Here is the key to understand it:

s: represents size and 72 means 72px. We can replace it to get our desired size.

c: This one maintains the image into square. In above code, we replaced it with "no" to get the corrent image size ratio.

We can have a specific size (width and height) image with w and h notations in link. Like we can replace s72-c with w400-h600-c. This will return the image of the desired width and height.