Image types and their compression: 1. the jpeg


If you publish a web page you can insert different types of image files; the most common file formats are jpg, png, gif, and some might consider forms of swf (Flash files) as an image format.

If you’re confused which one to use on your page I would like to give some advice and demonstrate the differences.

Lets start with the one you probably know the best:

1. the jpg (or jpeg) image

pronounced: JAY-peg

Chances are that you own a digital camera, and the files on your camera are stored in the jpg format [Wiki link].
This format is best suited for photos or other graphics showing smooth variations of tone and colours.

In general a jpg file will compress reasonably well for display on web sites, but it is very common to see quality loss from compression. Be careful when applying compression to any image which contains shades of red or purple, as these tones show artifacts from compression the earliest!

image with 70% compression

The photo on the left has minimal compression applied to it, the second on the right is 70% compressed. The effect will show even better with text on an image.
Unfortunately I cannot show the full effect since the WordPress server is already applying a pre-set compression value to my images, so the ones with little compression look worse than intended!

text with 5% compressiontext with 70% compression
Take a close look at the different colours of text: obviously the red is showing the strongest noise from compression, white is still fairly clear, and the blue text comes out the best in this test.

So what can you learn from this?
1. You want to create your own header image for use on a web page: if you want to overlay a photo with some text, like the name of your business or the title of your web site, then you should choose a colour which compresses well so that your text stands out clearly; the best choices for this are black, blue, yellow, and white. – in most cases in this order.

2. The more shades of red you have in a picture the more difficult it will be to strike a good balance between compression and file size. In general you get nice and clear photos with a compression ratio of between 10-22%. Any more and most files will show the effects of compression.

And don’t forget to set the dpi value to 96 dpi – more about this in a later post (for today it has to be sufficient to know that monitors cannot display any more, and a higher value will increase the file size dramatically)!

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

3 Responses to Image types and their compression: 1. the jpeg

  1. webbeetle says:

    There’s still some conflicting information on the internet regarding the dpi value for web images. Most people use only 72 dpi when saving for the internet; this value standard came into being because all older Apple computers had a screen resolution of 72 dpi, and text created on an Apple monitor at 72 looked almost identical in print. All Windows based PCs and newer Apples have a resolution of 96 dpi! In the end it doesn’t matter very much which value you are using since computer monitors render images differently – just don’t go above 96 dpi…

  2. Panos says:

    Hope some day you will take heed of what I suggested in the wp.com forum and improve your post. Example here:

    Image quality

    • webbeetle says:

      The images WERE NOT RESIZED during wordpress upload – they were created in exactly the size they are displayed on the page!
      Do I really have to send you the originals to verify???
      I will NOT upload images without width or height definition as I have learned that this slows down the browser as it first has to calculate how much room there is needed to display the image (or re-render the page once image is fully loaded).
      [Since you don’t great no greating from me neither.]

Leave a comment