Use srcset to display images correctly on your website automatically – however they’re viewed.

You’ll want your website to display the best quality images possible. But this doesn’t mean loading the biggest images you have and expecting them to suit all browsers.

Downloading a huge image when only a small one is required will slow down your site and deliver a sub-standard user experience. Conversely, using an image that’s too small will result in reduced quality when the image is reproduced at a larger size.

Downloading a series of images and picking the one you want to display doesn’t work either. And then there are retina screens which require double standard size images.

The challenge for your website is to download images in the correct size and resolution for the device that’s being used to view it.

This is where srcset comes to the rescue. The srcset attribute in html5 enables you to choose from a list of images and download only the one that meets your size and resolution requirements.

Using an image editing tool such as Photoshop, you can create an image in the largest size required, then set it to export that same image at various sizes. This will add a suffix to the end of the file name such as @x2, @x0.5, @x1, etc. so your image names will look something like this:

myimage-1x.jpg
myimage-2x.jpg
myimage-0.5.jpg

You can choose your own suffix to help you identify each image size and resolution.


So now you have a set of images in various resolutions. You can upload these to your site, choose the image you want to display at any given screen size or serve up a larger image for retina displays. This solution avoids you having to upload multiple files for each image and saves server space. 


Iinstead of loading each image individually like this:
[code]<img src=“/images/myimage.jpg”/>[/code]

You can now pick the best image and size from your set of images like this:

[code]<img srcset=“/images/myimage-1x.jpg 1x, /images/myimage-2x.jpg 2x”/>[/code]

(The 1x image is the standard size image and the 2x image is the retina sized image).

Your browser will download and display only the correct image for your screen size and resolution. So for a standard screen, it will download and display myimage-1x.jpg and for a retina display it will download and display myimage-2x.jpg

So this will select which image to display for retina devices, but it will not select the size option for a desktop or a mobile device. The retina image might be great for the desktop – but be overkill for a retina mobile which doesn’t need such a large image. In addition, on a mobile device (which may be using mobile data), downloading such a large file will slow down the experience.


Srcset allows you to specify the screen width by adding it between the image and the comma. To set three different images pending on the screen, you might add something like this:

[code]<img srcset=“/images/myimage-med.jpg 1024w, /images/myimage-lrg.jpg 2048w, /images/myimage-sm.jpg 800w”/>}[/code]

For a standard display width (1024px), you will display myimage-med.jpg, for a large screen (2048px), you will display myimage-lrg.jpg, and for smaller screens (such as tablets and mobiles), you will display myimage-sm.jpg.

Using this method is also great should you want to change the proportions between screen sizes. Maybe a wide letterbox image for the large image, standard proportions for medium, and a square image for mobiles and so on. This can again be combined with the retina size option, so you could also have<img srcset=“/images/myimage-lrg-1.jpg 2048w 1x, /images/myimage-lrg-2.jpg 2048w 2x”/>to choose the image for the larger screen and also choose the retina version if required.

Most newer browsers support the srcset option as standard (a list of supported browsers can be found here). Adding the standard src before the srcset option, you can set a standard size image which will be understood by older browsers and won’t break the image display.

Add the standard image with src and alt like this:

[code]<img src=“/images/myimage-med.jpg” alt=“my image title” srcset=“/images/myimage-med.jpg 1024w, /images/myimage-lrg.jpg 2048w, /images/myimage-sm.jpg 800w” />[/code]

In summary, using srcset is a great way to ensure you download the optimum images for all devices. Retina images won’t download if the browser doesn’t detect a retina display, reverting to the default image to avoid wasting time downloading and image that’s too big. But this will create additional work when adding new images to your pages as you may need to upload and link several images each time.

If you need help making adjustments to your existing website code, visit our website improvements page.