"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.
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:
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:
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:
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!