Epic Image Optimization
Andre, a DevRel fellow at NEON, talks about "epic image optimization." He shared his own journey into this area, which started about five months ago when he was looking for a better way to handle images for his event site, All Things Web. Finding existing solutions a bit complex without prior experience, he decided to "just do things" and build his own solution.
Andre explained how he started with a GitHub gist from Jacob from the Remix team and iterated on it, eventually creating an open-source package called OpenIMG. This package, which he's happy to have recently merged into the Epic Stack, provides a simple image component for the frontend and a Vite plugin. The real work, he noted, happens on the backend via an optimizer endpoint you add to your application.
He then showed a live playground, demonstrating the core principles of image optimization: resizing images appropriately and using modern formats like AVIF or WebP. Andre also highlighted the benefit of stream processing, where images are processed in chunks, significantly reducing server memory usage compared to loading entire large images into a buffer.
The main challenge, Andre pointed out, is that modern high-resolution devices produce very large image files, and optimizing them is CPU-intensive. His package is designed for convenience in small to medium-sized applications by keeping everything within the web server. However, he advised that for sites with many users or images, it's better to offload optimization to a serverless function that can scale more effectively. For those just starting with the Epic Stack, though, local optimization is a great starting point for improving web performance.
Share this talk
Transcript
It's good to be back at EPICOM. Everybody is having a good time so far? Yes. Yes. We all do. Alright. My name is Andre. I'm a devrel fellow at NEON. And today, I want to talk about epic image optimization.
Yesterday, I was asked what I do outside of tech at the dinner, and I didn't have an answer at all. So guilty. Cool. So I organize events in the Bay Area. We have a site called All Things Web.
And approximately five months ago, I was looking for a new solution for optimizing our images for improving our web performance. And it was a skill issue, I have to say that.
I was looking at different services and different APIs and documentations, but nothing really looked like something I would like or wanted to use just because I didn't have prior experience. So, I've heard you can just do things. So, yeah, I just decided to do it myself.
And then over the last few months, I went down a rabbit hole about image optimization and, yeah, I decided to just build it out myself. There's this really cool GitHub gist from Jacob from the Remix team.
So I took that, got started with implementing that on all things web, and just iterated over the next few months, fixed bugs, ran into issues, asked some friends for help, and, yeah, finally turned into an open source package, this year, called Open. EMG. I'm really happy with how I ended up with it.
I finally have some experience with image optimization, some opinions and some taste, I think. And, yeah, I think Yeah, a month ago, I've emerged into the epic stack. So that was just like this huge, amazing learning journey for myself. I'm really happy with how it turned out.
What it is, is just a front end package with an image component that looks exactly like the image tag. You just switch out with an image component and has a Vite plug in to make it easy to work with Vite assets. And then the heavy lifting is really done on the back end.
What you do is you add an endpoint to your application that is the optimizer endpoint. That's what you hit with the source image, and it optimizes it on demand. And I actually have a little playground here that I byte coded over the last few weeks. So what you when it comes to image optimization, there's really two things.
The first one is you want to resize the image so that you don't serve more image than you need, and you want to use, modern formats. So if you select AVIF here, right? AVIF, WEB are two very modern formats that have very good performance on the Web.
And then we say, like, hey, this is my cat Lucy, by the way. We only want her in 800 by 800 here, because we can't really display more image data. What you currently see on the top right is that the original image is 18 megabytes.
It's a PNG I shot on my iPhone, and that's way too much to load on the browser. And then also, the way I'm currently serving that image is that I load it fully into a buffer, and then I serve it to the client.
So the server memory is also 18 megabytes, just to, like, load it all into a buffer. So if you load the image now again with stream processing, which means you load the image into chunks into the server, then you optimize them with Sharp one by one, and then you serve it to the client, and we reload this.
Hey, we have a way better image here of my cat. Now it's 80 kilobytes, so that's something we can work with. Right? It's it's like, I think 99% image data saved here, which yeah. Web performance. And then you can also see the server memory improved a lot. Right?
So, like, imagine you have a lot of new images on your site, and a lot of, optimization requests come in at the same time. If you have to load all these images into memory at the same time, that's not something you want to do, so using stream processing gets you really far. Amazing. So what's the problem?
The problem is that we're shooting images these days on very high resolution devices, and these images are just very large. So when you do optimizations of images, that just takes a lot of CPU power to do.
What I came up with, my little package, what I decided is, like, for my small to medium sized applications, I just want to have that all in my web server, because I don't want to deploy one more serverless function, one more server. I I don't want to use a third party server, so it's super convenient.
But keep in mind that it is actually very, very strong on your web server. If you do have a lot of users or a lot of images, you want to be careful, doing that on your web server. So maybe, at some point in the future and I have a very smart diagram here for you, decision diagram.
So if you have a lot of users and a lot of images, you probably do not want to optimize your images on your web server, but rather than a serverless function, something that scales better.
But otherwise, if you're just getting started with the epic stack and you just want to have some image optimization because it's great for web performance, then having something that is just local on your web server is a great starting point.
And, yeah, just really happy with what we cooked up, and please all optimize your images, and enjoy Epic Web Conf.
