Introduction to Gatsby Introduction to Gatsby

Adding Optimized Images to Posts

Check out a free preview of the full Introduction to Gatsby course:
The "Adding Optimized Images to Posts" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason installs the gatsby-remark-images plugin to handle image optimization in MDX posts.

Get Unlimited Access Now

Transcript from the "Adding Optimized Images to Posts" Lesson

[00:00:00]
>> Jason Lengstorf: Next, if we wanna show a blog or an image in line in our blog, we need to
>> Jason Lengstorf: We need to install one more plugin. Well, actually, let's just try this. So what you might do, if you think you were gonna use an image, is because we've got a relative path to an image here, I might think that I could just write a markdown image.

[00:00:30]
>> Jason Lengstorf: And then, that would be at images slash john tyson hola dot jpeg. And when I save this and go in. Crap, it's broken.
>> Jason Lengstorf: Reason for that is that Gatsby's building this, it's building all these files. Which means that the files aren't exactly where we would expect them to be.

[00:00:54] So an easy way to solve this problem is to just install Gatsby remark images. And we actually have to install it. So NPN install. Gatsby remark images. And remark is, if you're not using MDX and you just wanna use markdown, you would use Gatsby's remark plugin. Remark is a markdown parser that can convert markdown files into HTML.

[00:01:24] MDX is compatible with all the remark plugins, which means that we get all the benefits of using remark with the added benefits of react. So now that I've installed this, I'm gonna go into the Gatsby config. And in my Gatsby MDX, I'm going to set
>> Jason Lengstorf: GatsbyRemarkPlugins, and that is an array.

[00:01:52] And then, I'm just gonna resolve gatsby-remark-images.
>> Jason Lengstorf: And upon doing that, I can restart my server.
>> Jason Lengstorf: Okay, and it works. And if we look, we'll also see it's working with Gatsby image. So it's doing that same optimization, that same conversion to high-performance images so that we're not loading, even though what we actually put into the blog folder is a 3.5 megabyte image, what's being downloaded to the browser is 34.9 kilobytes.

[00:02:41] So again, kind of saves us from ourselves. No matter how lazy we get, and just embed whatever image, we don't do any optimization, we're not just yeah, cool, grab something off and splash and throw it in here. We do that, and Gatsby is like okay, cool, I got you, don't worry about it.

[00:02:59] Do your thing. Your co-workers aren't gonna like it when they have to download 150 megabytes images off Git. But otherwise, you're gonna be in great shape here.
>> Jason Lengstorf: So that is really, I mean, there's more to this, you can go a lot deeper on images. Like I said, you can convert these to trace SVGs, we've got some external plug-ins that will allow do things like create simplified polygon drawings of the images.

[00:03:27] Which is really, looks like art direction. I'll just show you using Gatsby image. I think this is it. Hope that works. Yeah, here we go. So this is like the the standard blur up. You can also set like a plain background color. So it it loads in like that.

[00:03:47] We've got this traced SVG look where the images become like simplified traced versions of themselves. Which is really cool. And each of these is just an option. You just you choose that option, you pick the colors you want. This is a foreground and background color. And then you get those benefits.

[00:04:03] WebP is kind of the same thing. And then, the other one that we've got is, let's see, Gatsby nodes.
>> Jason Lengstorf: And this one does some really cool stuff where it will show you
>> Jason Lengstorf: Where's the actual demo? Is it here?
>> Jason Lengstorf: So it does these like kind of stylized drawings.

[00:04:29]
>> Jason Lengstorf: Yeah, that doesn't look as cool as I want it to. I wish there was a better demo in this. Anyways, it's really cool to see because it just looks at your images and tries to draw versions of it. Anyways, I thought I had a better example of that.

[00:04:48] But that is how images work in MDX and in Gatsby.