enhanced:img - handling images in Svelte and Kit

Hi, I'm Ben McCann, one of the creators of SvelteKit, and I'd like to talk to you today about images.

Today we're creating more images than ever.

Images let us capture moments, places, and feelings.

And if you're a web developer, you can use images to communicate ideas, or as design elements.

But whoever said an image was worth a thousand words was not a web developer, because they were way underestimating.

Images are some of the heaviest components on our pages.

On the Svelte and SvelteKit websites, we have some beautiful images across the top of the page, courtesy of our designer, Ahim Vadam.

But if you go with the standard PNG format, these images are pretty big, and they're going to add a lot of time to the page load speed.

So what we've done is we've gone ahead and converted these images to AVIF format for users on modern browsers, and those images are much, much smaller.

And if you're on a mobile device, you don't need an image that's 1400 pixels wide, because your screen is maybe only 700 pixels.

So by serving a smaller image to mobile users, we're able to serve an image that's only 1% the size of the original image.

And it's not just the Svelte websites where this is a problem.

This Google PageSpeed report is from a site built with SvelteKit.

It's a very popular site that many of you may have actually been to.

But you'll notice that it spends over 6.

5 seconds loading bytes that really aren't necessary.

We could serve those same images in a different format and in smaller dimensions and save a whole lot of bandwidth and loading time for our users.

And that's not the only problem that Lighthouse detected with our images.

This site also didn't specify a width and a height.

As a result, the browser has to first fetch the image to determine the dimensions.

And after it's determined the dimensions, it can recalculate how to lay out the page.

That's a lot of wasted time, but it's also a jarring experience for the user as the page jumps around.

And finally, this site didn't set up caching.

So this is not just the experience the first-time user is going to have, but it's the experience they're going to have every time they return to the site.

So I'd like to share with you today something that we've been working on.

We call it SvelteJS Enhanced Image.

And to set it up, all you need to do is install the npm package and then import and use it in your vconfig file.

To use the new Enhanced Image tag in your markup, all you have to do is reference it where you normally have an image tag, and then make sure that your source is a Vite asset path.

There's an entire page in the Vite documentation about this, but typically that's going to be a relative path.

It could also be a Vite alias.

And this new Enhanced Image tag solves all of the problems that we just saw.

Firstly, it creates multiple formats, and it'll serve AVIF and WebP to modern browsers and a fallback to legacy browsers.

It inserts the width and height automatically for you to save you that effort and save the browser from having to calculate a layout shift.

It also creates multiple dimensions.

In this example, it's created a 2X version for high-density displays, like a lot of smartphones or an Apple Retina display.

And finally, you also notice in the file name that there's a hash.

That makes the file name unique so that it can be cached forever.

And of course, with Svelte 5 on the horizon, we've made sure that the output is highly optimized for the new compiler and runtime.

Enhanced Image is a preprocessor, and it replaces your Enhanced Image tag with a single string that can be inserted to the DOM in just one operation for lightning-fast DOM creation and hydration.

Sometimes you might want to use a mustache tag as your source, so we've made sure that's supported as well.

All you need to do in that case is import an asset and make sure to use the enhanced query parameter, then pass that variable to your source.

Because Enhanced Image works with Vite assets, you can use all of Vite's great features.

For example, you can use import metaglob to import an entire directory full of images and batch process them.

And finally, if you've got a large image that goes across the width of your page, you can specify the sizes attribute to serve different sizes to different devices.

It will automatically generate those different images for you, or you can specify those widths yourself.

And so, today, we are announcing.

.

.

[cheering and applause] Thank you to Rich and Simon for all the help in designing this.

We hope you'll go try it out.

Visit kit.svelte.dev/docs/images to see the full documentation.