Native lazy loading is a built-in function of the browser, which enables lazy loading of pictures by adding the loading="lazy" attribute to the tag. 1. It does not require JavaScript or third-party libraries, and is used directly in HTML; 2. It is suitable for pictures that are not displayed on the first screen below the page, picture gallery scrolling add-ins and large picture resources; 3. It is not suitable for first screen pictures or display: none pictures; 4. When using it, you should set a suitable placeholder to avoid layout jitter; 5. It should optimize responsive image loading in combination with srcset and sizes attributes; 6. Compatibility issues need to be considered. Some old browsers do not support it, and can be used to detect and combine JavaScript solutions as a backup.

Now most web pages use images, and the image loading speed directly affects the user experience. Native Lazy Loading is a browser built-in feature that can delay loading images in pages until they are about to enter the viewport, thereby improving page performance.

What is native lazy loading?

Native lazy loading is a feature provided by HTML. By adding loading="lazy" attribute to <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175225251530134.jpeg" class="lazy" alt="Implementing Native Lazy Loading for Images in HTML" > tag, the browser automatically handles the lazy loading of images. It does not require JavaScript, nor does it rely on third-party libraries, and can be implemented directly in HTML.

for example:

 <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy" alt="example picture" loading="lazy">

This approach works for most modern browsers, including Chrome, Edge, Firefox, and Safari (partially supported). However, it should be noted that some older versions of browsers may not support them, and you need to consider a fallback solution at this time.

In what situations are suitable for using native lazy loading?

Not all images are suitable for enabling lazy loading. The following situations are particularly suitable:

• Images not displayed on the first screen at the bottom of the page: such as illustrations in the middle or bottom of the article.
• Scroll add-in in the picture gallery: content that users will see only when they scroll down.
• Large image resources: Images with larger size and longer loading time are more worth delayed loading.

Unsuitable scenarios include:

• Home screen picture: It will affect the first loading experience.
• <img src="/static/imghw/default1.png" data-src="small.jpg" class="lazy" alt="Implementing Native Lazy Loading for Images in HTML" > is set to display: none or images not in the document stream: lazy loading behavior may be unpredictable.

How to use native lazy loading correctly?

It's actually very simple to use, just add loading="lazy" to the <img src="/static/imghw/default1.png" data-src="small.jpg" class="lazy" alt="Implementing Native Lazy Loading for Images in HTML" > tag. But to ensure the best results, some details need to be paid attention to:

Set up the right placeholder

If the image is not set to a fixed height or width, it may cause Layout Thrashing. It is recommended to set a minimum height for the picture container, or use CSS to specify the aspect ratio.

For example:

 img[loading="lazy"] {
  width: 100%;
  height: auto;
  min-height: 200px;
}

Combining srcset and sizes properties

If your images support responsive design, remember to use them with srcset and sizes , so that the browser will select the most suitable image source according to the device size while maintaining lazy loading characteristics.

Example:

 <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy" 
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
  sizes="(max-width: 600px) 480px, 800px" 
  alt="responsive picture" 
  loading="lazy"
>

Consider compatibility issues

Although mainstream browsers are already supported, loading="lazy" will be ignored in some old systems or lower version browsers. For better compatibility, you can combine JavaScript lazy loading libraries as a fallback solution, or enable them only in supported environments.

You can determine whether it supports it through feature detection:

 if ('loading' in HTMLImageElement.prototype) {
  // Support native lazy loading} else {
  // Use JS scheme instead}

summary

Native lazy loading is an easy and effective way to optimize image loading performance. As long as you use it in the right place and pay attention to compatibility and layout stability, you can significantly improve page loading speed. Basically all is it, not complicated but it is easy to ignore details.

The above is the detailed content of Implementing Native Lazy Loading for Images in HTML. For more information, please follow other related articles on the PHP Chinese website!