Since Mobilegeddon, SEOs everywhere have been doing what they can to make their sites mobile friendly. For most SEOs, that means making their sites responsive. Unfortunately, that’s also where they stop their mobile optimization.
In the eyes of Google, there’s a lot more to making a site mobile friendly than simply making it fit on a phone’s browser.
Like most things in life, the mobile optimization techniques that SEOs often ignore are the ones that are out of sight and therefore out of mind. One of the most ignored techniques is image size reduction. It’s important for mobile optimization, and more importantly, to Google.
How to automatically display smaller images using standard HTML
Most responsive sites scale their images down to fit the width of the browser, but they don’t change the actual size of the image. That means if you have a 200KB image that looks great on a desktop browser, the same 200KB image will be used on a phone’s browser. That’s a lot of wasted bandwidth, especially when most pages have many images on them.
Use the srcset attribute to deliver the perfectly sized image
The srcset attribute can be used with the img element to specify which image to display based on the resolution of the device’s screen. In the example below, I’ve specified three alternative images to display based on the screen resolution. For example, if the screen resolution is 420px wide or less, it will deliver and render the beer-small.jpg image, which is significantly smaller than any of the other images. Using this method will improve the download and rendering speed of your pages.
<img src=“beer.jpg” srcset=”beer-small.jpg 420w, beer-medium.jpg 640w, beer-large.jpg 1024w” alt=“Beer”>
When you first start using this technique, you will want to test it to make sure you’re implementing it correctly. The first time I tested it, I added the width to each image so I could confirm the browser was displaying the correct size.
However, when I tested it on my desktop browser, it would only show the largest image. For example, when I resized my browser to a smaller width, and even refreshed the page, the smaller images wouldn’t display.
After triple checking my code, I was convinced it was correct. So I did some research and discovered that browsers like Chrome will cache the best version of the image.
In order to test and view a smaller image on your desktop, you will have to resize your browser window first and then clear the cache. When you widen your browser window, the smaller image will be replaced with the larger one, and it will remain until you resize the window and clear your cache again.
There are even more options when it comes to picking and displaying the right image if you use the picture and source elements, and sizes attribute. There are also excellent tutorials on how to use these HTML attributes and elements. However, for most sites, the example in this article should suffice.