How to Use Resolution Switching to Enhance Web Image Performance

Nowadays, screens of varying sizes and resolutions dominate our daily lives. Ensuring that images display crisply and quickly across devices is paramount. Enter resolution switching—a technique that's revolutionizing the way we experience the web. In this article, we'll mainly explore two powerful CSS tools for image responsiveness:

1. Image set function.

2. Media Queries.

Resolution Switching

Definition

Resolution switching involves delivering images at different resolutions suited to a device's capabilities. It ensures that devices receive the most appropriate image resolution for optimal display.

How Resolution Switching Impacts Web Performance and User Experience

• Speed: By serving images tailored to the device's resolution, websites load faster, especially on mobile devices with limited bandwidth.

• Quality: Users get the best visual experience, with images that look sharp and clear on their specific screen.

• Efficiency: Avoids unnecessary data consumption, saving users' data and reducing server load.

Evolution of Web Images

High-Resolution Screens and Their Demands

The launch of high-resolution displays, like Apple's Retina in 2010, signaled a change in web image requirements. These screens have higher pixel densities, measured in pixels per inch (ppi), meaning they pack more pixels into the same space than standard displays. As a result, images tailored for regular screens can appear under-sampled and blurry on high-resolution displays.

Some devices and their Pixel Density:

For context:

• Pixel density is the number of pixels present in a given linear unit of a display, often measured as pixels per inch (ppi).

• High pixel density indicates that an image has a larger number of pixels within the same space, leading to clearer and sharper displays.

• Issues arise when images, which are intended for lower resolutions, are displayed on high-resolution screens. They can appear pixelated or blurry, as the image doesn't have enough data to fill the high pixel density of the screen adequately.

Image source: https://www.j-display.com/english/news/2016/20161121.html

The image-set() CSS Function

The image-set() function in CSS is designed to allow authors to provide multiple variations of an image to be displayed in different situations, primarily for high-resolution displays. It's a way to serve different images based on the resolution of the user's display or the zoom level of the browser.

Syntax

The basic syntax of the image-set() function is:

image-set("image1.jpg" 1x, "image2.jpg" 2x, "image3.jpg" 3x, ...);

You can also specify the URLs wrapped with the url()function:

image-set(url("image1.jpg") 1x, url("image2.jpg") 2x, url("image3.jpg") 3x, ...);

Additionally, you can provide images of different types to be used in situations where not all devices or software accept all image formats. Later in this post, we will discuss more about this topic.

image-set(url("image1.webp") type("image/webp") 1x, url("image1.jpg") type("image/jpeg") 1x);

Here’s an example using image-set()for background images:

.background {
  background-image: image-set(
    "background-1x.jpg" 1x,
    "background-2x.jpg" 2x
  );
}

Quick Explanation

Here**"image1.jpg" 1x** specifies the image to use for standard displays. While**"image2.jpg" 2x** specifies the image to use for displays with twice the standard resolution, and so on.

2 Main image-set CSS Function Use Cases

1. High-Resolution Displays: With devices like Retina displays, where the pixel density is higher than standard screens, images can appear blurry if not optimized. image-set() allows you to provide higher-resolution images for such screens.

2. Browser Zoom Levels: If a user zooms in on a webpage, the browser can opt to display a higher resolution image if available.

Next-Gen Image Formats

With the evolving web, new-gen image formats like WebP, AVIF, and HEIF are emerging as alternatives to traditional JPEG and PNG formats. These next-generation formats offer better compression and faster load times, meeting the demands of modern web design and user expectations. However, some browsers don’t support some of these new formats, and that’s why fallbacks using traditional formats are useful and essential.

Implementing Resolution Switching: Best Practices

To ensure optimal image display across devices, it's crucial to align with your audience's preferences. Leveraging analytics can reveal the prevalent screen resolutions of your visitors, but for the most accurate insights, testing on actual devices surpasses emulators. Numerous tools, such as Google's Squoosh and TinyPNG, facilitate image optimization, streamlining the compression of PNG and JPEG formats without quality degradation. However, it's essential to strike a balance; excessive compression can diminish image quality. Additionally, given the distinct requirements of mobile devices compared to desktops, a mobile-first optimization approach is recommended.

Using the <picture> Element for Backgrounds

The <picture> element in HTML offers more control over which image is displayed, based on device capabilities.

<picture>
  <source srcset="image-2x.webp" type="image/webp">
  <img src="image-1x.jpg" alt="Alternative text for image">
</picture>

The <picture> element in HTML enables adaptive image loading based on device capabilities. Within <picture>:

1. <source> Element:

   • srcset="image-2x.webp" points to the "image-2x.webp" source.

   • type="image/webp" indicates the image is in the WebP format, a modern compression-efficient format.

2. <img> Element:

   • Acts as a fallback with src="image-1x.jpg".

   • alt="Alternative text for image" provides a text description for accessibility.

In this setup, browsers supporting WebP will display "image-2x.webp". Others will default to "image-1x.jpg". This approach ensures optimal image delivery for varied devices and browsers.

The <picture> element, an HTML feature, uses multiple <source> tags to offer alternative images based on device capabilities like viewport width or format support. In contrast, the image-set() function, a CSS feature, focuses on resolution switching for background images, allowing browsers to select images based on pixel density. While <picture> provides broader control for inline content images, image-set() is tailored for background visuals in stylesheets. Both tools ensure optimal image display across diverse devices and conditions.

Media Queries and Art Direction in CSS

Media queries are a feature in CSS used to apply styles based on the specific characteristics of a device or the browser viewport. They allow web designers and developers to create a responsive design that adapts to different screen sizes, resolutions, and other conditions like device orientation.

Basic Syntax

For detailed information about media queries and extended explanation, check its documentation. The basic syntax of a media query is:

@media screen media-type (condition) {
  /* CSS rules to apply if the condition is true */
}

Omitting the media type defaults to "all" in media queries.

Practical Example

Let’s check the code below:

@media (min-width: 800px) and (max-width: 1200px) and (orientation: landscape) {
  .element {
    background-image: url('large-image.jpg');
    font-size: 16px;
    color: #333;
  }
  .another-element {
    display: flex;
    justify-content: space-between;
  }
}

In this case, when the viewport width is between 800px and 1200px, and the device or window is in landscape mode, the specified styles will be applied to elements with the classes .element and .another-element.

Logical Operators:

Media queries support three logical operators:

1. and

2. not

3. only: Used to prevent older browsers that do not support the specified media features from applying the given styles. Browsers that do not understand the only keyword will ignore the entire media query, ensuring that the styles inside aren't applied. It's a way to provide a fallback for older browsers.

Browser Support:

Media queries are supported by most modern browsers. However, Internet Explorer 8 and earlier versions lack this support. To address this, you can use tools like Respond.js.

Conclusion

Ensuring that web images display optimally across diverse devices is crucial. Resolution switching, achieved through techniques like the image-set() CSS function, the <picture> HTML element, and media queries, play a pivotal role in enhancing web image performance. With high-resolution screens becoming the norm, understanding and implementing these tools becomes paramount for web developers and designers. Moreover, as the web continues to evolve with next-generation image formats, staying updated and optimizing for these advancements is essential for both user experience and SEO. By following the best practices outlined in this guide, you can ensure your website's images load crisply, quickly, and efficiently across all devices.

References and Further Reading

• CSS Tricks: Using Performant Next-Gen Images in CSS

• MDN Web Docs: Responsive Images