To optimize the loading effect of WebP and AVIF images in H5 pages, it is necessary to combine encoding parameters, format compatibility, CDN support and responsive adaptation. 1. Set reasonable encoding parameters, such as the -q value of WebP is controlled between 60 and 80, and AVIF adjusts the compression rate and image quality through --speed and --quantizer; 2. Use the tag to load AVIF first according to the browser support situation, and fall back to WebP or JPEG; 3. Use CDN to dynamically convert the format and cache the results to reduce the burden of manual processing; 4. Control the image size and realize responsive loading with srcset and to avoid resource waste and image quality loss.

WebP and AVIF are becoming more and more common in H5 pages because they have high compression rates and do not lose too much image quality. But many people just convert the picture into these two formats and it’s done. In fact, format conversion alone is far from enough. If you want to truly optimize the loading speed and improve the user experience, you have to put some effort into the delivery process.

1. Select the appropriate encoding parameters

Although WebP and AVIF both support lossy and lossless compression, the file size and image quality vary greatly under different parameters.
For example, the quality of WebP's -q parameter control is 75 by default. If it is set too low, it will be obviously blurred. If it is too high, it will lose the meaning of compression. It is generally recommended to control it between 60 and 80, depending on the content of the view. If it is a picture dominated by text or icons, it can be adjusted up appropriately; if it is a photo, it can also maintain the visual effect if it is a picture type.

AVIF is a little more complicated in parameter setting, but mainstream tools like avifenc provide several preset options, such as --speed and --quantizer . The slower the speed, the higher the compression rate; the higher the quantizer value, the lower the mass.
When using it, you can first use the default parameters to see if the volume and image quality meet the standards. If the standards are not met, then fine-tune them.

Common parameter reference:

• WebP: cwebp -q 75 input.jpg -o output.webp
• AVIF: avifenc --speed 6 --quantizer 35 input.png output.avif

2. Load pictures of different formats as needed

Although mainstream browsers now support WebP, AVIF support is not comprehensive enough. Using AVIF directly may cause some users to see the image loading failure.

The solution is to use the <picture></picture> tag and <source></source> to implement multi-format fallback. For example:

 <picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Optimizing H5 WebP and AVIF Image Delivery">
</picture>

In this way, the browser will give priority to loading AVIF. If it is not supported, it will be back to WebP, and finally JPEG. Although I wrote a few more lines of code, it can take into account both compatibility and loading performance.

3. Automatic conversion and cache using CDN

If you have a lot of image resources, manually converting formats and optimizing parameters can be troublesome. At this time, you can use the image processing capabilities of CDN, such as Cloudflare's Image Resizing, Alibaba Cloud's image processing services, etc.

These services can dynamically convert formats, adjust sizes, and even automatically optimize parameters when image requests. For example, if you pass a original image, you can return the version in WebP or AVIF format through the URL parameters, and you do not need to generate a bunch of pictures in different formats in advance.

Moreover, the CDN will cache the converted pictures and hit the cache directly on the next visit, which will hardly increase the burden on the server.

For example (taking Cloudflare as an example):

Original image address: https://example.com/images/photo.jpg
Convert to WebP: https://example.com/cdn-cgi/image/format=webp/images/photo.jpg
Convert to AVIF: https://example.com/cdn-cgi/image/format=avif/images/photo.jpg

4. Pay attention to image size and responsive adaptation

No matter what format you use, the size of the picture itself must be controlled well. Many web pages load slowly not because of the poor format, but because the picture is too large and is always thousands of pixels wide, but only a few hundred pixels are used when displaying it.

suggestion:

• Prepare multiple sets of pictures in advance according to common resolutions
• Use srcset attribute to tell the browser which image to load under different screen widths
• To match the <picture></picture> tags for double adaptation of format and size

This not only reduces the loading volume, but also avoids the loss of image quality caused by browser zoom.

Basically that's it. Optimization of WebP and AVIF is not something that can be achieved overnight. It must be considered in combination with format, parameters, and loading methods. If done well, the loading speed will be faster, and the user will take a few more glances; if not done well, the image may not even be loaded.

The above is the detailed content of Optimizing H5 WebP and AVIF Image Delivery. For more information, please follow other related articles on the PHP Chinese website!