Tips for Optimizing Images in Wagtail

I wrote a blog on how to optimize your images with Wagtail recently, and the reason this came up is I was transferring some styles from Figma, the design file that our designers were using. uh to our code base for wagtail. org. I was uh transferring this amazing design they did for Wagtail Space 2026. And you know, for the most part, everything transitioned very well. Claude was very useful for that. But during the review, I there was kind of a really like uh duh type of moment that happened uh when I had one of my colleagues at Torchbox take a look at the code. I I thought I caught everything that the AI did weirdly because Claude, you know

uh pulled this stuff that was similar to a teenager trying to shove all their stuff under the bed and say that their room is clean. Uh, you know, because I asked it to remove all of the 2025 styles so that I could put the 2026 styles in there. And its idea of removing the 2025 styles was to make them transparent. Yeah. Uh Clauda's like, I'm just gonna cast an invisibility spell over these styles. Uh the code is still there, but you just can't see them. It was so weird. Uh anyway, I definitely caught that weirdness. Uh, and I caught a lot of other things that the AI tried to introduce that it wasn't supposed to. Um You know, even with fixing those errors, it did take it

save me time. Uh transferring stuff uh from Figma usually takes a lot of copy and paste. And honestly, like even if you know the AI were to go away tomorrow, the Figma MCP integration is just amazing. I so, so grateful for that one. Um back to uh the the issue though. Uh so I thought I caught all of the weird things that the AI did, but one of the things that went under my radar when I uh asked uh one of my other colleagues to take a look at it uh was the image optimization. Uh so it was such a uh duh uh type of moment. Uh because

unless you tell the AAI to optimize your images, it's not gonna do it. It's not gonna prioritize it. It's just gonna use whatever format is in Figma. Uh it might even choose an even more inefficient format. Like, you know, I I don't think Claude went as far as to replace every PNG in the Figma file with TIFFs. That would have been a lot. Uh but it definitely didn't choose any of the smaller image formats like WebP or AVIF and So that was an eye-opening moment for me and a reminder that when you're working with these types of tools, that it's important to prioritize image optimization. Now, why should you prioritize image optimization in general?

Well, the reason primarily is that the faster your images load, the better the experience will be for your user. And also, you know, the faster your pages load, the better your scores will be for SEO. Now, granted, you know, AI is kind of uh you know, uh running Roughhouse over everything right now and changing how search works. But at least for right now, as of the day that I'm recording this video in June of twenty twenty six, good SEO still matters. And so having faster images and images that load quickly contribute to that. Not to mention, it's just better for the environment to have smaller images. And if you want to reduce your carbon impact, this is a great way to do it.

So here is the blog post that I wrote, and I just kind of want to scroll through it real quick because it has a good summary of all the image optimization options that you have for Wagtail. Now most of this is going to be in your template code and in your template code with images you usually use an image tag in Wagtail and then you pick like the model and the field uh of the image that you're pulling from. And so that's why you have image page dot photo here. And then one of the things you can do to optimize your Images is to specify an output format. And these are all the options that you have here, ranked kind of from most efficient to least efficient And we also offer AVIF

Lossless and WebPLossless, which are two options that are designed to compress images without losing image quality. Uh you might have to experiment like go back and forth between the two different options and see whether it makes a difference for your particular design Uh but yes, that is available for you to play around with. And what this means is that even if your editors are the type of people to upload like the most The biggest, like chunkiest tip files, they will not render on your website as the biggest, chunkiest tip files. They will render as the output that you've specified in the image tag Now, another thing that you can use to kind of constrain those editors who upload the biggest possible files, uh, which to be fair they probably do because they're concerned about resolution and how things will

display uh but you definitely don't want to have like you know five thousand pixel size images crowding up your design and so you can use resize method for image tags as well in Wagtail. Here are a few different options that you can do to set max and min widths and heights. And that way you can kind of constrain the size in your design. And no matter what the editor loads, this will be the size that gets rendered in the browser And another cool thing that Wagtail offers is another type of special image tag called the picture tag. And what this one does is really cool. It can um render your images in multiple formats

