Progressive Web Apps Development

v0.5.15 2019-06-13T17:18:54
Be Very Aware!
This Web Site Is Under Construction

Work in Progress

Image Processing

Most of this Image Processing material is from the Working With Images In Gatsby

Gatsby provides multiple solutions for adding images and files into projects.

Working With Images In Gatsby

Optimizing images is a challenge on any website. To utilize best practices for performance across devices, multiple sizes and resolutions of each image are needed. Luckily, Gatsby has several useful plugins that work together to do that for images on page components.

The recommended approach is to use GraphQL queries to get images of the optimal size or resolution, then, display them with the gatsby-image component.

Querying images with GraphQL allows accessing the image’s data as well as perform transformations with Sharp, a high-performance image processing library.

Optimizing Images With Gatsby-Image

Gatsby-image is a plugin that automatically creates React components for optimized images that:

  • Loads the optimal size of image for each device size and screen resolution

  • Holds the image position while loading so the 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

Two types of responsive images

There are two types of responsive images supported by gatsby-image.

  • Images that have a fixed width and height need images of varying size for different screen resolutions

  • Images that stretch across a fluid container is done by creating multiple sizes of thumbnails for devices with widths stretching from smartphone to wide desktop monitors

To decide between the two, ask the question: “do I know the exact size this image will be?” If yes, it’s the first type. If no and its width and/or height need to vary depending on the size of the screen, then it’s the second type.

In Gatsby’s GraphQL implementation, query for the first type by querying a child object of an image called fixed. For the second type, do a similar query but for a child object called fluid

John Telford
John Telford
Portland, Oregon