When you convert images to WebP, you have the option to set a wide variety of compression settings-but for most people the only thing you'll ever need to care about is the quality setting.
Webpack or Gulp), whereas the CLI is a good choice for simple projects or if you'll only need to convert images once. The Imagemin WebP plugin is generally the best choice if your project uses build scripts or build tools (e.g. People generally use one of the following approaches for converting their images to WebP: the cwebp command-line tool or the Imagemin WebP plugin (npm package). Lossy compression reduces file size, but at the expense of possibly reducing image quality. In addition, WebP offers both lossless and lossy compression. WebP is an excellent replacement for JPEG, PNG, and GIF images. Facebook experienced a 25-35% filesize savings for JPEGs and an 80% filesize savings for PNGs when they switched to using WebP.YouTube found that switching to WebP thumbnails resulted in 10% faster page loads.This decreases page sizes and improves performance. WebP images are smaller than their JPEG and PNG counterparts-usually on the magnitude of a 25–35% reduction in filesize. Verify WebP usage Why should you care? #.Lighthouse will list any images that are not being served in WebP. Run the Lighthouse Performance Audit ( Lighthouse > Options > Performance) and look for the results of the Serve images in next-gen formats audit. Lighthouse can be used to verify that all images on your site are being served using WebP. This will allow you to use image markup similar to the following with automatic WebP support: Verify WebP usage # If a WebP alternate is found, it will be served with the proper Content-Type header. The rewrite rule above will look for a WebP version of any requested JPEG or PNG image. If you go this route, you'll need to set the HTTP Vary response header to ensure caches will understand that the image may be served with varying content types: Use cwebp #Ĭonvert a single file, using cwebp's default compression settings: cwebp images/flower.jpg -o images/flower.webpĬonvert a single file, using a quality level of 50: cwebp -q 50 images/flower.jpg -o images/flower.webpĬonvert all files in a directory: for file in images/* do cwebp " $file" -o " $/ $1.webp -f It's worth playing around with this, find which level is the right tradeoff between image quality and filesize for your needs. You can specify a quality level from 0 (worst) to 100 (best).
0 kommentar(er)
