Image types and their compression: 2. png

31/12/2009

This post is a continuation from my previous post – so please refer to the chapter about jpegs for an introduction.

2. png image

The Portable Network Graphic [Wiki link] is probably the flavour of the decade, if not much longer into the future. Most web developers love them for their capacity to achieve impressive compression results without any loss of quality – or so everybody claims… This is actually not entirely true! But:

png files will compress any vector based image much better than any other format suitable for internet publication! If you want to publish a photo with a lot of detail you are still better off saving it in its native jpg format. Unless you are a professional photographer, and you can afford the bandwidth, it doesn’t make much sense to save a photo as png – the resulting file size could be easily up to 10x as large.

Another constraint, you might encounter, is that many graphics programmes are fairly limited in their support of the png format; they will save in the png file format, but often don’t offer full support for all the features listed below.

All this said png files offer some amazing advantages over any other image file format:

  • png will compress all drawings, banners, buttons, and other vector based graphics much better than any other format,
  • png files are compressed with no loss of information,
  • you can set transparency to any colour in a png file (see samples below)
  • the png format offers full colour support of up to 48 bits per pixel,
  • a png file can also store an alpha value for each pixel, which specifies the degree to which the colour of that pixel is blended with the background colour,
  • png files can contain gamma correction and colour correction information so that the images can be accurately rendered on a variety of displays,
  • you can easily resize a png image without visible distortion (more about this use later).

The png format was actually developed with the intend to replace the gif format (my next chapter) – let’s see the differences:

button in png format

png file

button as jpg

jpg file

button gif file

gif file

animated button

gif animated

button png resized

png resized to 25%

button gif resized

gif resized to 25%

O.k., the first thing you will notice is that the background of the jpg is grey; that’s because grey was the background colour of the original image, with a jpg you cannot assign any transparency. With both, gif files and png files, you can set a transparency, like in this case where I made the background transparent because I want to place the image on a white page (the same would work with any other page colour). This is also a great feature if you want to change the colour scheme of your web site and keep using the same irregular shaped images (like bullets and icons): they will display exactly the same on your new background colour.

The other thing you might notice is that one of the gif images is blinking; that’s because I have animated this image (more about the process in my next chapter about gif files). What you might not notice with this button image is, that gif files are limited to 256 colours (8 bit colours). That wasn’t a problem in the days when they were first developed, because back then no computer monitor could show any more colours. Now most of us probably have our monitors set to 32 bit colour, or even 64 bit, in order to have the full spectrum when we view our photos or movies.

The final thing you will notice is that at the end of the row I have added 2 pictures at 25% of their size. Now I believe I have told you before that you should not resize images in the browser, but always make them to the size you intend to display on your web page – this statement is still true because for example a photo at around 2800 x 2100 pixels (roughly the size a mid quality digital camera produces) is ± 2,000 kilobytes (or 2 mb) in file size, the same photo resized and slightly compressed at 800 x 600 pixels will be most likely around 100 kilobytes = it will load much faster and save you bandwidth (for which you might have to pay your host).

So why did I resize these 2 images? Am I crazy? Not quite… You see, with a small element, which you might want to repeat on several of your pages, it is a different story: once you have displayed it the first time the visitor’s browser has downloaded this file and cached [Wiki link] it in its memory. The next time you show the same image, in its original size or resized, the user’s browser doesn’t have to reload this image another time – it doesn’t take any time and doesn’t use any extra bandwidth. For bullets and icons this is a perfect solution, because you can even resize a repeat image in another location on your pages. png files are very easy to resize, providing you keep the aspect ratios the same (eg. a 100×40 pixel image resized to 50×20, not 60×20 pixels!), and don’t show distortions if you do so (compare with the ‘E’ in the gif)!

To summarise:

1. png compression is free of any loss of information. You can also resize your png without distortions.

2. png is a great format for vector based images, like drawings, buttons, etc. It’s not such a good format for photos.

3. you can set many different values when saving your png, one of the most important is transparency, so that you can place images with a rounded or irregular outline (like icons) on any page background.

Next time I will write about gif files, and later I will add a side-by-side comparison of the 3 formats.

Add to 

FacebookAdd to DiggAdd to 

Del.icio.usAdd to 

StumbleuponAdd to RedditAdd to 

BlinklistAdd to 

TwitterAdd to 

TechnoratiAdd to Yahoo 

BuzzAdd to 

Newsvine


Image types and their compression: 1. the jpeg

29/12/2009

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