Want a more successful website?
Faster loading websites are more successful. Countless studies have shown than better loading speeds improve website conversions, sales, and SEO. There are plenty of articles that cover this concept.
But new image optimization techniques and revolutionizing the industry. In this article you’ll learn how to optimize your image to they load up to 10 times faster.
Oh, and it’s free.
Optimize Your Images
As a web designer I usually resize and compress my images in Photoshop but recently I’ve found new solutions that compress image better than anything I’ve seen before.
Squoosh Your Images
Squoosh is an amazing new tool that let’s you resize and optimize your images in all the latest image formats.
These new images are frequenly 1/10th their original size, which means they load roughly 10 times faster! They’re also around 2X to 4X faster than optimized images using older techniques.
Alright, let’s jump right in…
How to Use Squoosh
Here’s the basic instructions for optimizing your images in 5 simple steps.
1. Go to: squoosh.app
2. Click the pink blob
3. Choose an image from your computer
4. Adjust the settings as desired
5. Click Blue Download button
We’re going to go into more detail below, but first I want to explain how to get best possible results from your images…
Pro Tip: Don’t Double-Optimize
Whenever possible, always start with a high quality image.
Optimizing a high quality photo will produce nicer looking result and smaller file sizes. If an image has already been compressed, compressing it again will introduce what’s known as “image artifacts”.
The photo above is an extreme example usually happens when you compress an multiple times. It has lots of “image artifacts” and looks terrinble. If that wasn’t bad enough, it is actually larger than the image below…
This image has been compressed just once. It is smaller and looks way better!
What Do You Mean By High Quality Image?
What do I mean by “original image” or “high-res” image? It means getting a photo directly from a digital camera or a stock photography website.
But if you pull a random photo off the internet, it will almost certainly be optimized (not to mention copyrighted, but that’s another topic for another day). If you optimize it again, you’re likely to get poorer results.
How Can I Tell If My Images Are Already Optimized?
There’s no perfect answer but here’s a simple rule of thumb.
If the file is less than 300kb it has probably been optimized to some extent. If it is larger than 1MB its most likely an original image.
How To See the Size of My Images?
On Windows, find an image on your computer and hover over it. This will show you the dimensions of the image as well as the file size.
Do Image Formats Matter?
Every digital image has an image format. Each format has it’s own way of compressing files, and its own strengths and weaknesses.
Below, I will discuss the three most common files on the web, and the ideal
Traditional Image Types
The world’s three most popular formats are JPG, GIF, and PNG.
JPEG files are usually used for photographs. JPEG is the world’s most popular image format. Most of the photos you see on the internet or take with your digital camera will be in JPEG format.
PNG Files are commonly used for logos and icons. PNG files are great because they support transparent backgrounds and don’t loose quality when resaved, but PNGs don’t compress as efficiently as JPEGs (especially for complex images like photographs).
GIF files are mostly used for “animated gifs”, though not all gif files are animated. GIF is the oldest file type commonly used today. GIFs usually don’t compress very well and load slowly, but they’re universal support and animation ability have kept them popular over the years.
New Image Types
There’s a 3 new file formats that promise to revolutionize image compression. They produce better looking images at smaller file sizes, but aren’t as widely supported as the old traditional file types.
WebP files compress more efficiently than then JPGs and support transparent backgrounds. WebP is the most widely supported of the new image types and will work for about 92%-95% of users.
AVIF files compress even more efficiently than WebP files and also support transparent backgrounds. However, they are currently only supported by about 67% of users.
JPEGXL files currently have 0% support so they’re not ready for prime time. They don’t compress quite as well as AVIF or WebP, but they do promise surprising efficiently compression minimal quality loss.
I think this format will be ideal for photography websites that want fast load speeds without sacrificing quality or detail.
MOZ JPEG – Better Compression and 100% Supported
Want better load speeds with a file format that’s supported everywhere?
MOZ JPEG is not a new file type. It’s an old reliable .jpg file but it uses a new compression technique that yields nicer looking images with smaller sizes.
How to Make a MozJPEG?
If you are new to optimization, this is the file type I recommend. You’ll be able to upload it to your website without no fuss, and the confidence that your images will work for everyone.
Here’s how to make a MozJPEG…
- Go to: squoosh.app
- Drag your photo onto the pink blob.
- Make sure “MozJPEG” is selected from the dropdown.
- Optional – Click “Resize” and choose something less than 1200px wide.
- If desired, adjust the “Quality” slider
- Click the blue Download icon (in the bottom right).
That’s it! Now upload your file to your website, and you’re good to go!
WebP – Intermediate
Making a WebP is almost exactly like making a MOZ JPEG.
Follow the steps for MozJPEG above except choose pick “WebP” from the dropdown list.
I recommend using WebP as an alternative to PNG.
In other words: use if for images with transparent backgrounds. This is especially useful for complex images with lots of shading like the example above. Notice that the WebP file is 92% smaller than the original PNG.
Uncompressed PNG: 683kb
Optimized WebP: 51.8kb
Those are some serious savings! And we can get it even smaller by adjusting the quality slider.
There’s just one catch. WebP isn’t supported everywhere (at least, not yet) and you can’t upload them to WordPress unless you install a plugin. For this reason, I don’t recommend them for novices.
But for you intermediate folks, here’s how to use your WebP files.
Upload to WordPress
If you have a WordPress website, you’ll need to install a plugin before you can upload WebP files.
- Go to Plugins > Add New
- Search for “allow webp”
- Install “Allow WebP Image” plugin.
- upload your WebP images.
WebP images will work for most of your website visitors but not all. My guess is that 95% of your visitors will see them (as of the time of this writing). Over time that number will get closer to 99% or 100%.
Upload to Cloudinary
If you want to make sure 100% of your visitors see your images, I recommend opening a cloudinary account. I’ll explain more about this later in the article.
AVIF – Advanced (for now)
AVIF is the most cutting edge file type available. It compresses even better than WebP but browser support is limited to Chrome (at the time of this writing).
That said, Chrome happens to be the world’s most popular browser, and other browsers are sure to add support in the near future.
You can absolutely use AVIF right now, but only if you upload them to cloudinary and change the URL to have f_auto (as explained above).
A Real World Case Study
Recently, I had the opportunity to design and build a creative real estate website for a client called Launie.com.
She wanted something creative and unique. Specifically, she wanted the website to look like a tabletop with lots of objects scattered around it (like pens, post-it notes, paperclips, notebooks, etc.)
After a fair amount of back-and-forth we arrived at a really fun design that hearkened back to an era when web design was more fun and whimsical. But this site still needed to be modern, mobile friendly and ADA compliance.
To make this layout meet the demands of the modern webs it would need lots of images with transparent backgrounds.
Until recently, creating a modern layout like this would be inadvisable, because using so many PNG files would cause the website to load too slowly on most connections.
Using uncompressed PNG files, all those images would have added up to be over 5MB! But with WebP and AVIF files, I was able to get those same images down to just 420kb!
In other words, the homepage images load around 12 TIMES faster that it would have with standard PNGs.
Now to be fair, I was never going to upload uncompressed PNG files.
For years, I’ve used tinypng.com to optimize my PNG files which is an amazing website for optimizing PNG files (usually shrinking them around 50% or 60%) but the WebP and AVIF still loads 5X-6X faster than anything I could have done with PNG compression.
Combining this technique with Lazy Loading improves the performance even further.
For such a whimsical and creative design, I’m very pleased with the optimization.
A Small Snag – Safari on MacOS
Theoretically WebP is now “supported on all modern browsers”.
They don’t work in Internet Explorer (but that browser now accounts for less than 1% of all internet users).
Unfortunately, support for MacOS has a rather strange caveat, that came to my attention when my marketing consultant told me he couldn’t see any of the images on his Mac.
After doing some research I discovered that WebP was only supported on Safari if you were running Big Sur or later.
Mac users are known for fast adoption of OS versions, so I would have assumed that most of them would already be using Big Sur (which came out last October).
But the fact that my colleague (who was reasonably technical) couldn’t see my images on a new Mac he purchased just a few months ago suggested this group may be bigger than one would suspect.
The good news: this problem led to a solution that allowed me to use even more cutting edge file formats with confidence.
Using Cloudinary with f_auto
If you upload your WebP files to cloudinary, you can deliver them in a special way that make it work for everyone.
By changing a small part of the URL, it would serve the WebP to all browsers that understood it, and alternate versions to browsers that did not.
Here’s an example…
I uploaded this WebP to cloudinary.
I copied the URL, which was…
And changed the URL to…
Notice the v1619807995 (in red) in the original link? Every image you upload to cloudinary has a number string like this, directly after “/upload/”.
If you replace that number with “f_auto“ it turns on “Automatic format selection”. Basically this means it will deliver the best image format that the browser supports. If you browser doesn’t support AVIF, it will get WebP, if it doesn’t support WebP, it will get a JXR or a PNG. The point is, everyone will get a file they can see.