Determining what % quality JPEG to use on web pages
and how best to reduce/compress your image files

The purpose of this page is to demonstrate and help determine what is the lowest % quality you can get away with for images on websites, to ensure the lowest possible file size without compromising on overall appearance.

This page shows the effects of using Photoshop or Preview to save JPEGs at various % quality, to show how the two programs compress images differently. Furthermore, it shows the effects of using the JPEGmini tool to reduce file sizes without reducing the visual quality to the naked eye. It also shows how you can lower the % quality when the images occupy a smaller space on the page, without it really being too noticeable. 

1. Comparing the effects of Photoshop, Preview & JPEGmini on different image qualities

In each set of images, you can click on the image to view a larger version of the image in a lightbox for easy comparison.

PHOTOSHOP: 100% image quality, without and with JPEGmini:

JPEGmini reduced the original file at 1MB to 359k = 2.9x reduction. I can't see the difference, can you? Click to compare these two images.


MAC PREVIEW: 70% image quality, without and with JPEGmini:

JPEGmini reduced the original file at 182k to 153k = 1.2x reduction. I can't see the difference, can you? Click to compare these two images.

So you can see from the above 2 comparisons, the more compressed your image is in the first place, the less the file-reducing impact of using the JPEGmini tool. However, if you have a page with lots of images, it's still worth saving that 20% or more in file size, especially considering that page load time is a factor in Google's ranking algorithm. It's also much nicer for users if the page loads faster.


What % and what tools should I use?

Every software application has a slightly different method of compressing images. If you have Photoshop, it does a slightly better job of compressing images than Preview, so ideally use Photoshop. If not, Preview does a perfectly good job.

If you are a photographer or otherwise using images on your website for a purpose requiring maximum quality, you should consider exporting from Photoshop or Preview at 75% or higher quality, and then using JPEGmini to squeeze down your file sizes. This will give you the best balance of quality/file size. However, if you're just using pictures for standard purposes and you don't really need super-high quality images, then you can actually get away with a much lower % quality - at which point the benefit of JPEGmini decreases. 

Size is everything - how the size of the image on the page changes things

This next section shows how you can get away with lower % quality for images used at small sizes.

For a large image, I'd recommend something like this 70% JPEGmini as the right balance between quality and file size:

70% Photoshop JPEG with JPEGmini - File size = 96kb. Notice the green background is starting to look just little bit blocky, and the pixels around the word Canon are just starting to look 'bubbly'. Compare this to the original 100% quality image to see exactly what I mean.

However, if the image is taking up a lot less space on the page, you can probably get away with a lower % quality, especially if the purpose of the image is just to illustrate a point or break up the page. Have a look at these 3 different % qualities as they appear on this page (you can click on each to see the original image in full size)...

70% quality Photoshop JPEGmini - File size 96k

 

30% quality Photoshop JPEG - File size 52k

15% quality Photoshop JPEG - File size 33k

The difference between the left 70% and the middle 30% quality image is hardly noticeable. You can just about see the pixellation happening in the blurry grass background, but I'd argue it's acceptable, especially when you consider the file size is nearly 1/2. This would be fine as long as the image is used in the small size shown.

NOTE: I have added the clickable lightbox functionality just so you can see the actual original image file larger to inspect it more closely - I wouldn't recommend using the highly compressed 30% image if your viewers would be able to see the image in this manner.

If your customers are on a slow internet connection, you might even consider going for the seemingly ridiculous 15% quality on the far right, which reduces the file size to a meagre 1/3 of the original. It definitely doesn't look great, and depending on the image subject matter you might find this is too much compression, but it's something to consider if your site visitors will be on older mobiles or in remote/developing countries.