Switch branches/tags
AnushPatel-patch-1 JanoshRiebesell-patch-1 KyleAMathews-patch-1 Partner-program add-depn add-escalade-sports-case-study add-mobile-performance-post add-plugin-documentation alter-blog-post-date amberleyromo-7730-starter-showcase-sourcing amberleyromo-patch-1 array-doclets berrak-responsive-layout calcsam-patch-1 ccustom-algolia-index change-hacktoberfest-title config-api coreyward-patch-1-1 cypress-timeouts docs-rename-starter docs/gatsby-remark-images-sharp documentation-project-blogpost-new-title drop-alpha-support filter-css fix-anchors fix-broken-link fix-doc fix/starter-detail-dependency-grid fix/typescript-reach-router fixes-to-plugin-library gatsby-ssr-silent-fail graphql-filter-sort gvarandas-patch-1 hu0p-patch-1 imagentleman-patch-1 jimt-tutorial-part-two link-container m-allanson-patch-1 marisamorby-swag-store-post master neo/move-prefixPath old-master-3 old-master-4 old-master-6 old-master-7 page-metadata-splitting plugin-blogpost-edit plugin-cli pr/8963 revert-4254-blog-documentation-project revert-5047-update-remark revert-workspaces rfbotto-patch-1 sample-branch-example sebastienfi-wp-orderby-date-asc sharp-images-no-ext sort-chunks starterShowcase2 style-guide-update styled-components-babelrc-config-doc test-builds topics/gatsby-plugin-sharp-tracesvg-fluid topics/inconsistent-accordian-behavior-docs-sidebar topics/using-gatsby-image-design-refresh topics/www-bump-remark-autolink-headers topics/www-sidebar-move-expand-all-down tryzniak-patch-1 v1 v2 valse-disable-default-pageview valse-resolve-env worker
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
69 lines (45 sloc) 3.83 KB

Using gatsby-image to prevent image bloat

gatsby-image is a React component designed to work seamlessly with Gatsby’s GraphQL queries (gatsby-image plugin READme). It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations.

Warning: gatsby-image is not a drop-in replacement for <img />. It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use <img /> won’t work with gatsby-image.


gatsby-image includes the tricks you’d expect from a modern image component. It:

  • uses the new IntersectionObserver API to cheaply lazy load images
  • holds an image’s position so your page doesn’t jump around as images load
  • makes it easy to add a placeholder—either a gray background or a blurry version of the image.


Large, unoptimized images dramatically slow down your site.

But creating optimized images for websites has long been a thorny problem. Ideally you would:

  • Resize large images to the size needed by your design
  • Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images
  • Strip all unnecessary metadata and optimize JPEG and PNG compression
  • Efficiently lazy load images to speed initial page load and save bandwidth
  • Use the “blur-up” technique or a ”traced placeholder” SVG to show a preview of the image while it loads
  • Hold the image position so your page doesn’t jump while images load

Doing this consistently across a site feels like sisyphean labor. You manually optimize your images and then… several images are swapped in at the last minute or a design-tweak shaves 100px of width off your images.

Most solutions involve a lot of manual labor and bookkeeping to ensure every image is optimized.

This isn’t ideal. Optimized images should be easy and the default.


With Gatsby, we can make images way way better.

gatsby-image is designed to work seamlessly with Gatsby’s native image processing capabilities powered by GraphQL and Sharp. To produce perfect images, you only need to:

  1. Import gatsby-image and use it in place of the built-in img
  2. Write a GraphQL query using one of the included GraphQL “fragments” which specify the fields needed by gatsby-image.

The GraphQL query creates multiple thumbnails with optimized JPEG and PNG compression. The gatsby-image component automatically sets up the “blur-up” effect as well as lazy loading of images further down the screen.

Here’s what a really simple Gatsby page component using gatsby-image would look like:

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
    <h1>Hello gatsby-image</h1>
    <Img resolutions={data.file.childImageSharp.resolutions} />

So this is all very nice and it’s far better to be able to use this from NPM vs. implementing it yourself or cobbling together several standalone libraries.