web image loading picture thumbnail hero image web image loading picture
January 5, 2020

The Best Image Format For Websites in 2022 (WebP vs. JPG, GIF, & PNG)

The other day I was using the Google Page Speed Insights Tool, and it was complaining about the image formats I was using on my site. Since when are reliable formats PNG, GIF, and JPEG considered “bad” image formats?

This sent me down a rabbit hole in which I learned quite a bit about image formats. So I decided to simplify what I’ve learned for those of you who maybe aren’t quite as excited about image formats as I am.

Why Did PNG, GIF, and JPEG Become The Default Image Formats In The First Place?

PNG, GIF, and JPEG are the most common image compression algorithms used today. 20-30-ish years ago, each filled a specific niche. They gained widespread support, and they’ve had almost zero competition for the past 30 years. What niche did each fill that made them so prevalent?

GIF – Supports multiple frames so you can use it as a short silent film.

PNG – Supports transparency, so it’s great for images requiring the alpha channel. It also is a lossless format, meaning it doesn’t sacrifice image quality for space savings. Making it an excellent choice for images that need to be of the highest possible quality.

JPEG – Reduces image file-sizes significantly. Great for the web where you’d be happy to exchange some image quality for faster load times.

Why Are Image Types Changing Now?

Well, it’s actually still unclear if things are changing.

Don’t get me wrong, PNG, GIF, and JPEG should have died 5 years ago. New compression algorithms now exist that are better than PNG, GIF, and JPEG combined.

The problem isn’t that we don’t already have better image formats. The problem is the new image formats haven’t gained mass-adoption.

Even if you built a kick-ass image compression algorithm, it’s worthless if no Web Browsers or Photo Editing Software will support it.

That’s been the state of new image formats since about the year 2000. A better algorithm gets created. But, then that format fails to reach mass-adoption before an even better image format shows up.

Which Image Formats Have Died?

Remember JPEG 2000? How about JPEG XR? Not ringing a bell for you?

These formats came about and were superior to JPEG, GIF, and PNG. And they’re already dead.

Now that there are better algorithms than JPEG 2000 in existence why would we ever switch to it?

This pattern repeats and it has left GIF, PNG, and JPEG as the inferior kings of the mountain.

WebP: The Best Image Format In 2022!

What if you had a compression format that could save off multiple frames like a GIF. AND it had an alpha channel and lossless option like a PNG. AND it could achieve even smaller file sizes than a JPEG could?

Welcome to WebP! It’s better than GIF, PNG, and JPEG combined! And it’s FREE!!! And every single browser in the world supports it in 2022. Well, except for one…

safari and mac.

God [email protected]$#%#$T!!! This is why we can’t have nice things!!!

But, with every other web browser on the planet now supporting WebP, it won’t be too long until Apple has to join the party. Right?

The only reason to not add WebP support would be if your company was gearing up for some type of image format war. And no company is stupid enough to do that in 2022. Not after seeing what happened when Internet Explorer failed to adopt web standards over a decade ago. Right?

Apple Throws Support Behind HEIF, Gears Up For Image Format War.

Son of a [email protected]#$%!

In defense of Apple, HEIF is a superior compression algorithm compared to WebP. It does everything WebP does; only the file sizes are smaller and better quality. It’s the best compression algorithm in existence as of this writing in 2022.

In fact, Apple is already utilizing this technology with great success. When iOS 11 dropped in September 2017, Apple began saving all iOS videos/pictures in the HEIF file format. This move saved tons of disk space on iPhones/iPads and Apple’s cloud services as a result.

You likely didn’t realize all your iPhone’s media has a .HEIC or .HEIV extension. Apple converts the file format to more common formats like JPEG when you export from the device. So most people haven’t noticed the change.

Does this mean HEIF is the image format that will finally knock out GIF, PNG, and JPEG as the web’s go-to image format? Sadly no, it does not.

HEIF has a pretty glaring problem that’s going to prevent it from taking over the web. It’s not free.

The Moving Pictures Expert Group developed HEIF. And they charge about $1 to hardware manufacturers to use their compression algorithm. For Apple, this is no big deal. They’d happily pay the dollar to free up 25% more storage in their cloud and across all iPhones in existence.

But, not all hardware vendors feel the same way. Meaning not every computer built in the last few years can decode the image format. Meaning web browsers have 0 motivation to support the image format.

Apple is likely to stick with HEIC on its devices for some time. At least we can always dream about Apple adding WebP support to their browser. In fact, we should demand this by downloading Chrome and ditching Safari ASAP. Browsers that can’t keep up with standards should die a very quick death so we can all move forward as a society.

AVIF: What if HEIF were free?

The AVIF image format has some promise of taking over the world. It’s effectively a clone of HEIF only free. Plus, Google and several other companies are supporting it, so it may take off in the future.

But, AVIF has a teeny tiny problem. It’s not finished yet. That’s right, it’s in beta.

It’ll take years to finish AVIF. Then on top of that, it’ll take years for web browsers and photo editing tools to all support it. So as of 2022, AVIF is worthless and you can completely ignore its existence until at least 2023-ish.

Or can you? AVIF will be a significantly better compression algorithm than WebP when it’s completed. So if you run out to convert all your images to WebP, you may have to change them all to AVIF a few years down the line.

This is the type of pattern that has kept GIF, PNG, and JPEG as kings of the image format mountain for 30 years. And the only thing that might keep them around for another 30.

Should You Run Out And Convert All Your Images to WebP in 2022?

I don’t think it’s essential that you move on from GIF, PNG, and JPEG if you don’t feel like it. I haven’t. That said, if you wanted to upgrade to WebP, it’s becoming incredibly easy to do so.

You may think that converting your blog’s images to WebP sounds like an enormous undertaking. You probably think you’d have to manually convert thousands of images. Then on top of that, you’d need to write code like below to provide a jpg fallback for Safari’s nearly 20% market share.

<figure src="https://domain/image.webp">
        <source srcset="https://domain/image.webp" type="image/webp">
        <img src="https://domain/image.jpg">

The good news is life isn’t that hard if you’re using WordPress. The ShortPixel plugin can automatically create a WebP copy of all your images. AND it automatically adds the fallback code for Safari users as well.

I’ve personally done this, and it works great! The only downside is that Shortpixel is only free for 100 image conversions per month. After that, you have to pay $10 for every 10,000 images you convert ($0.001 per image)

For me, that wasn’t terribly expensive for a hassle-free way to please Google by increasing our website’s speed. But to each their own.

How To Setup WebP Images With ShortPixel

1) Install The Shortpixel Plugin

shortpixel wordpress plugin.

2) Go to Settings -> ShortPixel -> Advanced

shortpixel wordpress plugin advanced settings.

Make sure you click

  1. “Also create WebP versions of the images, for free.”
  2. “Deliver the WebP versions of the images in the front-end.”
  3. “Using the <PICTURE> tag syntax”
  4. Global

3) Consider Whether You Want To Convert Thumbnail Images

shortpixel thumbnail options turn off.

This one will be dependent on your theme. Each thumbnail you convert counts against your credits. You should only select the sizes that your theme uses here. On my awesome theme, I don’t use thumbnails so I exclude everything. My 10,000 credits will last a very long time!

Shaun Poore spent weeks analyzing the differences between HEIC, WebP, JPG, GIF,PNG, and more. At the end of the day, WebP is currently the most efficient codec on the web (but Shaun has started using JPG's on his blog for most things because converting everything to WebP and keeping track of the JPG backup was too time consuming).

Leave a Reply

Your email address will not be published.