Web Quality Photos-File size and Compression
By: ImageGenie staff
"Web quality" photos need not be anywhere near as high quality as an image that is to be printed. Nor should they be. A monitor running at 1280x1024 can not even display a 1.6 MP image in a single screen. Even if you had the time to wait for the image to load and the bandwidth to send or receive it; why would you want more than a single screen full? I hate scrolling around to look at a life size picture.
Most people still surf at 1024x768 maximum and prefer a window that is about 800x600. This is how we arrived at the conclusion that a maximum width for a "web quality" image should be set at 600 pixels maximum width. 640x480 has long been considered a standard for sharing of photos via email.
Now let's take a look at the bandwidth and time to download issues. When you place an image on the web. If you don't reduce the file size it will take forever for people on a dial-up connection to download them. People on broadband connections will notice a slow down. For images used on the web it is almost always necessary to reduce the quality to the maximum degree possible while maintaining an acceptable image quality.
There are two ways to reduce file size and eliminate the download delay. The first we addressed above by saying that the maximum image width, or height for vertical shots, should not exceed 600 pixels. The second item is compression of the image. Compression may very well be the more important aspect.
Compression of an image is the process of reducing the file size. The technical aspects of how it is achieved are beyond the scope of this article. For our purposes here; it is enough to say that it works and works very well for color images as you shall see below.
There are many different programs out there that will resize and or compress an image. Most of the ones I have encountered offer the option of compression as a percentage of the original image. Some seem to work better than others.
Until I started researching this article I was not aware of the fact that the settings are purely arbitrary. It is not a real percentage. It is just a reflection of what this particular piece of software will do. That does explain the differences that I have observed.
From personal experience I have observed that the absolute lowest quality loss occurs when you resize and shrink the image size in a single step. Our free to use Edit script will do that for you; but the two freeware programs we reviewed
A-review-of-two-free-image-resizing-and-compression-programs/
will do it better, much faster and with a smaller file size.
Quality loss does accelerate with repeated compressions. Always start with a COPY,think backup here, of the most original image you have, crop or edit it and then resize and/or compress it. It is fine to crop and resize in separate steps as long as you save the file with NO compression. Every generation of compression degrades the image.
For this example I started with an original JPG image, DCP_0564, which was 2160x1440 pixels and was 811KB in size. That image was cropped to eliminate the unwanted portion and saved as an uncompressed JPG file. The new file was 415x275 pixels and 92KB in size. I named it 0564_crop.jpg. I than shrank this file by 25% and again I saved it with no compression. I named this new file 0564_crop(311x206).jpg. The new file size is only 56KB. The new file is only 25% smaller in viewing size but it is 39% smaller in file size.
For the compression testing I started with the 0564_crop(311x206).jpg each and every time. I tested the two programs reviewed above in 10% increments of compression. It is important to note here that the files are named for the amount of compression that took place during the save. I followed the same method as the software I used. If 90 was selected as the compression factor I named the file _90. The smaller the _number the more compression was used.
The files are named:
0564_crop.jpg The uncompressed image 415x275 92KB
0564_crop(311x206).jpg the reduced size uncompressed file 56KB
0564_crop(311x206)_10.jpg 3KB
0564_crop(311x206)_20.jpg 5KB
0564_crop(311x206)_30.jpg 6KB
0564_crop(311x206)_40.jpg 7KB
0564_crop(311x206)_50.jpg 8KB
0564_crop(311x206)_60.jpg 9KB
0564_crop(311x206)_70.jpg 11KB
0564_crop(311x206)_80.jpg 13KB
0564_crop(311x206)_90.jpg 20KB
I have seen several articles similar to this online and none of them have offered the opportunity for a side by side comparison between the original image and the compressed image. I also wanted you to be able to compare the various compressions in relation to each other and to the uncompressed file. I can't do that within the confines of this article format.
I want to warn you now that the page contains a lot of images and could take several minutes to load over a dialup connection.
Compression-ratios-and-image-quality. You can see the original image in a side by side comparison to the 9 compressions
Our free online Edit program has a fixed compression ratio of about 70 and a quality equivalent to about a factor of 60 when compared to the two programs mentioned above. It compressed the image, 0564_crop(311x206).jpg, to about 12KB while keeping the image size the same.
The positive effects of image size reduction and compression are clearly demonstrated by these examples. A 92 KB file reduced slightly in size and moderately compressed becomes a 9KB file.
But; let's compare apples to apples to demonstrate the effects of compression only. The uncompressed (311x206) image was 56KB in size. Compressing it with a factor of 60 reduces the file size to 9KB. The compressed image uses about 16% of the space as the uncompressed file. You can store 6 images in the same amount of space that one uncompressed file would use. You can serve the image 6 times for the bandwidth cost of one time uncompressed.
All of these benefits and no visible loss of quality!
Article submitted March 11, 2006
Article modified 2/20/2008
More Articles in this Section
●Compression Ratios and Image Quality●Image Resizing and Compression Programs
●error_log