What is Srcset?
People access the internet on a rage of devices including desktop computers, laptops, tablets and cellphones. This means that web developers must consider different screen sizes and resolutions when displaying images on websites.
Srcset is an HTML attribute that allows developers to provide multiple image sources for a single <img> element, enabling browsers to choose the most appropriate image based on the device’s screen size and resolution.
<img srcset=”image-500w.png 500w, image-800w.png 800w” />
By using srcset, web developers can specify a list of images along with their corresponding widths or pixel densities. This ensures that users see the best possible image quality without unnecessarily slowing down page loading times.
When it comes to SEO, page load speed is considered a ranking factor so if a webpage takes too long to load, it can impact you search engine visibility.
Tips for Responsive Images
- Check PageSpeed Insights: This is a free Google tool that analyses your website’s performance, including how quickly images load. By entering your website URL, you can identify any issues related to image size or format that may be slowing down your site. It also provides actionable suggestions to optimise your images for better speed and performance.
- Use Picture element: This not only allows browsers to choose the best image based on device characteristics, but also allows developers to define different images too.
