Progressive Web Apps Development
Be Very Aware!
This Web Site Is Under Construction
Work in Progress
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.
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.
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
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