I've read that setting the “quality” value for JPG images to 85% is best for web viewing. The conventional wisdom says that anything higher is a waste of disk space (and bandwidth), while anything lower will cause visual differences in your images.
Let's be clear. We're looking at the JPG Quality setting, not the resolution of the image in Pixels Per Inch (PPI). For the web, always save your images at 72 PPI – the vast majority of computer monitors won't resolve any higher.
Images saved at 100% are much larger than those saved at lower values. How much does it really matter? Here's my example.
This image is a composite of the same photo saved at 60%, 85% and 100% JPG Quality. The 60% image is 304KB on disk. The 85% image is 806KB, while the 100% is 1.07MB. Obviously, the 60% image saves a huge amount of disk space and bandwidth, while the 85% compared to the 100% saves a significant amount (264KB). Note: this is a large images so please be patient. You can expand the resulting lightbox to full screen.To me, the differences between the 85% and 100% are negligible, with maybe a very small decrease in contrast. The differences between the 60% and the 85% are slightly more visible. However, in my opinion, the 60% image would be fine for a thumbnail.
This shows me that if your web site image display functions allow for different quality settings for Thumbnails and Full Size images, you can safely show the thumbnails at 60% quality, with the full images at 85%, and save a lot of bandwidth. Allowing your pages to load more quickly benefits your web site visitors, and can provide a bump to your Google rankings.
Here is a direct comparison between the 60% image and the 100% image, just for fun:
Here, I can see a significant difference in the visual quality of the images. The 60% shows a small decrease in sharpness and contrast. Do you see it?
Here's an extremely tight crop of all three images, with labels – I'll bet you see it now 🙂Please leave a comment and let me know what you think about these differences.