Image Formats Every Web User Should Know

Posted by: Rea Maor In: Internet and SEO - Thursday, February 15th, 2007

You might have wondered why we can’t just settle on one file format to store images in and be done with it. The problem with that is that we all want two things in an image format: we want perfect image preservation, and we want them to load instantly. It turns out, computers being the beasts that they are, that these two goals are incompatible with each other! Add to this the jungle of corporations patenting their image technology, and you have the soupy mess we have today.

Image formats get their speed by compression, where a code to make the image data take up less space in memory is used. The higher the compression, the faster it loads, and the worse the image quality gets. So, from (roughly) fastest to best quality:

JPEG – The most common format used on the Internet today. It is the fastest loading, and it uses “lossy” compression. It takes up the least file space, up to 1/20th of the uncompressed file size! But images saved in JPEG format tend to get blurry and speckled over time, as the image file loses color information. this especially after it’s been saved and downloaded several times.

GIF – While GIFs do use a lossless compression method, they pay a price for it by being limited to a small color index per image. Thus, saving an image from another format into GIF presents it’s own challenges, as the colors will be translated into the new format’s color index, and possibly changed. The main benefit to GIFs is that they have frame animation built in and can have transparent parts.

PNG – The highest-quality image format seen on the web – and consequently the slowest to load and the biggest memory footprint. The good news is that now that Microsoft has released Internet explorer 7, all web browsers at least fully support PNGs. PNGs are crystal-clear in quality, and can support transparency, but they do not allow frame animation.

The original PNG.

A JPEG version of the image, saved a few times.

An indexed GIF version of the image.

Last of all to mention is SVG. SVG is the scalable vector graphics standard, and it is certainly the wave of the future. But as far as the web browser is concerned, the future is very far off. Almost no web browsers can directly display SVG, and it is extremely slow besides. But it is superior in many ways, since it represents image elements as scriptable objects rendered directly in the image browser, unlike the three former examples which are raster graphics.

There are many more image formats, but they don’t matter much to the web beyond file transferring. For web page display, your best options are: JPEG for photographs and very large (desktop-wallpaper-sized) files. Never save an image you intend to edit in JPEG. GIFs are good for simple web graphics (such as banners and buttons) because you can have them in a shape besides ‘square’, and also animations. PNGs are needed only when sharp quality is crucial, and are necessary for long-term storage of an image you intend to edit.

Related Posts:

3 Responses to “Image Formats Every Web User Should Know”

  1. webjourneyman Says:

    You must be getting sick of me being the only commenter, anyway. Strange things about PNGs, when I save one and then try to open windows has to ask what program to use. I used to think gif was the best option. I once had a site that was very image heavy, turning every jpg into gif seemed to save a lot of space but I did not notice any noticable change in image quality.

  2. Rea Maor Says:

    Yes, well.. hopfully more will post soon 🙂
    as for your question, it might be a Registry problem (PNG files not being associated with ANY graphic program).
    you can solve this very quickly, just double click on the PNG file and when it asks you what program you wish to use, make sure you tick the box “always use this program” and choose your favorit Graphic editor.

  3. Cheryl Says:

    I was reading your stuff here Rea and was going to just remain silent until I saw your friend mention being the only one here

    So here I am to let you know I am reading it too!

    I learn alot by just reading stuff you have on here.

    Being self taught on all this stuff, it helps when someone like yourself takes the time to explain things. So thank you!!!!

Leave a Reply