Preparing Graphics for The Web
JPEG COMPRESSION EXAMPLE
|
|
JPEG Quality (1-99): Q99
Filesize: 54,124 bytes
Load Time @1.3k/sec: 41.6 sec
Load Time @2.6k/sec: 20.8 sec
This image contains subtle color gradients as well as hard-edged textures, so we'll be able to see how well these subjects fair with increased compression.
|
|
|
JPEG Quality (1-99): Q90
Filesize: 21,868 bytes
Load Time @1.3k/sec: 16.8 sec
Load Time @2.6k/sec: 8.4 sec
Absolutely indistinguishable from the previous image, yet half the filesize. Isn't compression wonderful?
|
|
|
JPEG Quality (1-99): Q80
Filesize: 15,054 bytes
Load Time @1.3k/sec: 11.6 sec
Load Time @2.6k/sec: 5.8 sec
Less than a third of the first image's filesize, and still indistinguishable from the first image.
|
|
|
JPEG Quality (1-99): Q70
Filesize: 12,028 bytes
Load Time @1.3k/sec: 9.3 sec
Load Time @2.6k/sec: 4.6 sec
Still a great image, but the filesize reduction is becoming less and less significant. We could just go with this one, since experience tells us that we can't trim any more than a few more seconds off the load time before the image quality is noticeably affected, but let's remember that every bit of reduction we can squeeze out of each image can add up to something significant. Let's keep going.
|
|
|
JPEG Quality (1-99): Q60
Filesize: 10,201 bytes
Load Time @1.3k/sec: 7.8 sec
Load Time @2.6k/sec: 3.9 sec
This is getting a little boring.
|
|
|
JPEG Quality (1-99): Q50
Filesize: 9,096 bytes
Load Time @1.3k/sec: 7.0 sec
Load Time @2.6k/sec: 3.5 sec
Boring. When is this damn thing going to start getting ugly?
|
|
|
JPEG Quality (1-99): Q40
Filesize: 8018 bytes
Load Time @1.3k/sec: 6.2 sec
Load Time @2.6k/sec: 3.1 sec
Highlights and shadows still smooth. Texture is still true.
|
|
|
JPEG Quality (1-99): Q30
Filesize: 6,813 bytes
Load Time @1.3k/sec: 5.2 sec
Load Time @2.6k/sec: 2.6 sec
If you jump back a few images, you can barely make out some differences in the quality of the color gradients in the red plastic handle. But for the 1200 byte savings over the previous image, I find this image acceptable.
|
|
|
JPEG Quality (1-99): Q20
Filesize: 5,397 bytes
Load Time @1.3k/sec: 4.2 sec
Load Time @2.6k/sec: 2.1 sec
We can now clearly see the reds breaking down even more. I think we've gone too far. At this point, I'd back up and choose the previous image.
|
|
|
JPEG Quality (1-99): Q10
Filesize: 3,519 bytes
Load Time @1.3k/sec: 2.7 sec
Load Time @2.6k/sec: 1.4 sec
Those subtle hues are really suffering now, and the textured areas are losing definition.
|
|
|
JPEG Quality (1-99): Q1
Filesize: 2,029 bytes
Load Time @1.3k/sec: 1.6 sec
Load Time @2.6k/sec: 0.8 sec
Nasty.
|
Side-by-side comparison
Shown below is a collage of samples taken from each of the 11 images above. Each sample image contains both blue and red plastic samples, as well as the placemat textures shown at 6 times normal size. They are shown at from lowest compression to highest, to allow you to directly compare the effects of the compression.
© Douglas E. Gray.
You can convert RAW, JPG, GIF images, prepare photos for the web with
ReaJPEG - batch
photo editing software and
raw converter.