When you save images to use on your site, choosing the right image format matters.
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 JPG (or JPEG)?
JPG is a lossy compressed file format. Think of it like this: JPEG takes an image and attempts to make the file size smaller by reducing detail in the image. Of course, the image could just be reduced to a pixelated mess to reduce the file size by a lot, but that wouldn't be a pleasing result. So, JPEG seeks a compromise: smaller file size, which keeping the image quality as high as possible. JPEG's have become the standard compressed image format.
JPG or JPEG stands for 'Joint Photographic Experts Group', named after the organization who created the standard.
Technically, the correct abbreviation is 'JPEG', but in practice, this is used interchangeably with 'JPG'. This abbreviated abbreviation stems from the fact that filename extensions used to be limited to 3 characters in Windows. Hence the filename was '.jpg' on Windows and '.jpeg' on Mac.
What is a PNG?
PNG stands for “Portable Graphics Format”. It’s the most commonly used image format that supports lossless compression by default. It’s a great choice for line drawings, text, and iconic graphics at a small file size.
So, what's the lowdown on PNG vs JPG? 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.
As a rule of thumb: 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 JPG 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.
JPEG version. File size: 64 KB. Click to zoom.
PNG version. File size: 65 KB. Click to zoom.
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...
Transparent Backgrounds: PNG
A major difference between .jpg and .png images is that only the .png format supports transparent backgrounds.
Here's an example of a website's title section which uses an image with transparency:
The image on the right is a photograph, which means it's best saved as a JPEG file. However, the image is overlayed on a background with a gradient and a background image. The way to make this layout possible is by saving the picture as a PNG with transparency.
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:
This example is taken from our "Chic" landing page set for Thrive Architect.
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.
What About webp & Other Image Formats?
Aside from PNG and JPEG, there are various other image formats such as GIF, BMP and TIFF.
Most of these are simply worse than JPEG or PNG for use on the web, so they're not worth discussing in greater detail (at least not in the scope of this article).
One image format to keep an eye out for is webp. This is an image format made specifically for the web and for small file sizes. Webp files are often smaller than either JPEG or PNG files, while maintaining high image quality. Webp is well supported in web browsers, but not yet very common in image editing programs.
Over to You
You are now armed with the knowledge and the tools to choose the right image format and keep your website fast and beautiful looking.
If you have any questions or feedback, please leave a comment below!