When you save images to use on your site, choosing the right image format matters.
Why?
Because the wrong image format means larger file sizes, which means a slower website, which means higher bounce rates and lower conversion rates.
Give me a few minutes of your time and you'll never make that mistake again. Instead, you'll choose the right image format and your site will look better and load faster.
Let's start with the basics:
What is a JPEG?
JPEG is a lossy compressed file format. Due to its reduced size and high image quality, JPEG's have become the standard compressed image format. JPEG stands for 'Joint Photographic Experts Group', who created the standard.
What is a PNG?
PNG stands for “Portable Graphics Format”. It’s the most commonly used uncompressed image format on the web. It’s a great choice for line drawings, text, and iconic graphics at a small file size.
So, JPEG or PNG? Which provides better quality images on your website?
The Basic Rule: JPEG for Photos, PNG for Graphics
If you remember only one thing from this entire post, let it be this: save your photographs as JPEG and your graphics (and screenshots) as PNG.
This type of image should be saved as JPEG.
A graphic like this should be saved as PNG.
You can think of it like this: if it has many different colors, gradients and textures, JPEG is the right format. If it has sharp lines, clearly separated areas of flat colors and text, PNG is the way to go.
But Why Does it Matter?
When you compare image in JPEG and PNG side by side, you will probably not be able to tell the difference. So, if there's no perceptible difference between the images, why not just save everything as JPEG and be done with it?
The answer is: image compression.
Image compression is about reducing the file size of an image as much as possible, without compromising the quality too much. In general, stronger compression = smaller file size = worse image quality. Good image compression is about finding a good trade off between file size and quality.
It's all well and good to look at a high-res picture on your computer. The file is uncompressed and because it's saved on your hard drive you can open it in an instant. But if that same file is on a website, it has to be downloaded. Even on a fast connection, large image files can take several seconds to load. And when it comes to website speed and conversion rates, you don't have several seconds to spare...
The graph above shows that people will abandon your website after even a few seconds of waiting time. If you have several large (file size) images on a page, you might be losing half your visitors before they even see your content.
Let's look at a practical example of this. If we save a photograph like this at a 1080p resolution in both image formats, here's what we get:
The image quality is almost identical, but the wrong image format (PNG, in this case) makes for double the file size!
But we're not done yet. Even the smaller file in this comparison is much too large for use on the web, at over 1 MB. That's because these images are uncompressed and as a general rule, you should never use uncompressed images on a website.
Loading several, large, uncompressed images can slow your pages down to an absolute crawl and that will send your bounce rate through the roof. We've seen this exact problem affect many of the websites that we've reviewed over the years (like this one).
JPEG and PNG Image Compression
So, images need to be compressed and in the compression the differences between JPEG and PNG become clearer.
JPEG uses a method of compression that groups together multiple similar pixels and kind of blurs the lines between things. This works fine for photographs, but looks horrible for graphics and screenshots.
Here's what strong JPEG compression does to a graphic:
Those fuzzy outlines and the ghosting around the text are telltale signs of JPEG compression on a file that should have been a PNG.
Here's what the same image looks like when saved as a PNG:
The reverse isn't quite as bad. If you save a photograph as PNG and compress it, it will still look fine. Take a closer look at gradients and you'll detect some graininess, but it's nothing too bad. The problem here is file size: a JPEG photograph can be compressed to a small file size without much loss in quality, while the PNG just can't be crunched down as much.
Here's how our example files from before compare, after compression:
The JPEG image is now well under 1 MB, which is acceptable for a large, main image on the page (you wouldn't want to load many more images of this size, though). The PNG's image quality is still okay, but the file size is about 25% larger than it needs to be.
PNG for Crisp Graphics
Note that if you save a graphic or screenshot as JPEG and compress it heavily, you can usually achieve a smaller file size than with a compressed PNG. In this case, you should choose image quality over file size: the PNG will look crisper and clearer than a JPEG of equal file size. And it will look much crisper and clearer than a JPEG of smaller file size.
Here's a side by side comparison: compressed JPEG vs. compressed PNG with similar file sizes.
Compare these images and see how you feel. You may find yourself insensitive to the fuzziness in the JPEG image, but as I mentioned in the video, to some of us, this is torture...
The "Not Sure Which One" Case
Sometimes, you have an image that doesn't clearly fall into either the "photograph" or the "graphic" category. For example, a screenshot that contains text and sharp lines, but also photographs, like this one:
In the case of a screenshot, it's almost always best to save it as PNG. That way, we retain the crispness and readability of the text in the image.
In other uncertain cases, it's best to save the image in both formats, compress them and compare file sizes and visual quality to make the decision of which format to upload to your site.
How to Compress Your Images
Here are some services and tools you can use for image compression:
- Kraken.io - the service we use. Excellent image compression while retaining high image quality.
- The Kraken WordPress plugin - to automatically compress images you upload to your site (note: our themes have this feature built in).
- WP Smush - another WordPress plugin that auto-compresses your images.
You are now armed with the knowledge and the tools to choose the right image format and keep your website fast and beautiful looking.