and you can kind of order them from like the format you prefer and then have a couple fallback options. And this is great, even though I I think, you know, if we pop over to the Avif Wikipedia page here It looks like if we go down here to all the web browsers that support it, like you know, Google Chrome and Firefox. Uh WebKit even has added support. Microsoft Edge has added support back in 2024. It's probably pretty well supported by now, but it might also like kind of mess with your image quality. So WebP is probably still your safest bet in terms of the images that you choose.

Uh but you know if you want to potentially get a bit more performance out of your site, then definitely have Avif there, WebP as a fallback, and then PNG is a fallback fallback. There probably aren't a whole lot of browsers out there these days that won't support either AVIF or WebP, but you never know. So having that PNG option to fall back on could be pretty handy. And so this tag here would ultimately render as this in the HTML. So you have this full uh picture. uh set here and all the different images that the browser could potentially render. So I think that that is pretty cool and you can also add sizes to the picture tag

as well and other things like that and you can mix and match things Now one quick thing I do want to remind you of. Rich text images are different. Those usually appear in Streamfield and not in your templates There are definitely different methods for controlling the outputs around those. I included some links here And one other thing to not forget is the static images in your project. That is definitely one of the things that I forgot uh when I was letting Claude drive for me. Uh so you know definitely convert your static images as well to a smaller but uh quality image format. Just make sure you don't like convert any of your SVG files or your favicon files.

Those the favicons definitely still need to be PNGs to function properly. Otherwise have at it, convert things to Avif and WebP. If you need a, you know, uh if you don't want to do it in the terminal command, then you can use uh this little app that Google made called Squosh. uh you just drag and drop the images into it and it's super handy. So I just want to show you an example Example, if we head over to our new shiny Wagtail Space 2026 website coming up in November, CFP is opening soon. So, you know, if you have any great talks about Wagtail, start thinking about that. Uh but like so I just wanted to show an example here

of um what a web like the webP tag does on a website. So the example is going to be down here with the different speaker images that we have here. If we pop over to my VS Code here, this is the code. that is behind that block that shows all the speakers. And so what I've done here is on this image tag, you'll see highlighted here, there's a format WebP here It also provides a specific size and class as well , and it uses value. speakerimage. And so what that means if we go back to the web page here, and I'm going to go ahead and to the edit page here.

And I'm gonna go ahead and add another image to this block. It's gonna make it look a little silly because this is designed kind of to work well in threes and not fours But that's okay. The point of this is I'm gonna go ahead and choose an image here. I'm gonna pick out one of my headshots to add here. Let's see if we can find that. Um head. Oh yeah, let's actually, I think it's just my name. I don't think I have uh uh yeah there it is. See this is my a picture that my friend Kevin took ages ago, but it's uh it's one of my favorites. And so if we look at this image here, the reason I chose

it, if we edit it here, you'll notice that it is in a JPEG format here in the library. And so let's just go ahead and uh we'll add my name here. Doo doo. I can spell my own name. All right, great. And so the draft there has automatically saved, and let's go ahead and uh have a look at the preview here. And so if we scroll down here, uh you can see the image has been added, and so that was a JPEG that went in. If we inspect And look at our image here, you'll notice now that the source has

a web P format. Now, even though the JPEG went in, WebP came out. Now, if you have some very savvy editors who might notice something like that, you might want to create a little bit of help text so that they don't get super confused But this is, you know, a way for you to control how the images appear on your site, how optimized they are, and it is super, super handy. Alright, well I hope this video encourages you to optimize all your images and all your projects. It's definitely a great practice to have moving forward. And if you like these tips and found them useful, please hit the like button for this video and also subscribe to our channel to get more helpful content on Wagtail.