How to implement responsive image loading on different devices? Use HTML5's srcset and sizes properties. The specific methods are: 1. Prepare pictures of multiple sizes and mark the width with w units; 2. Define the viewport ratio of the pictures under different screen widths in sizes, such as (max-width: 600px) 100vw; 3. Pay attention to setting DPR high-definition adaptation, such as 1x/2x descriptor; 4. Always keep src as a compatibility solution; 5. Plan the image size according to the device breakpoint, such as 480px/768px/1024px, etc.; 6. Test the loading effect of each size through the developer tool. This ensures that the browser accurately selects the best picture, taking into account loading speed and display quality.

Images account for a large proportion of web pages. If different devices can load pictures of the right size and improve loading speed and user experience, it is not enough to rely on the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165171495483.jpeg" class="lazy" alt="Using HTML5 Source Set for Responsive Images (srcset)" > tag alone. HTML5 provides srcset and sizes attributes, which are specifically used to implement responsive images.

What is srcset?

srcset is an attribute of the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165171335913.jpeg" class="lazy" alt="Using HTML5 Source Set for Responsive Images (srcset)" > tag that specifies multiple image resources. The browser will automatically select the most suitable image based on the device's pixel density or viewport width.

The basic usage is as follows:

 <img src="/static/imghw/default1.png"  data-src="image-small.jpg"  class="lazy"
  srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
  alt="Example Picture"
>

The key here is that each image is followed by a w value, indicating the width of the image (in pixels). The browser will choose the most suitable size to load according to the size of the current display area.

How to use it with sizes?

Although srcset can list available images, the browser does not know how big these images will actually appear on the page. This requires sizes to tell the browser: "With different screen widths, how much viewport width this image will occupy."

For example:

 <img src="/static/imghw/default1.png"  data-src="image-small.jpg"  class="lazy"
  srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
  alt="Responsive Picture Example"
>

The above code means:

• When the screen is less than or equal to 600px, the image takes up the entire viewport width (100vw)
• Between 601px and 900px, the image takes up half the width (50vw)
• After exceeding 900px, the image accounts for one-third of its width (33vw)

With this information, the browser can more accurately determine which size of the picture should be loaded.

Practical application suggestions

To better use srcset , you can follow the following points:

• Prepare pictures of different sizes according to equipment breakpoints
  For example, the common 480px, 768px, 1024px, 1440px, etc. correspond to mobile phones, tablets, desktops and other devices respectively.

• Pay attention to the DPR of the picture (device pixel ratio)
  If you want to support HD screens (such as Retina displays), you can provide higher resolution pictures and add x descriptors:

   srcset="image.jpg 1x, image-2x.jpg 2x"

• Don't ignore fallback's src attribute
  Although modern browsers support srcset , it is still recommended to keep src as a compatibility solution.

• Test performance under different devices
  You can use the browser's developer tools to switch the device width to see if the correct image size is loaded.

---

Let's summarize

Responsive images are not simply scaling a picture, but loading the most suitable size based on different devices. Using srcset and sizes in conjunction with it allows the website to maintain visual effects while improving loading performance.

Basically all this is it. The part that is not complicated but easily overlooks details is that not only do you need to prepare pictures of multiple sizes, but also set breakpoints in sizes reasonably in order to truly take advantage of the responsive pictures.

The above is the detailed content of Using HTML5 Source Set for Responsive Images (srcset). For more information, please follow other related articles on the PHP Chinese website!