3 Ways to display images in Gatsby JS: img, Image and Img. But what's the best way?

Three ways to display images in Gatsby. On the surface they appear similar but one reigns supreme. The answer lies within Google's PageSpeed Insights. For this example, I used Gatsby JS's starter library and installed React Bootstrap as the "Image" corresponds to bootstrap. Hope this helps you build/design better Gatsby websites!

Plus I'll give you a hot tip on how to utilize bootstrap with Gatsby Img.

If you want to jump around:
3:57 | img tag (traditional html tag)
9:27 | Image (React Bootstrap)
16:30 | Img (Gatsby Img)

Thanks,
Haydn

- - - - - -

⤵ Download ALL of my source codes & more!

Introducing ADWC PRO

ADWC Pro provides you with:

• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!

Price:
Just $6/mo. or $49/year (32% off monthly)

-------

Got a question for me?

[curiouslycory]

I really appreciate the breakdown of these different options. It really helped save me a lot of research! Also your narration is very clear and easy to understand which is very helpful.
Two notes if you care for a bit of feedback. 1) src: every time you said "serk" it made me cringe so hard. src = "source" or phonetically "serse". 2) const in JS = constant !== construct. A constant is a variable that doesn't (cannot) change during run time.

Thanks again for comparing all these options.

[michaelwiginton]

When using Gatsby <Img> can you iterate over several images to put on a page? For instance, a different image for a selection of hats you have for sale each having it's own description and price?