Image Optimization Made Easy with Gatsby

“…optimizing images can often yield some of the largest byte savings and performance improvements”

Google PageSpeed docs

Example

a normal header image loading without any optimization
a gatsby-image component that “blurs up” to an optimized size

Use Case

the mediocre results of the performance audit on my site

Implementation

yarn add gatsby-image
yarn add gatsby-transformer-sharp
yarn add gatsby-plugin-sharp
plugins: [
// additional plugins
...
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data/`
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`

]
plugins: [
// additional plugins
...
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data/`
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `img`,
path: `${__dirname}/src/img/`
}
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`
]
  • <TemplateWrapper /> needed a query to get the necessary data for my optimized image
  • <TemplateWrapper /> would pass the data down to my <Header /> as a prop
  • <Header /> would plug that data into gatsby-image’s <Img /> component where the magic happens
// imports
...
class TemplateWrapper extends React.Component {
render() {
return (
<div>
<Helmet title="Contemporarium" />
<Header headerImage={this.props.data.headerImage} />
{this.props.children()}
<Footer />
</div>
);
}
}
export default TemplateWrapper;export const pageQuery = graphql`
query HeaderImageQuery {
headerImage: imageSharp(id: { regex: "/header/" }) {
sizes(maxWidth: 1240 ) {
...GatsbyImageSharpSizes
}
}
}
`
import React from "react";const Header = props => (
<header className="header">
<img
title="Header image"
alt="Greek food laid out on table"
src="../img/header.jpg"
/>
</header>
);
export default Header;
import React from "react";
import Img from "gatsby-image";
const Header = props => (
<header className="header">
<Img
title="Header image"
alt="Greek food laid out on table"
sizes={props.headerImage.sizes}
/>
</header>
);
export default Header;
success!
export const pageQuery = graphql`
query HeaderImageQuery {
headerImage: imageSharp(id: { regex: "/header/" }) {
sizes(maxWidth: 1240 ) {
...GatsbyImageSharpSizes_tracedSVG
}
}
}
`
traced SVG loading with gatsby-image

Results

Thanks for reading!…

--

--

--

Developer | Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting started with Vue, Webpack & Bootstrap

Unit testing for Vue.js and TypeScript revisited

Top React JS Interview Questions

Array’s find & findIndex Why, How & Polyfill

Basic React App - Pt.I

Building A Review App Using ReactJS, Elasticsearch, App Search and Grommet

Getting Started with building reusable packages for NestJS. (Step-By-Step)

Coding Interview Question: Find Width of a Tree

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kyle Gill

Kyle Gill

Developer | Designer

More from Medium

Utilizing Associated Classes in a JS Application

Using Routing in React to Filter Data

Inverse Data Flow — React.js

Reasons to Choose React as a UI Library for your application