What if we got aspect-ratio sized images by doing almost nothing?

Solve image loading stutter: use browser native features to achieve seamless image display

Have you ever encountered a situation where web page images load slowly, causing the page to stutter? This is usually because the browser does not know the aspect ratio of the image, so it cannot reserve enough space to display the image. This article will explore an elegant solution that takes advantage of browser native features to solve this problem without much extra code.

Suppose you are using an 800x600 pixel image in a web page and set its width to width: 100%; . The actual display width of the image will vary according to the container size, but its aspect ratio remains the same. The problem is that the browser cannot determine the height of the image before the image is loaded, which will cause the page to stutter.

Solution: Take advantage of width and height properties

Surprisingly, just <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174511723380054.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="What if we got aspect-ratio sized images by doing almost nothing?"> Going further: Browser native style support

A more ideal solution is to make the browser itself support this feature. One way is to take advantage of aspect-ratio attribute of CSS, but this requires developers to add it manually, which is not convenient enough. A better solution is to add the default aspect ratio settings to the browser user agent stylesheet, for example:

 img, video {
  aspect-ratio: attr(width) / attr(height);
}

In this way, as long as the image has width and height attributes, the browser can automatically calculate and reserve the correct space to avoid load lag.

The advantages of this approach are:

1. Easy to understand and implement: No need to learn new attributes or complex CSS tricks.
2. Wide applicability: Many websites already use width and height attributes without modifying existing code.
3. Developer friendly: New and old developers can easily understand and use it.

Currently, some browsers are testing the feasibility of this solution. This will greatly simplify web development and enhance user experience.

The above is the detailed content of What if we got aspect-ratio sized images by doing almost nothing?. For more information, please follow other related articles on the PHP Chinese website!