gatsby-image is the official Image component for use in building Gatsby websites. It provides the fastest, most optimized image loading performance possible for Gatsby (and other React) websites.
The component requires no configuration when used within Gatsby. All image processing is done within Gatsby and official plugins.
See the component’s documentation as well as view this site’s source to learn how to start using gatsby-image on your Gatsby sites.
Out of the box it:
- Loads the optimal size of image for each device size and screen resolution
- Holds the image position while loading so your page doesn’t jump around as images load
- Uses the “blur-up” effect i.e. it loads a tiny version of the image to show while the full image is loading
- Alternatively provides a “traced placeholder” SVG of the image.
- Lazy loads images which reduces bandwidth and speeds the initial load time
- Uses WebP images if browser supports the format
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
