Using the Gatsby Image Component - Daily Dose of Gatsby Episode 5

Sep 08, 2019

In this episode, you will learn about the Gatsby Image component and how it can be used to better process and display images on your Gatsby site. Properly loading and displaying images can be a pain to make sure you get right on your website. Gatsby makes it easy by providing an image component and some additional plugins. After watching this video, you will have your images loading efficiently with a nice blur up effect.

You need to make sure you have the following plugins:

- gatsby-source-filesystem which allows you to query files with GraphQL
- gatsby-plugin-sharp which powers the connections between Sharp and Gatsby Plugins
- gatsby-transformer-sharp which allows you to create multiple images of the right sizes and resolutions with a query

You will learn how to create fluid and fixed width images that are:

- Resized correctly
- Generated into multiple smaller images so mobile and tablet devices don’t load the full sized image
- Compress the images
- Efficiently lazy load images
- Use the “blur-up” technique
- Hold the image position so your page doesn’t jump while images are loading

Daily Dose of Gatsby Episode 5 -
Gatsby Image Component -
Working with Gatsby Images - -
Code Karate YouTube Channel -
Twitter account -

Hi! I'm Karim Boudjema, the developer and site-builder of this site. I'm currently working as a freelance Drupal developer.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.