Gatsby Tutorial #16 - Optimized Images

[@geraldmbuthia8780]

For those who may struggle with creating a fluid image using gatsby-plugin-image , here is the code to ease your life.
It fails to load at times, just give it time and resize your browser
import { GatsbyImage, getImage } from "gatsby-plugin-image";
export const query = graphql`
query Banner {
file(relativePath: {eq: "banner.png"}) {
childImageSharp {
gatsbyImageData(
layout: FULL_WIDTH
placeholder: BLURRED
formats: [AUTO, WEBP]
)
}
}
}
`
export default function Home({ data }) {
console.log(data)
const image = getImage(data.file.childImageSharp.gatsbyImageData)
return (



Design
Develop & Deploy
UX designer & web developer based in Manchester.
My Portfolio Projects




);
}

[@eluented]

thank you so much!

[@elliothuntington8980]

I'm still getting an error when using the graphql query in the GraphiQL explorer stating: "TypeError: Cannot destructure property 'width' of '(intermediate value)' as it is null."

[@vrutiksurti3066]

I was badly stuck thanks brother @
Gerald Mbuthia

For who that doesn't want to spend half-hour to figure out the "new way" to do this because "Fixed" and "Fluid" are now DEPRECATED!
- Install the plugins:
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
- Add them in your gatsby-config.js file:
module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`, // Needed for dynamic images
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
// ...
],
}
- Create the Query (You can choose the layout value either FULL_WIDTH, CONSTRAINED or FIXED)
export const query = graphql`
query MyQuery {
file(relativePath: { eq: "banner.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED)
}
}
}
`
- In your Component:
import { GatsbyImage } from "gatsby-plugin-image"
- And use the GastsbyImage as following:
- Don't forget to pass the correct props to your component:
const Home = ({ data }) => {
// ...
}
I hope it helps someone to save time. :)
[Source - Gatsby Docs](www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/)

[@chadmiller9379]

Thank you!

[@jdubhman]

Thanks! 👍

[@aaryansj8016]

Tysm ❤️😘

[@Zephyr-tg9hu]

Thanks, you're the best!

[@Magda-L114]

not all superheroes wear capes

[@woofcode3383]

Its great that it is deprecated so then we practice to read the docs and figure it out ourselves, like in the real world. At least seeing how he does it first really helps too. Thank You Shaun.

[@woofcode3383]

Hi Guys, SO I've learned to use the new plugins and it worked. But then I ran into problems with GraphiQL on lesson 17. so I tried to just use the deprecated plugin that Shaun is using, and.. So if you want to follow along till the end, just use the same plugin's as Shaun's. it still worked for me.

[@vladimirputindreadlockrast812]

By this time the Gatsby 5'er will have experienced the program breaking upon each new plugin installation. The only thing I've been able to do to make it work is start over each time, new installation of web-warrior, and then at the very hello world beginning, install all the plugins right then and there, and then jump to copying Lesson #16 into the web-warrior folder. If there's a new plugin installation in Lesson #17, I will probably have to do it all over again.

[@DiogoGDF]

This is so annoying! I'm having to do the same, one of the companies I'm working for is using Gatsby and I'm obligated to use it. I honestly wouldn't use it if I didn't have to.

[@ajefersonstiv]

USING GatsbyImage && getImage
Firts:
import { GatsbyImage, getImage } from "gatsby-plugin-image"
THEN:
export const query = graphql`
query img_qry {
file(relativePath: {eq: "banner.png"}) {
id
childImageSharp {
gatsbyImageData(/*here u can add some other properties or just REMOVE () and leave the keywork gatsbyImageData*/)
}
}
}
`
NEXT based on your props parameter:
const imgsrc = getImage(data.file);
FINALLY
** FOR MORE U CAN CHECK THE FULL DOCUMENTATION OF gatsby-plugin-image**

[@livb4139]

thanks

[@ajefersonstiv]

@@alkdsjfadsf sure! Can u give me a way to share it?

[@henryherrera5043]

Hello! I really like your videos. Could you update the video to the new gatsby-plugin-image, please? It would be great! Thanks! Cheers!

[@sergio_san]

Hello Shaun, great video!
That is perfect for managing images the right way.
Just a quick question here... what if we have SVG images?
I guess we cannot use those plugins because SVGs are "not images", so... are we just fine using SVG images inside the "images" folder, without any plugin, since they are vectorial images?
Is it already optimized, in terms of responsiveness, load times... 'fluidness' by using SVG images for logos and icons?
Thanks in advance.

[@simonolivo3318]

if you have problems with the "gatsby-plugin-sharp" library, remove the node_modules folder from the root project and type: npm install

[@xforeal-dj2jt]

The better way insert images is like documentation
import { StaticImage } from "gatsby-plugin-image"
export function Dino() {
return
}

[@jdubhman]

Dang, the new v3 Image has thrown a spanner in the works for me :(

[@ai.aspirations]

thanks for the tutorial. An update is required!

[@davidnindorera5362]

Dope tuto !!

[@hareeshagummani2389]

Expecting advanced nextjs tutorial

[@RoyerAdames]

Can you update the video with the new gatsby-plugin-image?

[@zeytouna9611]

how do you make an image wobble or shake a bit when you're scrolling up and down ? I've seen a lot of Websites where the images within shake a bit, like it's shifting up down , does anyone know?

[@hareeshagummani2389]

Hey Img and type fluid is no longer supported In Gatsby v3

[@charlesmontojo3960]

Still do

[@73dines]

Such a mess to get one image! :)

[@ridl27]

ty

[@muthukumar8009]

are there any other plugins for images instead of transformer-sharp and plugin-sharp

[@RP-lf2jm]

'gatsby-image' is deprecated and the replacement is 'gatsby-plugin-image'

[@unknownman1]

Great

[@Luke1000]

thumb does not have the option for a drop down menu.

[@Luke1000]

also receiving this error: Field "thumb" must not have a selection since type "String" has no subfields.

[@michalnowak2181]

thx

[@ripplesr5655]

I would never use gatsby on production at this point. Gatsby is full of bugs and impossible to develop site with this. Even though I love the whole concept of gatsby, unfortunately it has other potential security issues as well as constant bugs.

[@dl_hines]

I can't get it to compile no matter how far back I go in versioning. I have an older processor on my dev machine but none of them build correctly. It's a pain.

[@ripplesr5655]

@@dl_hines Horrible. Sadly had to move on to another time tested solution.

[@sumukhakb2701]

Make a single video instead of video series, so that you can get more views. It's really sad to see you're getting fewer views, which really hurts me. Because I learned a lot from your videos, and you deserve a lot. Also Expecting advanced next.js tutorial with authentication

[@NetNinja]

I’ll be doing more next vids soon :). I enjoy doing series with multiple videos & over time it works out more views combined than just 1 vid so it’s ok :).

[@sumukhakb2701]

@@NetNinja Hope you get more views, you are the best.

[@jandurcak8500]

I dont think its about the video as the viewers, some people just find this too complex so they will skip. This content is absolutely amazing, commig back if i need to clear up something.

[@AntNZ]

@@NetNinja you are the man!