Should `gatsby-image` be added to the default starter?

[jlengstorf]

@gatsbyjs Is installing Gatsby-image plugin a must for having auto image opti? But I didn’t see this plugin is included by gatsby-starter-blog starter.
Huge thanks.

— Alex (@Alexs7_cpp) October 16, 2018

This brings up a good point that we send mixed signals: we want everyone to use gatsby-image because it automated image optimization, but we don't include it in the default starter.

It seems to me that this might be worth exploring. The questions we'd have to ask are:

1. Is adding a dummy image going to make people’s lives easier or harder? 2. Would it be better to add a warning for unoptimized images, e.g. look for local links that don't use the gatsby-image format? 3. If we do add this, how should we structure the additional pieces (i.e. the images folder, extra docs).

One suggestion would be to put the logo at the top left and use a StaticQuery to display it. This provides a single component that has the query and usage for gatsby-image, and a developer can eliminate all of the boilerplate by deleting the Logo component and src/images/logo.svg.

Does anyone have strong opinions about this? If not, I think this would be a great Hacktoberfest PR!

Update: we'd like to add this to the starter.

What we want to add

• [ ] Add a JPG or PNG image to the default starter at src/images/
  • This should be an image from Unsplash or another royalty-free site; we need to avoid copyright problems
  • Make sure the image isn’t over 1MB in size; let's not bloat the starter too much
• [ ] Install gatsby-image and its dependencies in the default starter, then configure the filesystem plugin to load images
  • see the install section of the README for exactly how to do this
• [ ] Add a component called Image at src/components/image.js
• [ ] Use a StaticQuery to load the image and display it using gatsby-image
• [ ] Add the Image component to src/pages/index.js

[LekoArts]

Is adding a dummy image going to make people’s lives easier or harder

Probably easier although there's a whole example page dedicated to gatsby-image / image-processing. You'd add a bunch of plugins, too.

Would it be better to add a warning for unoptimized images, e.g. look for local links that don't use the gatsby-image format?

gatsby-image shouldn't be used every time in my opinion. It shouldn't replace the img tag and I think this would imply exactly that.

One suggestion would be to put the logo at the top left and use a StaticQuery to display it. This provides a single component that has the query and usage for gatsby-image, and a developer can eliminate all of the boilerplate by deleting the Logo component and src/images/logo.svg.

Can you use gatsby-image with SVGs? I think people wrote that it doesn't work on Spectrum.

[jlengstorf]

gatsby-image shouldn't be used every time in my opinion. It shouldn't replace the img tag and I think this would imply exactly that.

What we've noticed is that a large number of sites don't use gatsby-image at all, and it would appear that this is largely due to not knowing about it. In fact, I just realized we don't even talk about gatsby-image in the tutorial. 😱 (cc: @shannonbux @amberleyromo)

Showing how to use gatsby-image as part of the default workflow in Gatsby is important. I agree that we don't want to imply that it's the right tool for every image, but it's the right tool for most images — it would be better to overuse it than underuse it, honestly.

Can you use gatsby-image with SVGs?

Nope, SVGs won't work. That's my fault. 😅

I'm updating this issue with better details.

[amberleyromo]

What we've noticed is that a large number of sites don't use gatsby-image at all, and it would appear that this is largely due to not knowing about it. In fact, I just realized we don't even talk about gatsby-image in the tutorial. 😱

Good call...

[lexishanson]

I'd be interested in taking this one

[jlengstorf]

@lexishanson it's all yours!

[LekoArts]

Showing how to use gatsby-image as part of the default workflow in Gatsby is important. I agree that we don't want to imply that it's the right tool for every image

Yeah, didn't want it to sound like it's not important - images are often the biggest problem for loading speeds

but it's the right tool for most images — it would be better to overuse it than underuse it, honestly.

If this sentence makes it analogous into the doc one should add to take that with a grain of salt :)

[tanvibhakta]

@lexishanson Have you made any progress? Happy to help you with it if required!

[lexishanson]

@tanvibhakta I implemented the changes but thank you for the offer!

[shannonbux]

@jlengstorf There is a tutorial for adding images to a WordPress site here: https://www.gatsbyjs.org/docs/image-tutorial/

We could do something similar for just pulling local images in from the filesystem. Imho, this would be most effective as a recommended Advanced Tutorial after the main tutorial, since the main tutorial is already pretty long!

[jlengstorf]

@shannonbux I agree that the main tutorial is a bit long, but personally I'd recommend dropping other parts (e.g. the surge.sh setup) to make gatsby-image fit. We're regularly seeing sites ship without using gatsby-image, and that points to an awareness issue. The tutorial should make it clear that gatsby-image exists and handles a whole class of performance problems automatically. That seems critically important from my perspective, so I'd really like to see it emphasized as part of the core learning journey for Gatsby. Does that seem reasonable/make sense?