Page

Golden Rule

Compress your photos as much as you can. In other words use the lowest quality setting, that produces an acceptable photo quality and no better

Quality & compression

Another confusing area is that JPG files are compressed. In fact the whole benefit of JPG files and the reason for the format being invented was to enable photos to be compressed so they take a fraction of the file space the would otherwise require.

The reason JPG format is better than GIF or PNG format is precisely because they compress much better in this format without losing quality. Most scanning software or digital cameras have a quality or compression control that varies the degree of compression. Too much compression and you lower the quality of the photo (but it makes your website quicker to view). This is the central dilemma mentioned at the start.

To be honest there's no simple answer. You should try to create the smallest file size, which means the highest compression level that produces a photo quality that you can accept. It's not uncommon to find JPG photos that are way larger than necessary because they have not used the optimum compression level. This means a slow website. It's a balance between quality and speed, you want both, but unless your photos are really small you can't have both.

Golden Rule

A JPG quality setting of 75% is typically the optimum balance between file size and photo quality. Never set JPG quality to 100% as this will always make unecessarily large files.


Quality 25%, file size 3.6 Kbytes	Quality 50%, file size 5.3 Kbytes


Quality 75%, file size 8 Kbytes	Quality 100%, file size 32 Kbytes

Most photo processing software allows you to control the JPG quality. This is sometimes expressed as a quality level between 1 and 100% and sometimes as a compression level between 1 and 100. These two are usually the same scale but the opposite way round. So a quality level of 75% will be the same thing as a compression level of 25. And this number is nearly always the optimum number.

You might think 100% quality is what you want, but as you can see from the above examples, this is just wasteful and makes for unnecessarily slow download speeds. What's more there is typically no perceptible difference in the quality settings higher than 75%.

Golden Rule

Always apply editing operations to the original photo and not to one that has already been processed or edited. Always keep a copy of the original just in case

Cumulative distortion

This is a result of applying a number of photo operations to the same photo, one after another. Because each time you load and save a JPG photo it distorts very slightly; the more often you do this the worse it gets. Worse, if you perform other operations such as rotating, brightening or even enlarging or reducing a photo this also distorts the image each time the operation is applied. The more you change the photo, the worse it gets.

	Original photo
	Rotated 10 times

The solution is to use the original photo always whenever you want to change it - do not use one that you've already altered or changed. Secondly avoid loading an image, doing a few operations on it, then saving it, then loading it again to do some more.

Note: Smart Photos do not suffer from cumulative distortion no matter how many operations you apply.

Design guidelines

In addition to the rules regarding image size above, there are a couple of simple rules that will make your web pages look better.

Golden Rule

Try to make photos the same width when used on the same page, especially if they are in a row or column

Golden Rule

Put a margin space around your photos of between 5 and 10 pixels. Never allow text to touch right up to the edge of a photo

NEXT PAGE >>