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
- See the
gatsby-imageproject README for documentation on using the plugin - Read the docs:
Using gatsby-image to prevent image bloat
Using fragments in gatsby-plugin-sharp - View the
gatsby-transformer-sharpexample atimage-processing.gatsbyjs.org
