Optimizing Images in MDX

[00:00:00]
>> If we want to use the static images, like what if we want to do this in MDX? Well, fortunately, MDX is kind of central that Gatsby just kind of built this into the flow, they'll automatically do this for us. We don't have to do anything at all.

[00:00:20]
So we could use a static image, right? And that would be fine. That's a completely acceptable thing to do. And if we wanted to do that, we would be able to let's say open up our first blog, and we can import. Boy, it can't spell import static image from Gatsby plugin image and then down here I can just use it.

[00:00:53]
Right, there it is, we've now made a blog. But I don't even wanna have to do that, I wanna make it so much easier. So instead, I wanna be able to import my images, like markdown. So I wanna be able to say my image and images. It's like images smashburger.

[00:01:24]
I got my path wrong. And I got my path wrong because we haven't configured this yet. So this is where it starts like, markdown I would expect to just work but it's not actually relative because of the way that like these end up moving and these end up becoming static and so there's a little bit of like rigmarole there.

[00:01:47]
So to work around that, what we are going to do is we are going to install a plugin called Gatsby-remark-images. So, remark is a library for transforming markdown, without getting to deep into it, it can break remark into a, what's called an abstract syntax tree, which is just like a JSON representation of what a mark down file is.

[00:02:17]
And then because it's a predictable representation of that that tree, we can change stuff in it without breaking the markdown files. So what the remark images plugin lets us do is find images in markdown, turn them into transformed Gatsby images and replace them in place. So on the backend, it does a bunch, on our end we install this plugin and we're done.

[00:02:41]
So let's get into the Gatsby config and we're going to install this in two places. First we are going to install it, let's put it, where's MDX? We're gonna to put it right above MDX, Gatsby-remark-images and then inside. We're also going to configure Gatsby remark plugins because we want MDX to run this internally as well.

[00:03:12]
So we're going to- let's see Gatsby-remark-plugins is an array and we're going to resolve Gatsby-remark-images and I want to set as a just kind of basic guardrail, a maximum width of 1200 pixels if something comes in through markdown that is an enormous image. Like somebody does just copy a unsplash image and it's 4500 pixels wide.

[00:03:48]
We don't want to load that, let's just knock it down to be 1200 pixels max so that the site doesn't blow up on us. So now we've got Gatsby-remark-images. We've got an installed there. So let's restart the browser. And I'm going to put in a different image into my first blog.

[00:04:21]
Let's do one. Another corgi so this is a corgi lying down your phone. And there's cherry tree. It's a great image and we are just going to do a relative image. Now, we're going to go back, get into the images folder and then we're going to find this image by Shiangling.

[00:04:44]
And as you can see this defaults to the blurred images type. So if I go to network and slow that down a bit, so we can see it happen, it shows up as a blurred image. And then it'll pop in as unblurred, yeah. But that all worked, and if we look at their source, we can see it did, Gatsby responsive image dropper, and it's got the pieces that we want here with a source set.

[00:05:17]
This isn't quite as full featured as the one with the picture and the modern fallbacks. But you know what, for two lines worth of code, it's not bad. So that's pretty great. And if we did want to control it with like the different blurred backgrounds are we want to add different styles or things, we can do that, we would just do that through using a static image instead of a markdown image.

[00:05:46]
The markdown images are gonna be full within your content area by default, so they'll always kinda do this.