Serve images in next-gen formats

There are several image file formats that are commonly used for displaying images on a webpage, including:

1. JPEG (Joint Photographic Experts Group): This is one of the most widely used image formats for photographs and other continuous-tone images. JPEG uses lossy compression, which means that some image data is lost when the file is saved, but the resulting files are generally smaller in size.
2. PNG (Portable Network Graphics): This is a lossless image format that is often used for images with sharp lines and solid colors, such as graphics and logos. PNG files are generally larger in size than JPEGs, but they preserve the original quality of the image.
3. GIF (Graphics Interchange Format): This is an older image format that supports animation. It uses lossless compression, but the color depth is limited to 256 colors.
4. SVG (Scalable Vector Graphics): This is a vector image format that can be resized without losing quality, because it is based on mathematical equations to draw the image. It can be animated and can be used for logos, icons and illustrations.
5. WebP: This image format was created by Google and it is a modern image format that provides lossless and lossy compression for images. It offers 25-34% smaller file sizes compared to JPEG and PNG images with the same quality.

The best format to use depends on the type of image and the desired balance between file size and quality. JPEG is a good choice for photographs and other images with many colors and gradients, while PNG is a good choice for graphics and logos. GIF is best for animations, and SVG is best for vector graphics.

WebP can be considered as a replacement of JPEG and PNG in most cases.

Why serve images in AVIF or WebP format?

AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

AVIF is supported in Chrome, Firefox, and Opera and offers smaller file sizes compared to other formats with the same quality settings. See Serving AVIF Images Codelab for more on AVIF.

WebP is supported in the latest versions of Chrome, Firefox, Safari, Edge, and Opera and provides better lossy and lossless compression for images on the web. See A New Image Format For The Web for more on WebP.

How Sitefig calculates potential savings

Sitefig collects each BMP, JPEG, and PNG image on the page, converts each to WebP, and estimates the AVIF file size, reporting the potential savings based on the conversion figures.

Sitefig omits the image from its report if the potential savings are less than 8KiB.

Browser compatibility

WebP is supported by the latest versions of Chrome, Firefox, Safari, Edge, and Opera, while AVIF support is more limited. You'll need to serve a fallback PNG or JPEG image for older browser support. See How can I detect browser support for WebP? for an overview of fallback techniques and the list below for browser support of image formats.