There are a great variety of image formats available. Choosing the right format for Web graphics is simplified by the fact that browsers support only three image formats: JPEG, GIF, and PNG. Which format should you use on your website? That depends on the type of image you have and what you want to use it for.

How are Images Represented Digitally?

Digital images are made up of rows and columns of pixels. Each pixel is a specific color. When these pixels are displayed on the screen as tiny rectangles, or printed on paper as tiny dots, very close together, they give the appearance of smooth transitions of colors as though a finished photograph or painting.

The larger the image, the more rows and columns of pixels are required to represent the image. The more rows and columns of pixels, the larger the digital image representation will be.

Each pixel is assigned a color number. Each possible shade of color must be represented by a unique color number. How many different possible shades of colors are there? That depends on the color depth used in defining the image. When an image is represented with 8-bit pixel depth, there are only 256 shades of colors available and each color value is represented as a relatively small number. When the range of colors are defined as “truecolor”, 24-bit pixel depth, there are 16 million shades of color. With truecolor, not only are more unique shades of colors likely used in the image, but more space is required to hold each of the large numbers representing the colors used. So the larger the pixel depth, the larger the digital image representation will be.

Image Compression

If images were stored by saving each individual pixel with its own color value, the file size would be gigantic. There are some obvious steps that could be taken to help reduce the file size. For example, suppose 10 consecutive pixels were the exact same color. Much space could be saved by storing the color number once and indicated that the color should be repeated 10 times.

There are many techniques used to reduce the amount of space required to represent the pixels of an image. Different formats have been developed for compressing images, each using different compression techniques, each with their own advantages and disadvantages. Some compress large blocks of solid colors better. Some make decisions to throw out some color values in order to make the file smaller. Some handle wider ranges of colors better. Which format you choose should depend on the type of image you have and how you want to use it.

GIF vs. JPEG

The GIF format is great at compressing images that have large solid color areas, such as clip art. The JPEG format can’t compress those types of files as well as GIF can. So, unless you need a different format for some other reason, save clip art related images as .gif files.

The JPEG format is very good at compressing images with varying shades of many colors, like photos. The GIF format can’t compress those types of images as well as JPEG can. So save photographic images as .jpg files.

Transparency

GIF has one other feature not offered in most other types of image file formats: GIF allows you to specify a transparency color. This is especially useful when working on clip art for a Web page that has a colored background. If saved with a transparency color, the transparent areas in the .gif image will show the color(s) of whatever background is behind it.

Image Quality

When saving an image in JPEG format, you are usually given the option to choose an image quality. If you choose an image quality less than 100%, some image data will be removed, probably by combining very close shades of colors into one color, and the resulting image file will be smaller. Often reducing the image quality to 80% will reduce the file size by 50%. It is important that you keep image file size as small as possible when creating images for the Web. Larger images files make Web page take longer to load.

Computer monitors display images 72 dots per inch (Mac OS), or 96 dots per inch (PC). Home printers print images 200 dots per inch. Professional printers print up to 600 dots per inch. Therefore, images meant for a Web page rather than for print do not need to be nearly as high a quality. The human eye may not detect any reduction in image quality when the image quality is reduced to 80% and the image is displayed on a computer monitor.

PNG

PNG is a newer image file format. It was designed to replace GIF, and therefore is also great for compressing clip art images. It has more capability and compresses files better than GIF. It also supports transparency. In fact, it supports variable levels of transparency. You might think there is no longer a reason to save images in GIF format because PNG is a better image format. However, the biggest disadvantage to PNG is that it is not fully supported by all browsers. GIF has long had wide support, so if you don’t need any of the extra capabilities of PNG and if the generated GIF file isn’t very large anyway, you might be better off using GIF format instead of PNG.

Animated GIFs

There is still one capability in GIF that is not supported in other image formats, not even PNG. Multiple GIF files can be saved as a single animated GIF file. When displayed, the browser loops through all the images in the file, giving the appearance of animation.

Conclusion

Save photographic images as JPEG files with 80% image quality, and save clip art type images as GIF files. If you need a transparent background, use GIF files. You may use PNG files on your Web pages, but be aware they they might not be fully supported on all browsers. If you want an animated image, create it as an animated GIF file.

Related posts:

  1. Free Web Space
  2. What are Cookies and Tracking Cookies?
  3. Create Your Own Icons

About the Author


5 Responses to Web Graphics: JPEG, GIF , or PNG?

  1. Carl says:

    Big follower on this page, numerous your blog posts have definitely helped me out. Looking towards updates!

    • Thank You! I had to learn such a broad range of techniques when I was learning to sell my first programs on the Internet, that I was hoping others would find this information useful too.

  2. Jacken says:

    Better the devil you know than the devil you don’t.

  3. [...] JPGTask 1- Images;sourcing,digitising and defects. Image formats (3)Top web-optimized image formatsWeb Graphics: JPEG, GIF , or PNG? var [...]

  4. Dear Godtlandsoftware,
    I take your point, Internet marketing has gained a lot of attraction and reputation for buying, selling, and promoting a product. Websites play a vital and crucial role in Internet marketing because without a good website, you cannot develop your business.
    I’ll be back to read more next time

More Do-It-Yourself Java Games

More Do-It-Yourself Java Games: An Introduction to Java Graphics and Event-Driven Programming is the second book of the Do-It-Yourself Java Games series. You'll learn to create windows and dialogs, to add buttons and input fields, to use images and drawings, and to respond to keyboard input and mouse clicks and drags. You'll create 10 more games including several puzzles, a dice game, a word game, and a card game.

This book assumes you either have an understanding of basic Java programming or you have read the first book, Do-It-Yourself Java Games: An Introduction to Java Computer Programming. Read more.

Do-It-Yourself Java Games

Do-It-Yourself Java Games: An Introduction to Java Computer Programming uses a unique "discovery learning" approach to teach computer programming: learn Java programming techniques more by doing Java programming than by reading about them.

Through extensive use of fill-in blanks, with easy one-click access to answers, you will be guided to write complete programs yourself, starting with the first lesson. You'll create puzzle and game programs like Choose An Adventure, Secret Code, Hangman, Crazy Eights, and many more, and discover how, when, and why Java programs are written the way they are. Read more

Step-by-Step Tutorial

Many of the tips, techniques, and tools discussed in this blog are demonstrated in a detailed step-by-step tutorial in the book, This Little Program Went to Market, by Annette Godtland.

The book takes a computer program through the entire process of creating, deploying and distributing a program, then selling and marketing it (or any other product) on the Internet. Read more.