There’s a newly standardized HTML attribute used with the IMG element called SRCSET. It’s kind of a big deal because it allows webmasters to display different images based on a device’s screen size without the need for JavaScript or other special code. That means mobile browsers can be served the smaller images, thus speeding up their ability to render the page. And for SEOs, faster-loading mobile sites may mean the difference between ranking above or below their competitors in the SERPs.
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).
Analyze over 20 different technical SEO issues and create to-do lists for your team while sending error reports to your client.
Great news, but what about browser compatibility? Is this marking the end for e.g. media queries in css?
It’s supported in all major browsers. For browsers that don’t support it, it will fallback to the main image. So it’s safe to use 🙂 Also, CSS media queries are still relevant, just no longer needed for this.
Oh great to hear, I will look into it 🙂
HTML5 will not mark the end of CSS Media Queries. CSS governs much of the structure of a responsive design. However what SRC Set does allow is better grips of responsive images. You can’t change the SRC of an image using CSS: you can only change, say, a background image (as one example). So this is a good step for mobile-friendly (and not just resized, as Raven wrote here) images, but this is just one aspect, when CSS Media queries govern site-wide design, element resizing (such as larger text boxes for mobile phones), theming consistency etc. Hope this helps a bit!
What a strange attribute, embedding presentational data into markup–the opposite of what Web standards recommend. Interesting nonetheless.
I’m not sure I understand your comment. The SRCSET attribute is an extension of the IMG element. Both of which are Web standards. The only thing SRCSET does is specify a different image to display based on what is essentially a media query. At its most basic function, it’s optimizing the delivery of images for smaller devices that may also have a slower connection. At its most advanced – as I demonstrated in this post – it can be used to completely swap out images with more relevant and appropriate versions based on the device.
Perhaps when you say “attribute”, you don’t mean SRCSET, but instead mean the images I used as examples in the post. In that case, we made images with “presentational data” to make it easier for people to share (on Pinterest, include in a blog post, etc…). That’s a very common practice, and if there’s a so called Web standard that says not to do that, I could care less 😉
It definitely is a great boon to have a solution for responsive images. However, it makes difficult to modify or add breakpoints while coding the web project. You would have to adapt every single element to the new values, especially if you work on processors like SASS or LESS. That said it does resolve a lot of SEO issues as well as enhances the user experience.
Hello, help me please.
I need to add the ” 2x” to the url attribute srcset wordpress 4.4.2.
maybe you can do so using a function?
I leave a screenshot for you to understand me, and thank you very much for your article.
I appreciate on your blog really it’s helpful in faster loading website speed in mobiles and helps in maintain the ranking in SERP.
I really enjoy reading your stuff . Your all information are about SEO. i know ESO is the best way for get your business on top in Search engine.On page issues is very harmful for any website. thanks for share a best information about digital marketing.
It’s great news for have a solution for responsive images and its resolve SEO issues. But it’s supported in major browsers.
It is really grateful to read your article you given very good information you resolve all images errors in a easy way. As well as your aware me about me on-page seo much deeper I appreciate it.