Categories
Blog

Responsive Images

What is a responsive image?

Mobile device use has sharply increased, and for most people, it now serves as their primary method of internet access. As a result, responsive web design is required for the website. This entails building webpages that can adapt to multiple devices’ diverse screen widths.

Images that are responsive can change their size and resolution to fit multiple screen sizes and resolutions, giving users the best viewing experience possible across all platforms, including desktops, laptops, tablets, and smartphones. Responsive images are essential in web development for generating adaptable websites and designs that can change to fit different screen sizes. Displaying images in the appropriate size and resolution for each user’s device is the main goal of employing responsive images, which improves website performance and user experience.

It is a method to display an image from multiple images provided to the browser depending on the screen size. We can make several different files and using HTML we can deliver different files to different screen sizes.

Why should we use responsive images?

Responsive images are essential in today’s world where users are accessing websites on a variety of devices. Failure to use responsive images can lead to several negative impacts on user experience and website performance.

Poor Image Quality

Without responsive images, images on the website may appear too small or too large on certain devices, making them difficult to see or understand. In some cases, high-resolution images used on smaller devices may look blurry or pixelated, negatively affecting the user experience.

Slow Loading Times

Large images not optimized for smaller screens can take a long time to load on mobile devices, leading to slow page load times and frustrated users. This can result in users leaving the website before it even loads, leading to lost traffic and potential revenue.

Cropped Image

When the same image is used for all devices, it may result in images being cropped awkwardly or important details being lost, which can harm the overall visual impact of the website. This can make the website look unprofessional and unappealing, leading to a negative impression on the user.

Negative Impact on SEO

When a website has slow loading times due to non-responsive images, it can negatively impact the website’s search engine optimization (SEO). Google and other search engines take page loading times into account when ranking websites, and a slow-loading website may rank lower than a faster-loading website.

Blurry or pixelated images

If high-resolution images are used on smaller devices, they may appear blurry or pixelated. This negatively impacts the user experience as it reduces the quality of the image and makes it harder to read or see important details. This can lead to users leaving the website and not coming back.

What are the advantages of responsive images?

Accessibility

Websites that are accessible to all users, regardless of their device, are more likely to reach a wider audience. Responsive images help to ensure that images on a website are accessible to all users, regardless of their device.

User Experience

By ensuring that the images on the websites are optimized for all types of devices, responsive images can help improve the viewing experience of the user and give them a better user experience while scrolling through a website.

Mobile usage

With more and more people accessing the internet via mobile devices, it’s important that websites are designed to be mobile-friendly. Responsive images help to ensure that images on a website are optimized for smaller screens and slower connections, improving the user experience for mobile users.

Page speed

The user experience of a website depends heavily on how quickly it loads, and slower loading times might increase the bounce rate. By supplying the appropriate size image to the device being used rather than big images that may take longer to load, responsive images aid in increasing page speed.

SEO

Google and other search engines place a strong emphasis on mobile-friendliness, and websites that are not mobile-friendly can suffer in search rankings. Responsive images help to ensure that a website is optimized for all devices, which can help to improve its search ranking.

Use cases

Resolution Switching

According to the screen size and resolution of the device, a technology called “resolution flipping” is utilized to serve images in various resolutions. This method enables websites to serve lower-resolution images for smaller screens and better-resolution images for larger screens, hence optimizing graphics for various devices. Websites can increase site performance and user satisfaction by utilizing resolution switching because it allows for picture device optimization. The <srcset> and <sizes> elements in HTML, which enable developers to specify several image sources and sizes according to the user’s device, are frequently used to execute this strategy.

Srcset width descriptor

Srcset is used for providing one or multiple image sources and when using srcset width descriptor the image URL is followed by the width of the original image. The browser will use the width as a reference to select the appropriate image. In the example below, we have three identical images but with widths of 480 pixels, 680 pixels, and 1024 pixels, and we use ‘w’ for the unit instead of pixels.

Sizes

According to the screen size and resolution, the sizes attribute in HTML aids the browser in selecting the best image to display. It functions by giving the browser a set of requirements or guidelines, expressed as media queries and slot width, to choose the picture. The slot width works as a container where the image is going to be placed. E.g., if the sloth width is 480px then the image with 480 pixels of width or less from the srcset is going to be selected by the browser.

In the absence of a media query, the default setting will be used. The sizes feature can be used to optimize images on a website, enhancing both user experience and website speed by giving the browser details about the size and resolution of the device.

If it is not supported by the browser, it will use the image source from src attribute.

html code using srcset and sizes attribute


In the example, we have provided three different sizes with two media conditions. In the first condition, if the width of the screen is more than 1024 pixels, the slot width will be 40vw which means 40 percent of the viewport. This means devices with 1024 pixels width will use the small image (480px width) as 40 percent of 1024 is 409 pixels.

dog portrait small version viewport 1035 pixels


When the width crosses 1200 pixels, 40 percent would be greater than 480 pixels and hence the browser will pick the next larger picture which is the image with 680 pixels.

dog portrait medium version viewport 1280 pixels

So, using viewport width as a unit adds a bit more dynamic as by only using one condition it’s possible to make the browser select different images.

For the second condition, any device with a width between 680 pixels and 1024 pixels will have a slot width of 680 pixels. The browser will then select the second image as its width (680 pixels) matches with slot width.

dog portrait medium version viewport 680 pixels

For the last value as it does not have a media condition, it will work as the default value if the media condition does not match. Since the slot width is 100vw, the browser will select the image with the same width as the viewport width. Therefore, devices with 480 pixels width or less will be shown the small resolution image.

dog portrait small version viewport 480 pixels

Art Direction

Art direction is a technique used by designers to display specific images based on screen sizes. This technique allows designers to create different versions of an image and display them depending on the user’s screen size. For example, a landscape image may be displayed on wider screens, while a cropped image focusing on the details may be displayed on mobile screens.

The art direction technique can be implemented using the <picture> element with the <source> and <img> elements. The <picture> element allows designers to define different versions of an image using the <source> element. Each <source> element can include a different image source along with media queries that define the screen size and resolution that the image should be displayed for.

The <img> element is required for the art direction technique to work, and it acts as a fallback if the browser does not support the <picture> element. The <img> element can include a default image source that will be displayed if none of the <source> elements match the user’s screen size and resolution.

Art direction is a powerful technique that allows designers to create responsive images that adapt to different screen sizes and resolutions. By using the <picture> element with the <source> and <img> elements, designers can create visually compelling websites that provide a great user experience on any device.

html code using picture and source element

In the code above, there are two media conditions one for the larger screens to use a landscape picture and the other for smaller screen sizes to use the cropped image.

fantasy landscape art

For the second condition with a min-width of 768px or when none of the media conditions is met, the image sourced will be the cropped version of the original image.

cropped fantasy landscape art

Conclusion

In contemporary web design, responsive images are no longer a luxury but rather a necessity for creating a seamless user experience. Their implementation is crucial in ensuring optimal accessibility, usability, and visual aesthetics across different devices with varying screen sizes and resolutions. By utilizing responsive images, web developers can improve the loading speed of their websites, reduce bandwidth usage, and enhance search engine optimization (SEO) strategies, resulting in cost savings and a more competitive online presence. Consequently, incorporating responsive images into a comprehensive web design strategy should be considered a fundamental component of modern website development.

References

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#why_responsive_images

https://cloudfour.com/thinks/responsive-images-101-part-6-picture-element/

https://web.dev/learn/design/responsive-images/