How to use SRCSET for SEO and UX
Written by Jon Henshaw and published
In addition to speeding up the load time for a site, SRCSET also provides a unique way to improve the user experience (UX) of images that isn’t just size-related. More on that later…
How to use SRCSET
The SRCSET attribute is used with the IMG element. We use SRCSET for the images on our 2015 On-Page SEO Study, so I’ll use that as a real-life example.
First, you start with your typical HTML code for an image.
<img src="/images/5-most-common-issues.jpg" alt="5 Most Common SEO Issues" />
Second, you resize the main image to fit the width of smaller devices. In this example, we resized the image to 360, 550, 800 and 1,024 pixels – leaving us with a total of 5 images. Note: You can come up with your own sizing scheme, this is just the one that made the most sense to us.
Next, you link to those images using the SRCSET attribute. The values for the attribute are the image and minimum screen width. If you have more than one image, you should separate each additional image and width value with a comma.
<img src="/images/5-most-common-issues.jpg" srcset="/images/5-most-common-issues-360.jpg 360w, /images/5-most-common-issues-550.jpg 550w, /images/5-most-common-issues-800.jpg 800w, /images/5-most-common-issues-1024.jpg 1024w" alt="5 Most Common SEO Issues" />
SRCSET also allows you to specify if an image should be displayed only for High Definition/DPI/Retina screens. You can do that by adding 2x at the end of the value.
<img src="/images/5-most-common-issues.jpg" srcset="/images/5-most-common-issues-360.jpg 360w 2x" alt="5 Most Common SEO Issues" />
Using SRCSET is a little more tedious than using just one image, but it helps provide a speedier site. The good news is that WordPress 4.4 supports SRCSET natively, so it does most of the work for you.
How to use SRCSET to improve UX
While I’m excited that WordPress 4.4 supports SRCSET, this doesn’t mean native WordPress will always provide the best UX. For example, the only thing WordPress does is resize the image. What if a smaller version of the image makes it difficult to read on a smaller device? For instance, this image looks good on a desktop screen, but it has too much information for a mobile screen.
In order to provide the best UX for mobile users, consider creating a completely new image for smaller devices. For example, this is the image we display using SRCSET when a small mobile device accesses the page.
That provides a much better user experience. It makes the site load faster, and the improved user experience encourages the visitor to want to share it more.
I encourage everyone to start using SRCSET now to improve both UX and SEO for their site(s).