Use the SRCSET attribute to improve your SEO

by Silvia Mazzetta Date: 30-04-2021 css css3 design seo


There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images based on the size of the device, and without using javascript or other special code. This means we can serve smaller images for mobile devices, improving load times. And mobile websites that load much faster means, for those of us working in search engine positioning, the difference between appearing above or below our competitors in the search engines.

In addition to improving the loading time of a website, the SRCSET attribute additionally provides a new way to improve the user experience.

How to use the SRCSET attribute

The SRCSET attribute is used inside the IMG element. Let's look at the typical HTML code for an image:

<img src="/img/web-positioning.jpg" alt="search engine optimisation tips" />

From this we need to resize the main image to fit the size of smaller devices. In this example we will resize it to 360, 550, 800 and 1,024 pixels, leaving us with a total of 5 images. Note: You can create your own image sizes, this is just an example.

Then link to those images using the SRCSET attribute. The values of the attribute are the image and the minimum screen width. If you have more than one image you must separate each image and additional width value using commas.

<img src="/img/web-positioning.jpg" srcset="/img/web-positioning-360.jpg 360w, 
/img/web-positioning-550.jpg 550w, 
/img/web-positioning-800.jpg 800w, 
/img/web-positioning-1024.jpg 1024w" 
alt="search engine optimisation tips" />

SRCSET also allows you to indicate whether an image should only be displayed on high definition / DPI / Retina displays. This is done by adding 2x to the end of the value.

<img src="/img/web-positioning.jpg" 
srcset="/img/web-positioning-360.jpg 360w 2x" 
alt="search engine optimisation tips" />

Using SRCSET is a bit more tedious than using just an image, but the benefit in loading speed is worth it. The good news is that WordPress 4.4 supports SRCSET natively, so it will do most of the work.

How to use SRCSET to improve User Experience (UX)

The native implementation of SRCSET in WordPress will, by default, only resize the image. But what happens if the smaller version of a given image makes it difficult to read on mobile devices? For example, the following image looks fine on desktop computers, but contains too much information for a mobile device:

common sei issues

source: raventools

To provide the best user experience on mobile devices, we can create a completely different image for mobile devices. For example, we can display this image using SRCSET:

most common seo issues

source: raventools

This provides a better user experience. It makes the website load faster, and the improved user experience increases the likelihood that the article will be shared.

We recommend everyone to start using SRCSET as soon as possible to improve UX and SEO for our websites.

Abstract vector created by vectorjuice - www.freepik.com
 
by Silvia Mazzetta Date: 30-04-2021 css css3 design seo hits : 767  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 7 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Related Posts

Top tools for UX design and research

This article is a compilation of the "ux tools" I have tested in recent years. I've separated the tools by categories, although I recommend you to take a look at all…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Graphic design and its impact on Web Development

In today's article we will explain the concept of graphic design, its fundamentals and what it brings into web development. Graphic design is applied to everything visual, believe or not,…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

Cross cultural challenges in web design, an overview

The user experience design of a product essentially lies between the intentions of the product and the characteristics of your user. - David Kadavy - The task of building a culturally appropriate…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

How to write our own Privacy Policy

In this article we will talk about Privacy Policy statements, how you can write one and implement it on your page. Why did it pop up? These days when we browse on…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration