A Few Thoughts on Image Compression

By
Multispeed


EasyWebGirls.com

There are two schools of thought in this area and I’m not saying which is better or advocating which one is best! In fact, I think as Adult Webmasters, we should be in the middle on this so that our sites are cleaner and faster!

Here are the common thoughts:

  • Some would rather their sites loaded faster, and are willing to sacrifice image quality for it.
  • Others believe that if you're going to use graphics on your site, you want it to look right, and it's not asking for much from a user to wait a few more seconds for higher-quality graphics to load.

    There are 2 widely used image file formats on the web - GIFs and JPEGs. (There is also a new format called "PNG", and though it's a very good one, it isn't yet fully supported, so it's rarely used today and isn't practical at the moment). Each has its own strengths and weaknesses, and the first choice you make when optimizing an image is choosing one of these formats.

    Here is a brief overview of GIFs and JPEGs:

    GIFs
    The GIF file format is a very simple format which defines an image to the web browser pixel-by-pixel. There are 2 methods in which the GIF uses to compress an image - first, it reduces the amount of colors in the image to 256 or less: this means that the less colors the image had to begin with, the better the GIF will turn out. The second method is that it saves large lower numbered color spaces in a compressed manner (without going into detail, basically this is done by saving a line of pixels as one file-cell, instead of many - so instead of showing 5 pixel in a horizontal row as "36, 36, 36, 36, 36", it will show them as ("36[5]").

    This can be taken advantage of by filling in large spaces with a single color or high contrast low number of colors images and still having a small file size. The types of images that would turn out well as a GIF are ones that don't have many colors to begin with, for instance - cartoons, line art, flat text, and large fill areas.

    Also, any image with contrasting shades (for instance, black-and-white) would look perfectly as a GIF, because you don't need more than the 256 colors, that a GIF allows in order to define shades. Actually, if the image only has one shade or high contrast, you should consider saving it using less colors, since a high contrast color or "black-and-white" image looks fine, and would take much less time to load.

    JPEG (or "JPG")
    The JPEG file format compresses an image by generalizing it.

    It averages out areas of the image, and gives you the "summary" of it. The JPEG format supports 32Bit color depths, so it's very useful for saving photos or images with many colors and shades.

    While with a GIF you can control a file's size by reducing/increasing the image's color depth (but only up to 256), with JPEGs you choose the level of compression when saving the file. The more compressed, the less detail it will have. The level of compression ranges from 1 to 100.

    It's a good exercise to take an image, save a copy of it (so you don't damage the source), and then save the copy in as many JPEGs with different levels of compression. That will give you a "feeling" of how JPEG compresses an image and what to expect from each level of compression (of course, the more images you try this on, the better you'll understand it).

    One of the weaknesses of a JPEG is that it normally won't "see" the exact color when it compresses the image, so if you save an image with a certain background as a JPEG, and then enter that image into an HTML with that background, there's a high probability that the backgrounds won't match exactly.

    The types of images that would turn out well as JPEGs are photos, general high-color images, and textures. The types of images that wouldn't turn out well as JPEGs are those that would most likely look good as GIFs -line art, flat texts, small details, and sharp contrast fills.

    Dithering" and Banding
    Two terms you'll need to understand before we go on are "Dithering" and "Banding".

    		•

    DFN Main ........................ Page 1
    The 411 Zone .................. Page 2
    Wenchy's World ............... Page 3
    This Weeks Tutorial ......... Page 4
    NPOW ............................ Page 5
    The DFN Lounge .............. Page 6
    Newbie Sandbox .............. Page 7
    The Back Page ................ Page 8
    The DFN Top Dogs .......... Page 9
    The DFN Weekly ........... Ad Rates

    Dithering is mainly used when saving images as GIFs, and can greatly increase the quality of an image, at the expense of a very little size. Banding is the averaging of colors by systems that don't support it.

    First, here's a dry explanation of banding:
    The great majority of internet users set their desktop color-depth to 16Bit. This means that if they were to view images with colors out of the 32Bit palette, these colors would show up as "near"-colors, not the exact hue. Normally this doesn't matter too much, except for Larger Images and gradient fills.

    Let’s be honest, most users buy rack computers like Dell, Compact, or Gateway. Even as video card prices have fallen and the prices are lower, unless they increase their monitors as well as the card to get better images, the card is sending 32 bit and the monitor is displaying 16 or struggling to display a higher concentration of colors but can’t. Although some may have bought $700 - $3000 monitors most still haven’t and wont!

    So let’s say the user's computer, video card or monitor can only understand the numbers in "10’s", and any number other than that, it will count as the closest it can understand.

    (For instance, 13 would be 10, while 19 would be 20). Now, you have an image with a gradient somewhere between 20 to 40, something like - 20, 22, 24, 26, 28, 30, 32, 34, 36, 38 and 40. If the user's computer could understand any number, it would show that gradient as it is. However, if it can only understand one-in-10 numbers, it would show the gradient as - 20, 20, 20, 30, 30, 30, 30, 30, 40, 40, and 40. This is a bit simplified but you can see what I mean! That was a "very" dry explanation, sorry, so here's a live example:

    While the right side of the image is a smooth gradient, the left side is "banded", meaning you can see bands of color instead of a smooth transition. A smooth transition is what someone with a 32Bit desktop color depth would see if they were shown a "perfect" gradient.

    By now, you may have checked your settings, and may have determined that you're using a 16Bit color depth... So why is the right side of the image smooth?

    That’s Simple, because it was "dithered". Dithering means blurring the lines between the bands of color by "throwing around" pixels. Think of the pixels in the image as grains of sand. Say you have 4 colors of sand with which to create a gradient. If you were to spread them one-by-one, you'd get 4 bands of color. However, if you would then mix the sand a bit in order to blend it, you'd get a smoother transition between the bands - and you'd still be using these 4 colors.

    Experiment for yourselves and see what you can come up with, it will help with many of your displays to entice more people to your sponsors by giving them better to look at and more pleasing displays!

    I hope this helps to explain some of the things we face as webmasters. I know many of you think this really doesn’t effect what you are doing, but if you experiment with things to see what you can do, this may help solve some of those conflicts and make life just a bit easier to deal with! };-))

    Multispeed

    "Well, art is art, isn't it? Still, on the other hand, water is water! And east is east and west is west and if you take cranberries and stew them like applesauce they taste much more like prunes than rhubarb does.
    Now, uh... Now you tell me what you know."
    Groucho Marx (1895-1977)
    Previous PageNext Page

    © 2001-2002 EA Ventures. All rights reserved.