AVIF, WebP, JPG. How to Optimize Images for Responsive Web Design

Last update:

As more and more people access websites on various devices with different screen sizes and resolutions, it’s important to ensure that your website’s images are optimized for responsive web design. Responsive web design ensures that your website is accessible and user-friendly on all devices, whether it’s a smartphone, tablet, or desktop computer. One aspect of responsive web design is optimizing your website’s images to ensure that they are delivered at the appropriate resolution and format for each device. You can check it live on tastehungary.com (hero image).

Here is an example of how to optimize hero images for responsive web design using the <picture> element and multiple <source> elements:

<picture>
	<source media="(max-width: 767px)" srcset="/images/400x500.avif" type="image/avif">
	<source media="(min-width: 768px)" srcset="/images/1242x702.avif" type="image/avif">
	<source media="(max-width: 767px)" srcset="/images/400x500.webp" type="image/webp">
	<source media="(min-width: 768px)" srcset="/images/1242x702.webp" type="image/webp">
	<img src="/images/1242x702.jpg" fetchpriority="high" alt="hero" class="hero-img">
</picture>
HTML

Make sure to replace the image filenames with the actual filenames of your images.

You have to use the following CSS code too:

/* full screen on mobile */
@media screen and (max-width: 767px) {
	.hero-img {
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		max-width: 100vw;
		width: 100vw;
		height:calc(100vw / (400 / 500));
		object-fit:cover;	
		display:block;
		z-index: -1;
	}
}

/* no full screen on desktop */
@media screen and (min-width: 768px) {
	.hero-img {
		aspect-ratio: 1242 / 702;
		width: 100%;
		z-index: -1;
	}
}
CSS

The HTML code defines a picture element that allows the browser to choose the best image source to display based on the device screen size and image format support. The picture element can contain multiple sources of an image in different formats and resolutions, and the browser selects the best option based on the media query and format support.

Here is what the code does:

  • The <picture> element is defined, which contains multiple <source> elements and an <img> element.
  • The first <source> element specifies an image in the AVIF format with a resolution of 400×500 pixels for screens with a maximum width of 767 pixels.
  • The second <source> element specifies an image in the AVIF format with a resolution of 1242×702 pixels for screens with a minimum width of 768 pixels.
  • The third <source> element specifies an image in the WebP format with a resolution of 400×500 pixels for screens with a maximum width of 767 pixels.
  • The fourth <source> element specifies an image in the WebP format with a resolution of 1242×702 pixels for screens with a minimum width of 768 pixels.
  • The <img> element specifies a fallback image in the JPG format with a resolution of 1242×702 pixels for devices that don’t support the picture element or any of the specified formats.
  • The fetchpriority attribute on the <img> element indicates that the image should be fetched with high priority.
  • The alt attribute on the <img> element specifies alternative text for the image, which is used for accessibility purposes when the previous images can’t be displayed because the user’s browser doesn’t support them.

In the CSS code, there are two media queries for different screen sizes. The first media query is for screens with a maximum width of 767px, and the second media query is for screens with a minimum width of 768px.

Within each media query, there are CSS styles applied to the .hero-img class. In the first media query, the image is set to fill the entire width of the screen (100vw) and maintain its aspect ratio based on a height-to-width ratio of 400/500. The object-fit property is set to cover to ensure the image covers the entire area without distorting it. The z-index is set to -1 to ensure the image is displayed behind other elements.

In the second media query, the image is set to maintain its aspect ratio based on a height-to-width ratio of 1242/702. The width is set to 100% to ensure the image is not larger than its container. The z-index is set to -1 to ensure the image is displayed behind other elements.

This is a responsive image implementation that ensures the best possible image quality and format based on the user’s device and browser capabilities.