/How to insert responsive images in responsive web pages

How to insert responsive images in responsive web pages

The most popular web pages are basically based on responsive web design. This article explains how to correctly insert images into web pages with responsive layouts so that they can adapt to the screen size and at the same time obtain the best loading performance. With the display effect, this method is called “responsive image” (responsive image).

There are many solutions for responsive images, which can be implemented in HTML, JavaScript and CSS. This article introduces HTML and CSS, because they are the easiest to implement and natively supported by browsers.

Responsive images the easy way

The easiest way to implement responsive images is:

img {
    width: 100%;
    height: auto;
}

But this approach may cause the image to appear larger than its original image. Assuming that its parent container has a width of 300px, and the original width of the image is only 200px, it will stretch, causing the image to be blurred.

If the max-width property is set to 100%, the image will never be larger than its original size:

img {
    max-width: 100%;
    height: auto;
}

If this article only introduces such a method, it is too superficial. Although this method is simple, it cannot achieve the best loading performance and user experience for the following reasons:

  • Because when the original image is larger, the size will be automatically reduced when displayed on mobile devices, but the performance is not good (large size original image will be loaded).
  • The desktop display area is larger, and the image can accommodate more detail. The screen of the mobile phone is small, many details are difficult to see and need to be highlighted.
  • Desktop displays generally have a single pixel density, while mobile phone displays often have multiple pixel densities, that is, multiple pixels are combined into one pixel, which is called a Retina screen. The image file is likely to be sharp on the desktop, and a bit blurry on the phone because of the expanded pixels.

The Best Way to Responsive Images

In response to the above problems, HTML provides a complete solution, that is, the <img> srcsetattribute, or the HTML5 <picture>element. See the following example:

<img srcset="demo-320w.jpg,
             demo-480w.jpg 1.5x,
             demo-640w.jpg 2x"
     src="demo-640w.jpg">

In the code above, the srcsetattribute gives three image URLs, adapting to three different pixel densities. The pixel density descriptor after the image URL, in the format of pixel density multiple + letter x1xIndicates the single pixel density, which can be omitted. The browser selects the image to be loaded according to the pixel density of the current device. If srcsetnone of the attributes meet the conditions, then srcthe default image specified by the attribute is loaded.

<picture>
  <source media="(min-width: 768px)" srcset="https://cdn.657g.com/demo-768x90.jpg">
  <source media="(min-width: 468px)" srcset="https://cdn.657g.com/demo-468x60.jpg">
  <img src="demo-250x250.jpg">
</picture>

The above code uses HTML5 <picture>elements screen width of the device reaches 768px or more, demo-768×90.jpg is displayed; if the screen width reaches 468 or more, demo-468×60.jpg is displayed; if the above If the two conditions do not match, demo-250×250.jpg is displayed. This method works best with image display ads.

Another example is given below, taking into account the adaptation of screen size and pixel density.

<picture>
  <source srcset="https://cdn.657g.com/demo@desktop.png,https://cdn.657g.com/demo@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="https://cdn.657g.com/demo@tablet.png,https://cdn.657g.com/demo@tablet-2x.png 2x" 
          media="(min-width: 768px)">
  <img srcset="https://cdn.657g.com/demo@mobile.png,https://cdn.657g.com/demo@mobile-2x.png 2x" 
       alt="演示图片">
</picture>

Note: <picture>The element has been supported by all major browsers, and the specific support is as follows:

  • IE 9 or above
  • Chrome 38.0 or above
  • firefox 38.0 or above
  • Edge 13.0 or above
  • Safari 9.0 or above
  • Opera 25.0 or above