Using Gatsby Image

Prefer WebP

WebP is a modern image format that provides both lossless and lossy compression for images on the web. This format can reduce the filesize considerably compared to JPG and PNG files, and using it is pretty easy with gatsby-image and gatsby-plugin-sharp.

The WebP technique is similar to other gatsby-image techniques in that it can be applied in image queries with GraphQL. To specify that an image should be loaded in the WebP format in supporting browsers, use a fragment with withWebp at the end.

Documentation & related links