• 原文地址：Responsive Images: Different Techniques and Tactics
  • Lahiruka Wijesinghe
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: zenblo
  • PassionPenguin, Chorer

Four technical strategies to realize responsive image

Creating responsive images isn’t rocket science, and I’m sure you’ve already created many of these tools using CSS. However, flexible size is only one factor when it comes to responsive images.

Sometimes depending on the device type, we need to adjust the image quality and even the image type to get a better user experience.

Today, we have different technologies that help us load images of the right quality and size. This article will explore these methods to help you find the one that works best for your project.

A brief introduction to responsive image methods

  • Device pixel-based approach: This approach uses multiple versions of the same image. It will select the most appropriate image to render at different resolutions. This approach is suitable for devices that do not render high-resolution images.
  • Streaming image method: By default, images are not streaming, so when the screen size changes, they tend to be cropped or remain a fixed size. Using the streaming image approach, we can put images into a responsive layout and stretch or shrink them as needed.
  • Art Direction approach: Art direction is a common approach we use when dealing with different screen sizes. We can solve this problem by changing the image content, cropping the image, or using a different image depending on the user’s screen size.
  • Type switching method: Some browsers and devices do not support modern image types such as WebP. The type toggle method can be used to toggle between image types, allowing you to deliver the best content to users based on device and browser compatibility.

Now that you know these methods and the scenarios where they work best, let’s take a look at how to implement them.

Realize the responsive image method

As mentioned above, there are several ways to implement responsive images. It is important to understand the best ways to implement these approaches to maximize the benefits of your project.

By default, HTML provides several excellent tags and attributes, such as IMG, Picture, Size, and SRcset, for image rendering in Web development. Now, I’ll show you how to implement the above method in a short time using these tags and attributes.

1. Device pixel based method

Before I go any further, I need to explain some information about high-density displays. Modern flagship mobile devices, such as the Samsung Galaxy S10, have 4x density displays, while some budget models may only have low-density displays.

If we push and load high-density images on a low-density display, it will lead to a very poor user experience and waste resources. Therefore, we need to use different images for different device pixel ratios.

In the following example, we compare two images. A 320×240 pixel small-kitten.jpg image and a 640×480 pixel large-kitten.jpg image, obviously the latter is suitable for high resolution display. (The X descriptor represents the expected device pixel ratio)

<img 
   srcset="small-kitten.jpg 1x, large-kitten.jpg 2x"
   src="small-kitten.jpg" 
   alt="A cute kitten" 
/>
Copy the code

Large-kitten.jpg images will be rendered if the user’s device resolution is higher than 640×480 pixels, and small-kitten.jpg images will be rendered otherwise. Most importantly, users with low resolution devices will not experience any delay in image loading time, while users with high resolution devices will not experience any problems with image quality.

2. Streaming image method

The core of this approach is to use different sizes of the same image rather than different images.

For example, we can achieve simple streaming images by giving relative proportions of image sizes rather than precise pixel values. The most common method is max-width:100%.

<img 
   src="black-dog.jpg" 
   style="max-width: 100%; height: auto;"
   alt="Black dog image"
>
Copy the code

As you can see, the image above can be freely scaled to fit the browser window. This method is ideal when the header graph is large.

In addition, an advanced way to use streaming images is to use the width of the image and the overall width of the page to calculate dimensions.

For example, consider a 1200px wide web page and a 500px wide image. Then, calculate the space occupied by the image on the page as follows:

Image width usage = image width/page width (500/1200) x 100% = 41.66%Copy the code

We can then use this value in the following code block. It will always keep the image in proportion to the size of the page.

<img 
   src="black-dog.jpg" 
   style="float: right; Width: 41.66%;"
   alt="Black dog image"
>
Copy the code

However, this calculation can cause problems when the viewport is too large or too small.

We can solve this problem by adding an upper and lower limit to the image by adding a maximum and minimum width in pixels.

<img 
   src="black-dog.jpg" 
   style="Width: 41.66%; max-width: 500px;"
   alt="Black dog image"
>
Copy the code

3. Art direction method

At the heart of the art direction approach is the display of different images depending on the screen size of the device. We can do this by switching to the Picture TAB instead of using the IMG TAB, as it allows multi-scale or multi-focus images to be provided when viewed on different devices.

A simple code snippet like the one below can achieve the above results. Here, we provide two different attribute values in theelement: media and srcset define the size and source of the image, respectively.

<picture>
 <source media="(min-width: 650px)" srcset="kitten-stretching.png">
 <source media="(min-width: 465px)" srcset="kitten-sitting.png">
 
 <img src="kitten-curled.png" alt="A cute kitten">
</picture>
Copy the code

In the example above, if the screen size is greater than 560px, the browser will display the image of the first image. If the screen size is greater than 465px and less than 650px, the browser will use the second image.

You’ll notice that the regular < IMG > tag is the last nested tag for the element. The use of the
element is critical to your code working properly — it’s an alternative when the criteria in the media query don’t match, and it’s compatible with browsers that don’t support the element.

4. Type switching method

With the rapid development of technology, different types of modern image types such as AVIf and WEBP are gradually introduced. Although they provide a higher user experience, some browsers do not yet support these image types.

Therefore, we can use type switching to solve this situation by changing the image format.

For example, the following code contains two modern image types and a GIF image. First, the browser will try the avif format, and if it fails, it will try the WebP format. If the browser does not support either format, it will use a PNG image.

<picture>
   <source type="image/avif" srcset="avif-kitten.svg" />
   <source type="image/webp" srcset="webp-kitten.webp" />
   <img src="kitten.gif" alt="A cute kitten" />
</picture>
Copy the code

You can also simulate this using Chrome DevTools to see what your images look like when the browser doesn’t support modern image types.

conclusion

I’m sure you now have a good idea of what you can do with reactive graphics, and where most of them fit.

Be sure to take full advantage of this knowledge when developing any Web application, because implementing responsive graphics in the right way can help provide a better user experience.

So I urge you to try these out and share your thoughts in the comments section.

Thanks for reading!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.