Size Vs Quality

So you've scanned your vacation photos and saved them as JPGs with 0% compression and at a physical size of 800x600. Perfect! What detail! What quality!

What an enormous file! It takes 10 minutes just to load fully in a browser over the web. Sorry, not good enough. Looks like you'll need to optimize it.

Optimizing images for the web involves having a compromise between quality and size - both physical size and file size. Here are some things to remember when making graphics for the web:

• Computer monitors display 72 DPI, so that's what you should save your images at.
• The wider and higher the image is in pixels, the longer it will take to download.
• The better the quality of the image is, the longer it will take to download.
• The smaller the file size of the image is, the worse it will look. It will get blurry, distorted, and will lose colors.
• Use the best file format for each image. Click here for details.

You'll need to reach a happy medium. Save a few versions of the same image and pick one that hasn't lost too much quality and is still relatively small. Here is an example:

1% compression. 27.1 KB		30% compression. 4.53 KB		60% compression. 2.1 KB

Here the best image to use on a webpage would be the middle one, there is a nice balance between quality and file size. It is best to keep your webpage, including the images it uses, to below 20 KB in size. That way people won't get impatient waiting for it to load and go elsewhere.