Best Image Formats for Websites Compared! PNG, JPG, GIF, and WebP

Image Optimization begins with choosing the best file format for your needs. This goes beyond PNG vs. JPEG. There is not one file format to rule them all.

Everyone’s image needs are different, even the different images within a single site have different requirements. But no worries, we got you covered.

In this post, I’m going teach you how to choose the best image format for your WordPress site. We’ll go over the old favorites, JPEG, PNG and GIFs and some of the next-gen ones like WebP and SVG. We’ll cover their strengths, weaknesses and ideal use cases so you can optimize your images like a pro. I also put together a downloadable PDF cheat sheet for you to be able to refer to! Click here to get your copy

You Never Had to Share Data with Your Siblings and It Shows

Why is choosing the right file format important? Because more and more visitors are visiting websites on mobile devices. Not only are network speeds relatively slower when compared to dedicated networks, but not everyone has unlimited data.

And since Google penalizes pages that load too slowly by showing them lower in search results, improving load times is a no brainer way to increase traffic, sales and conversions.

When you choose the wrong image format you could be inadvertently serving up a bigger image than is necessary. Additional image file capabilities (such as transparency), unnecessary detail and too many colors all add bloat to your images. Sometimes, these are necessary and other times they’re not. If your image doesn’t have transparency, for example, then you’re really not giving anything up if you choose an image type that doesn’t support transparency.

The key is to only add what you need.

Choosing the Optimal File Size

You also need to consider the image in relation to the rest of your webpage in order to choose the optimal file size. The average webpage is presently near 2MB so you want to stay under that limit to have a relatively fast site. This means you have to look at the total of all the assets on your site, not just images.

A large detailed hero image that is 1MB won’t be a big deal if it is the only image on a page with mostly text; however, if you’re going to display 10 large images on a page that are all 1MB then it will be a slog to load. You can compromise by displaying fewer images or showing them all at a smaller size.

How to Compress Images: Lossy vs Lossless

In order to choose the ideal image format, you need to understand the difference between lossy and lossless compression. Ideally, your image should utilize both of these algorithmic processes in order to produce the smallest file size. Not all formats support both.

With lossy compression, some of your data will be lost forever. Lossy image compression permanently removes image data and degrades the image in the process.

This is not as bad as it sounds, as some of this additional detail might not even be perceivable to the human eye.

Lossless image compression, by contrast, preserves data so nothing is lost. Lossless algorithms keep all the necessary data to recreate the image exactly.

Ideally, your image will first go through the lossy compression phase and then a lossless phase where what is left will be optimized.

The Complete Guide to Mastering Image Optimization

JPEG

JPEG stands for Joint Photographic Experts Group and was designed to be used for photos. As the standard file format for most consumer digital cameras and cell phones, you’ll pretty much find it everywhere.

JPEGs have several advantages:

1. JPEGs can contain millions of colors so they produce rich, vivid images
2. They produce a relatively small file size, even with so many colors
3. They’re supported on all modern browsers.

No wonder JPEG is such a popular file format for the web.

Since JPEG was designed for still photos, it doesn’t support transparency or animation.

JPEG Compression

JPEGs utilize lossy compression to keep the file size small.

JPEG compression is not an all or nothing setting. YOU get to adjust the compression ratio between 0% (heavy compression) to 100% (no compression) to create the ideal balance for your situation.

Generally, compressing an image between 75-100% will maintain the integrity and high quality of the image, yet at 75% the image is half as large. Half! This is why most social networks compress their images between the 70-85% range. Facebook for instance, compresses your images 85%.

So when you’re preparing your images in Adobe Photoshop or Lightroom, don’t be afraid to move that slider over.

Just look at these two images. One has not been compressed and is 229K, while the other has been compressed 75% and is 95k.

Can you tell which one is which?

There is a lossless JPEG format called JPEG-2000, but it isn’t widely adopted.

Also, you should always avoid recompressing a compressed image. Have you ever made a copy of a photocopy, or downloaded and reuploaded an image on social media? The quality gets distorted because you’re going through another round of compression.

(By the way, Option 1 is the compressed image)

How to Properly Resize and Serve Scaled Images with WordPress

JPG vs. PNG

