Srcset is an HTML image attribute that specifies the list of images to use in different browser situations. The browser will pick the most optimal image version, based on the screen size and resolution. This concept is known as responsive images.
It may seem complicated and there are several ways to set it, but let’s take a look at a real example:
<img srcset="ahrefs-image-480w.jpg 480w,
ahrefs-image-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="ahrefs-image-800w.jpg"
alt="Cool ahrefs illustration">Here srcset tells a browser to load 480-pixel wide image version if the viewport width is less than 600 pixels. If the viewport width is more than 600 pixels, the browser will load a larger image, 800-pixel wide.
Alternatively, you can set the pixel density (device pixels per CSS pixel), as a condition instead of size:
<img srcset="ahrefs-image-1x.jpg 1x,
ahrefs-image-2x.jpg 2x"
src="ahrefs-image-1x.jpg"
alt="Another cool ahrefs illustration">Srcset is important for SEO because it allows browsers to load the optimal image size based on the device’s characteristics.
Larger images have larger file sizes. There’s no point in loading, for example, a 2400-pixel wide, 20 MB image on a simple mobile phone. So srcset is saving bandwidth and reducing the page load speed. Load speed is a direct ranking factor for mobile searches, desktop searches, and even ads on Google.
PageSpeed Insights is a free online tool by Google that shows the speed field data of your pages. After you enter the web page URL, the tool will provide suggestions to optimize the speed of your website, including recommendations for images.
Common suggestions that PageSpeed insights might provide for your website’s images include updating the image format for better compression, considering lazy-loading offscreen or hidden images, and properly sizing images for improved load time.
The “picture” element also allows browsers to display different images based on device characteristics. But with this element, you can define totally different images, not just their size versions.
For example, if you want to show a narrow, tall image on a mobile device and a wide image on desktops.
<picture>
<source media="(min-width: 600px)" srcset="ahrefs-image.jpg, ahrefs-image-2x.jpg 2x">
<img src="ahrefs-image.jpg" alt="cool illustration">
</picture>
In the above example, ahrefs-image.jpg or ahrefs-image-2x.jpg will be displayed on 600px+ browser widths (depending on the device pixel density). For screen widths less than 600px and when the picture element isn’t supported, the img element will be rendered instead. The “img” element should always be included.