Need for Responsive Images
At the beginning of the web, web pages were viewed only on desktop screens. As mobile technology has improved over the years, more people began to access the Internet from their smartphones. This has lead to devices that support the internet having different sizes, orientations, and resolutions. Responsive design has emerged as a solution for the variation in the capacity of the devices. Websites are designed to be adaptive. Images are found in websites of all types. Responsive images will help in making websites more accessible for visitors using different devices than a desktop. Vector images can be a solution in some cases. Using vector images whenever possible will be a good step in the right direction for responsive design.
Resolution Switching
When comparing HTML files with image files, we can see that image files are significantly larger in file size. While these images may be required for a large desktop screen, they are not suitable for mobile devices. When the resolution of the image is much larger than the device’s display, the user is just wasting bandwidth. In places where Internet services are costly or slow, this is an inconvenience for the user. The solution will be to just serve a smaller version of the file for those users. This can be done using the srcset and sizes attributes.
Different display sizes
<img srcset="example-400w.png 400w,
example-600w.png 600w,
example-800w.png 800w"
sizes="(max-width: 400px) 400px,
(max-width: 600px) 600px,
800px"
src="example-800w.png"
alt="Example Image">
The srcset attribute provides a list of images accompanied by their width in w units. Each file is separated by a comma. The sizes attribute is used for stating the conditions to apply for selecting the image from the list provided by srcset. The browser will select the first matching condition. So the ordering should be from smaller to larger files. The image file closely matching the slot will be selected. The srcset is supported by modern browsers. For older browsers, the src attribute acts as a fallback mechanism. Older browsers display the image in the src attribute while newer ones will select the appropriate one from the srcset attribute.
Same display size; Different resolutions
Sometimes the image size displayed on the screen will be the same for two devices. But the resolution of the devices may be different. In this case, the image may not be great on the high-resolution screen. We can provide additional images at higher resolutions for these devices.
<img srcset="example-400w.png 1x,
example-600w.png 1.5x,
example-800w.png 2x"
src="example-800w.png"
alt="Example Image">
The browser chooses the appropriate images automatically when the width of the image is set in CSS. Low-resolution devices will use the first image while higher resolution devices will use the last image.
Using these methods for resolution switching can be beneficial for the page load times in smaller display devices. This can give the perception that the pages load faster.