The key to responsive pictures is to load the appropriate size as needed, which is mainly achieved in three ways: First, use the tag to match CSS to set the max-width and height attributes to achieve basic responsiveness; second, use the srcset and sizes attributes to select pictures of different sizes according to the device; third, use the <picture> elements to achieve more refined control, including format and content switching. These three methods are suitable for scenes of different complexity, ensuring that images can be displayed efficiently on various devices.

Images are almost everywhere in web pages, but how to make them properly displayed on different devices is a key issue in front-end development. It is actually not difficult to make good use of HTML's responsive image functions. The key is to understand several core concepts and usage of tags.

Basic responsive settings for <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175328661887488.jpeg" class="lazy" alt="Implementing Responsive Images with HTML" > tags

The most basic approach is to use the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175328661887488.jpeg" class="lazy" alt="Implementing Responsive Images with HTML" > tag and CSS to achieve a certain degree of responsiveness. While this is not the most flexible way, it is enough in some simple scenarios.

• Setting max-width: 100% and height: auto to <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175328661887488.jpeg" class="lazy" alt="Implementing Responsive Images with HTML" > can make it automatically scale to adapt to container size.
• The problem with this is: no matter how big the device screen is, it is loaded with the same image, which may cause unnecessary bandwidth waste.

For example, if you open a large image on your phone that should be used for the desktop, the loading time will be longer and the experience will be discounted.

Therefore, this approach is suitable for pages that require low performance, or just to quickly build prototypes.

Use srcset and sizes properties

This is the real responsive image solution. HTML provides srcset and sizes properties, which tells the browser to select the appropriate image version according to different devices.

• srcset is used to list multiple image paths and corresponding widths (such as image-320w.jpg 320w ).
• sizes defines how much space the picture should take for different viewport widths (such as (max-width: 600px) 100vw, 50vw ).

In this way, the browser can automatically select the most suitable picture to load according to the current device's screen size and pixel density, which not only ensures clarity but also saves traffic.

To give a practical example:

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

The above code means to tell the browser to select different sizes of pictures to load under different screen widths. This is the most recommended standard practice at present.

Use the <picture> element for more granular control

Sometimes we not only want to change the image size, but also change the format or content, such as providing smaller sizes of pictures to browsers that support WebP, or displaying cropped close-ups on a small screen.

At this time, the <picture> element needs to be used.

It allows you to define multiple <source> , each of which can specify different media queries, image formats, or resolutions, and finally a default <img src="/static/imghw/default1.png" data-src="image-default.jpg" class="lazy" alt="Implementing Responsive Images with HTML" > .

For example:

 <picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image-800w.jpg 800w, image-480w.jpg 480w" media="(min-width: 600px)">
  <img src="/static/imghw/default1.png"  data-src="image-default.jpg"  class="lazy" alt="alternative picture">
</picture>

In this example:

• If the browser supports WebP, priority is given to loading .webp images;
• If the screen width is greater than 600px, load large size JPEG;
• Otherwise, the default image is loaded.

This method is especially suitable for scenarios where highly customized image display is required.

Basically that's it. The core of responsive images is "loading the right size as needed" and HTML provides tools that are powerful enough to achieve this. The key is to understand the uses of srcset , sizes and <picture> and use them flexibly in different projects.

The above is the detailed content of Implementing Responsive Images with HTML. For more information, please follow other related articles on the PHP Chinese website!