JPEGs are a weak choice for images with high contrast. This is why JPEG screenshots with black text on white backgrounds tend to be blurry.

JPEG is the ideal image file type for photographs, especially those without text, when a smaller image file takes priority to image quality. E.g. Large hero images, highlighting professional photography

JPEGS are significantly smaller than PNGs. Our image of the scenery above as a PNG is 329k, that’s almost 3.5x as large as the compressed version.

PNGs

Let’s dive in to the web’s other favorite image file type, PNGs. PNGs were designed to replace the GIF because of licensing issues, hence the functional similarities.

PNG’s strength is its lossless compression algorithm. You don’t lose any data during the compression process so the image can be recreated without a loss of quality. As a result, PNGs preserve the fine detail in images, even when it comes to text. The downside is the PNG file sizes tend to be larger relative to other image file types because of all this data.

Another advantage is support for transparency. Not only can you create a logo file with a transparent background, but you can also create advanced transparency gradients and more with PNGs.

The Three Kinds of PNGs

There are three kinds of PNGs: PNG-8, PNG-24 and the mysterious PNG-32. Technically there’s also animated PNGs, but we won’t get into that because they’re not widely supported yet.

PNG-8 is like the GIF of PNGs. PNG-8 supports 256 indexed colors, but at a much smaller file size, even smaller than its JPEG equivalent. Unlike GIFs though, PNG-8 has poor animation support. PNG-8 is ideal for simple web graphics with transparent backgrounds, such as logos and site icons.

While PNG-8 supports 8 bit colors, PNG-24 supports 24 bit colors, which means support for 16 million colors. YAS! PNG-24 is more like a JPEG, but at a significantly larger file size. But the image quality of PNG-24 is excellent, even when zoomed in, which makes it ideal for ecommerce photos as well as screenshots or images with text.

If you create PNGs in the Photoshop Save for Web dialog box, you won’t see PNG-32 listed as an option, but your PNG will be silently converted to a PNG-32 if you add support for transparency. Why is that?

PNG-32s support 24 bit colors with an extra 8-bit alpha channel for advanced transparency capabilities. PNG-32s were designed to have the capability to create advanced images with transparency gradients.

These advanced capabilities means that PNG-32 produce much larger file sizes. If you’re not creating an image that needs complex transparency, stick with the PNG-24. If you’re creating an image overlay that fades to nothing, then that’s a job for PNG-32.

You can see an example right here. The image I created in Photoshop has a transparent gradient with two colors that fade from complete opacity to complete colorless transparency. In order to illustrate this, I made the background behind the image black by using style="background: #222".

You can see how the black background affects how the image is displayed because it darkens the colors throughout the gradient.

For the PNG-8 above, this effect is distorted. PNG-8 images only support one level of transparency, so the transparency only appears in a thin distorted band at the top.

WebPs

Wouldn’t it be great if you could combine the best of PNGs and JPEGs? Google thought the same thing and invented the open source WebP format.

WebP might just be one of the best kept secrets when it comes to optimizing images. Huge sites such as YouTube and eBay have already started using it on the down low to improve site performance.

There are two kinds of WebP images. One is known simply as WebP and uses lossy compression. You can think of this as the JPEG version of the WebP format. When you create a lossy WebP in a program such as Photoshop, you’ll get to choose the compression rate.

The other version is known as WebP Lossless, and it is more like a PNG. You’ll get a higher file size, but you won’t lose detail.

Both kinds of WebP formats produce an image that is much smaller than their JPEG and PNG counterparts. How much exactly?

According to Google’s data, on average, WebP images are 25-34% smaller than comparable JPEGs and 26% smaller than comparable PNGs.

That’s huge! So why haven’t we all switched over to WebP images yet?

Well here is the bad news. Even though WebP stepped on the image scene in 2010, Firefox and Safari did not support it. Safari still doesn’t, although now that Firefox has climbed on board it is most likely just a matter of time. So at the moment, WebP is not a fully browser supported solution.

You can get around this limitation by serving up the PNG or JPEG equivalent for visitors who use a browser without support for WebP.

As for creating these cool WebP files for WordPress, you can use a plugin to do this for you. In fact, the Smush Pro CDN converts images to WebP. If someone visits your site on a browser that supports WebP, Smush will convert your images and serve up WebP images. If they’re on a browser that doesn’t support WebP, they’ll get your everyday JPEG or PNG.

