Make your Blogger blog more responsive by auto-magically adding the SRCSET attribute to your images!

viaMacchina uses Blogger for its blogging platform. Blogger has been around for a long time, and it continues to be one of the best blogging platforms available. Out of the box, you get a mobile view to your blog. But, to be clear, even though the view is geared towards mobile devices, it is not responsive. Because of this, we are developing a completely responsive template to replace the out of the box Blogger template and mobile view.


"Responsive" web pages sound cool, but at the end of the day, responsive techniques are really just describing what I consider to be "good" use of HTML and CSS. For instance, when working with images, it is easy to set the images' height and width in pixels. However, doing this will force that image to remain at the specified height and width no matter how the screen or content around that image scales. An easy way to get around this limitation is to set the images' width to 100%, and contain that image in an element that has a constrained height and width.

Another issue that arises when applying responsive techniques to images is the concept of downloading the correctly sized image for the resolution of the device. If your website is rendering on a mobile device with a tiny screen, what benefit is gained in downloading an image that looks good on a 30" monitor? There have been many attempts at addressing this issue in the past using JavaScript, CSS, and in some cases server side code, but all of the solutions have been clunky, and have come with their own set of shortcomings.

Enter the srcset attribute. A part of the ever evolving HTML 5 specification, the srcset attribute has been adopted by most browsers in use today (see Can I Use - SRCSET).

Adding the srcset attribute to an image can instantly make that image act responsively and allow the browser to download the correct resolution for the viewport in use.

Here's an example using an image hosted by Blogger:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhG6Zx9ieO67Ihm9Zguk8eTgs0P82E0UAkU1q9nYFquo0PFVaJHC8O8cSM-B8TKNmmxusJiLRXUtBh1KKhN9hJgYfEp4_ZW80XkqzfK6mpSXB7BA6Hh5VOPoitgRsXZxzKVAjvFmIllDk/s320/IMGP3792.JPG" width="100%" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhG6Zx9ieO67Ihm9Zguk8eTgs0P82E0UAkU1q9nYFquo0PFVaJHC8O8cSM-B8TKNmmxusJiLRXUtBh1KKhN9hJgYfEp4_ZW80XkqzfK6mpSXB7BA6Hh5VOPoitgRsXZxzKVAjvFmIllDk/s320/IMGP3792.JPG 320w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhG6Zx9ieO67Ihm9Zguk8eTgs0P82E0UAkU1q9nYFquo0PFVaJHC8O8cSM-B8TKNmmxusJiLRXUtBh1KKhN9hJgYfEp4_ZW80XkqzfK6mpSXB7BA6Hh5VOPoitgRsXZxzKVAjvFmIllDk/s640/IMGP3792.JPG 640w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhG6Zx9ieO67Ihm9Zguk8eTgs0P82E0UAkU1q9nYFquo0PFVaJHC8O8cSM-B8TKNmmxusJiLRXUtBh1KKhN9hJgYfEp4_ZW80XkqzfK6mpSXB7BA6Hh5VOPoitgRsXZxzKVAjvFmIllDk/s1200/IMGP3792.JPG 1200w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhG6Zx9ieO67Ihm9Zguk8eTgs0P82E0UAkU1q9nYFquo0PFVaJHC8O8cSM-B8TKNmmxusJiLRXUtBh1KKhN9hJgYfEp4_ZW80XkqzfK6mpSXB7BA6Hh5VOPoitgRsXZxzKVAjvFmIllDk/s1600/IMGP3792.JPG 1600w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhG6Zx9ieO67Ihm9Zguk8eTgs0P82E0UAkU1q9nYFquo0PFVaJHC8O8cSM-B8TKNmmxusJiLRXUtBh1KKhN9hJgYfEp4_ZW80XkqzfK6mpSXB7BA6Hh5VOPoitgRsXZxzKVAjvFmIllDk/s3200/IMGP3792.JPG 3200w">

The src for the image is set to the smallest resolution available using the Blogger image service. Normally, when using an image hosting service such as Google Photos or Blogger, etc... the host will encourage you to upload a high resolution or original resolution photo. The service can then serve that image at many different smaller resolutions.

In the above example, we are configuring the images srcset attribute to use the following resolutions:

320
640
1200
1600
3200

This range covers most of the popular resolutions in use today.

The result of adding the srcset is that the browser will determine the appropriate image to download for the current viewport resolution. This greatly improves performance because the device is determining the correct size of the image that it needs.

The following video shows the srcset in action. The browser starts constrained to a very small resolution. In the Chrome developers tools, you can see that only the smallest resolution, 320, has been downloaded. As the browser windows size increases, larger images defined in the srcset are downloaded.

If you are using Blogger, and you're comfortable modifying your blog template HTML, you can quickly add this behavior to all of the images in your blog posts using the following jQuery:



and here is a pure JavaScript variant:



These functions need to be added to a script tag at the end of the HTML body so that they will execute after the image tags have loaded.

One important note: If your images have explicit height and width set, or if you have modified the underlying html so that the image src is pointing to a higher resolution file, you may need to manually update the image attributes in order to gain all of the performance benefits that come with the addition of the srcset attribute.

I hope this helps!