Speeding up your website with next-generation images

A friend recently asked me to check out his website. The homepage was loading slow, and they didn’t know why. I looked and found the culprit right away—a sucky-slideshow with 7 HUGE images. I couldn’t talk them out of using the slideshow. But I did show them how to make their website faster.

slow images, blow.

One of the best ways to improve website performance is optimizing your images. Back when I started designing and developing websites last century, we had jpegs or gifs. Browsers didn’t even support transparent png, (man I’m old). But now we have all kinds of options for speed, like AVIF, WEBP, or SVG.

As a general rule, if it’s a photograph (JPEG), I will save it as an AVIF or WEBP. For line art and logos, I’ll save it as an SVG. Sometimes you have to experiment to get the smallest file size and the best quality, though. I have tried to use some of the auto-magic image optimizers with GULP, but they’ve left me less than impressed; maybe it’s me.

So for manually optimizing images, I’ve found a couple of great tools. For photos, I’ve really enjoyed using Squoosh; it squeezes every pixel out of the images, and the results can save a lot of bandwidth without any quality issues.

For vector images, I’m impressed with the code crunching capabilities of
“World’s Best SVG Compressor.” I’ve used both tools, and for quality and speed, so far, they are the best I’ve found.

Here’s a quick example.
The original image from Photoshop is 460 KB. The squooshed image is 36 KB. However, some browsers don’t support the new file types, so here’s the code I’m using to ensure browser compatibility.

         <picture class="img-flex center-this">
            <source srcset="https://s3.amazonaws.com/mattfitzwater.com/
img/large/gnarlytreesustainability-min.avif"
 type="image/avif">
            <source srcset="https://s3.amazonaws.com/mattfitzwater.com/
img/large/gnarlytreesustainability-min.webp"
 type="image/webp">
            <img src="https://s3.amazonaws.com/mattfitzwater.com/
img/
large/gnarlytreesustainability-min.jpg" 
alt="Gnarly Tree">
          </picture>