Make use of modern image formats

WebP is a next-generation image format developed by Google and can be used in place of earlier formats such as JPEGs, PNGs and GIFs. The WebP format offers 25-35% compression over older formats and is supported by all major browsers. The WebP format includes support for;

Animation
Transparency
Lossless and Lossy formats
Transparency

Conversion from other formats into WebP will almost always result in a reduction in size without having to compromise on quality, and there are a number of tools out there which can handle the conversion for you, such as ImageMagick and the official Command Line Tool.

AVIF

A successor to the webP format already exists in the form of AVIF which promises even better compression, however AVIF browser support is not yet mature enough to use it without a fallback image (see Compatibility below).

Compatibility

Whilst WebP is supported by most modern browsers, you may still want to include a fallback format in case you want to cater for older browsers. You can use the HTML picture element for this purpose;

<picture>
  <source srcset="/my-image.webp" type="image/webp" />
  <img src="my-image.jpeg" alt="A picture of a cat" />
</picture>

This will detect whether or not browser support exists for WebP and, if it does, the browser will use the WebP image in place of the JPEG (the JPEG will note be downloaded at all). The picture element also has near universal browser support.

Relevant Links