© Joe Attardi 2020
J. AttardiUsing Gatsby and Netlify CMShttps://doi.org/10.1007/978-1-4842-6297-9_11

11. Working with Images

Joe Attardi1 
Billerica, MA, USA

In Chapter 9, we added a hero image to the index page. If you got the image from Unsplash, as recommended, you might notice that the image file is very large. This could result in slow loading times for some users of the site.

Gatsby has plugins that work with an image processing library called Sharp (https://sharp.pixelplumbing.com/) to resize and crop images in various ways at build time. This can be combined with the gatsby-image plugin to create a powerful image processing pipeline.

Using these plugins also provides two effects to show “placeholder” images as the full image is loading: ...

Get Using Gatsby and Netlify CMS: Build Blazing Fast JAMstack Apps Using Gatsby and Netlify CMS now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.