• Jun

    How to Understand Web Page Graphics & File Compression


    Web page design has become one of the most potent marketing methods of our time, but along with the opportunities are many potential problems. Here, you will learn how bitmaps work, when to use JPEG, GIF, and PNG formats and how to create Web page graphics that load quickly. This information will help you get the best results with your images.

    How Bitmaps Work

    When you look at a bitmap (a.k.a. a raster image) under extreme magnification, you’ll see that it’s a grid, or rows and columns of pixels. Each of these pixels contains a color, which, when viewed at a distance, creates an image. At a distance, this works well, but when you zoom into an image it will eventually become “pixelated” or will “fall apart.” This means that the pixels will become more obvious as the image is enlarged. When using bitmaps for the Web, it’s best to use images at the same size at creation or to reduce them. This will reduce or eliminate the above issues.

    On the Web, it’s important to reduce images to as small a size as possible while still retaining the quality of the original. To make sure you get the best results, here are a few things to consider: Be aware that the final compressed file will depend on the subject matter in the original image. An image with large areas of similar colors will compress more than a complicated image where there are plenty of colors and lots of transitions. As an example, an image with a clear blue sky will compress more than an image filled multiple textures and patterns.

    In the next section, we look at the different formats available to you when compressing files for the Web. These most popular formats are JPEG, GIF and PNG.


    The acronym JPEG (Joint Photographic Experts Group) is used to describe a 24-bit file format designed for compressing photographs, photo-realistic artwork and grayscale images. JPEG is designed for use with still images only and is an excellent format for reducing the size of your images; it also stores image data as a 24-bit format. JPEG also supports 32 bit files as (CMYK) and 8 bit grayscale files.

    If you want your Web sites to load quickly then effective file compression is really important. To understand a bit about how this process works, one needs to think about how big the files will be for Web pages. On the Web, you will be working at “screen resolution.” This is variable across systems so there’s no set resolution to use.

    JPEG is a great choice for sharing images cross-platform. On the down side, JPEG is referred to as a “lossy” format, meaning that each time the image is saved, data is discarded.

    If you save the image too many times the image could develop artifacts, which is where portions of the image begin to clump together. This is to be avoided if possible. Maximum quality JPEG is for all practical purposes lossless and a viable format for many high-end uses but this isn’t recommended when saving files for the Web. Another down side is that it’s not possible to make JPEG images transparent, unlike the GIF or PNG formats.

    Another issue is aliasing, a staircase effect on the edge of images, sometimes referred to as “the jaggies.” This can be evident if you use a high quality setting.

    JPEG works well with full color and grayscale images, and other work such as continuous tone drawings. It’s not the best choice for line drawings, images with a few colors or cartoons. In this case, GIF or PNG-8 would be a better choice.

    In the next article in this series we’ll look at web compression in more depth and provide some sample images

    © Nathan Segal 2013

    No Comments

Leave a reply