Optimising JPEG Images

Published on 2001-08-11 by John Collins. Please follow me on Twitter for more: 

DEMO:

This image has a minimum amount of compression (94% of original), while extra colours remain intact. Size: 81k.

This image is compressed to 30% of the quality of the above image, creating a dramatic drop in file size and therefore download time. Size: 15k.

With this final image, the compression rate is left unchanged at 94%, but certain regions of the image (notice the background, for example), are blurred to aid JPEG compression. The blurring lessons the detail of the image, therefore reducing the file size. Furthermore, extra colours in the image are removed. Size: 27k.

NOTES:

JPEG compression allows the designer to strike a balance between image quality and download times. Nobody on the Net is prepared to wait an eternity for a page to load, and the largest factor in page weight is graphics. From the above examples you can see that their are many variations on achieving JPEG compression. Quality should not deteriorate too much, but file sizes can be reduced dramatically.

Most good image manipulation packages allow you to carry out such changes to your JPEG's. Furthermore it is worth mentioning that a new version of the trusted JPEG is in development, "JPEG 2000". It promises to achieve even greater image compression with a smaller loss in quality, let's hope it delivers on it's promise soon.


Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes. Almost two decades later, looking at the above sample images on my 4K monitor they all seem blurry! In reality, increased broadband capacity has reduced the need for increased image compression, even on cellular networks. It is interesting however to note that "JPEG 2000" is still in use today: https://en.wikipedia.org/wiki/JPEG_2000