A Tale of Two Image Graphics Types

There are two types of image graphics, vector and raster.

Vector images are mathematically generated from a series of points which are connected by lines and curves to form geometric shapes. With vector graphics, an image can be resized to any shape, large or small without damaging the quality of the image.

Raster graphics, by contrast, consist of a pixels arranged on a grid, with each pixel representing a color. Raster graphics only appear high quality at the resolution they were meant to be displayed at. If the image is scaled to a larger size, pixilation will occur.

SVGs

Let’s get one thing straight, SVGs are not actually an image file format. SVG is a markup language that allows you to create two dimensional graphics. SVGs are more like HTML than PNGs or JPEGs.

SVGs are technically XML based and can be manipulated and animated with Javascript and CSS. Just look at this awesome hero image.

SVGs are also unique because unlike the image formats we’ve covered thus far, they create vector images. This means the images are infinitely scaleable and look good at all resolutions. Which make them great at adapting to different devices.

You won’t get that pixelation that occurs in other image file types. However, since SVGs were designed to display simple images based on geometric shapes, such as logos, flags, charts and icons. They don’t work well for photography.

You can create SVGs in a vector program such as Adobe Illustrator, Inkscape, Vectr, SVG-edit or Sketch. If you create simple images, the resulting file size will be much smaller than a PNG, JPEG or WebP image, even large images at high resolutions. Complex SVG files will negate these advantages though.

Even though it is a markup language, Google indexes SVGs, so they appear in image searches. And they’re compatible with all browsers.

To SVG or not to SVG?

If I’ve sold you on SVGs and you tried to upload one to WordPress as you’re reading this article, you may have noticed that WordPress doesn’t allow SVGs for security reasons.

But WordPress isn’t the only one. Social networks such as Medium, Tumblr and Facebook don’t allow SVGs either.

You may try to get around this and modify your functions file to allow SVGs, but I wouldn’t recommend it. Since SVGs area a markup language, they’re open to malware injection. If you’re a site admin and you enable SVGs but your site’s authors and contributors aren’t aware of the risks, they could upload compromised SVG files without knowing.

If you do decide to install a plugin to allow SVGs, you should then only upload SVGs from people you trust and limit the ability to upload SVGs to people who understand how to upload SVGs safely.

GIFs

I’ve saved the most notorious file type for last. While great for animating jokes in an ironically bad fashion, GIFs aren’t good for much else these days.

You want to know something that will blow your mind? The animated GIFs on Twitter aren’t even GIFs anymore! They’re WebM files.

Because the truth is, GIFs were never designed for animations. They produce exceptionally large file sizes. The more frames, the worse it gets. If you switch over to a WebM file, you’d have a file that is 9 times smaller and a lot higher quality. MP4s are another viable option that is compatible with all browsers.

GIFs have a limited color palette of 256 colors and use lossless compression. But, so do PNG-8 files, and at a much smaller file size and they have transparency as well.

So perhaps the only use case for GIFs is when you’re trying to serve up something that is compatible with older browsers that don’t support HTML 5, look bad on purpose or for nostalgic effect.

The Ultimate Mega Guide to Speeding Up WordPress

The Optimal File Size is the Smallest Possible

While using images on your site to get your point across is great, those 1000 words don’t come cheap! They take a lot of resources to serve up. The best approach is to choose the file format that gives you what you need and nothing more.

WordPress tries to help in the image optimization department by automatically compressing images, but it doesn’t do much. For that, a dedicated tool like Smush Pro can save you a lot of time and deliver images faster than you ever thought possible.

As I was writing this post and learning about WebP images, compression, and other image optimization techniques, I was excited to use my new found knowledge to improve my personal site. I was about to read a lengthy tutorial on how to create WebP images when I learned that Smush Pro does this with the flip of a switch.

I also activated the Smush CDN and saw my page load time come way down. Before Smush Pro loading images took 3 seconds on some pages, but after converting to WebPs and using the Smush CDN, the thing would load in under a second. I was blown away.

You can try Smush Pro free for 30 days here. Go ahead and see how much of a difference it makes for your site.