Impossible tri-bar

Digital Phenomena - Your first stop for internet consultancy 
Site Building


Lesson 1
1  Site Optimization Tutorial — Lesson 1
2 Don't Need It? Don't Use It.
3  Image Formats
4 JPG and PNG Basics
5 Standard Image Compression
6 Advanced Compression Techniques
7 Faster Than a Speeding Progressive Download
8 Cache Is Your Friend
9 Size 'Em Right

Lesson 2

Lesson 3

Lesson 4

Site Optimization Tutorial
Lesson 1

by Jason Cook

Page 3 — Image Formats

Unless you're bent on evoking that retro-fly ARCHIE or GOPHER feel, you're probably going to be using some images on your pages. Just follow a few simple guidelines as you generate your images, and your pages will download in record time.

To begin with, decide whether a given image ought to be a GIF, JPEG, or PNG. This may seem elementary, but it's a mistake that's still slowing down a good percentage of Web pages out there.

GIF is the oldest and most compatible file format for pictures on the Web perfectly suited for smaller graphics that need to look crisp and clean, but don't need more than 256 colors. GIFs can also be saved with one "transparent color," allowing them to have irregularly shaped borders. Simple company logos, icons, and navigation buttons are good examples of graphics that should be saved in GIF format.

Now, PNG is a lot like GIF — in fact, it was developed to be a patent-free alternative to GIF, created with the same sort of uses in mind. PNG builds on GIF's basic features, with improvements like more colors, fancy multilevel transparency (ideal for delicate drop-shadow effects), even gamma-correction, which ensures that colors look the same on Mac, Windows, and Linux computers. Best of all, not only are PNGs just as good as GIFs in almost every way, but PNGs use better file compression so they're smaller files which load more quickly.

In short, PNG is an excellent substitute for GIF, built to handle the same types of graphics (logos, icons, irregularly-shaped items, et cetera) better and faster. There's just one BIG drawback: a tiny, tiny percentage of browsers won't display PNGs at all! And, because of this, hardly anybody uses PNGs yet.

So should you risk stepping up to PNG just to make your pages faster? Well, probably, "Yeah!" We'll come back to that decision, but first, let's talk compression basics, and see how underdog PNG and old-timer GIF stack up against JPEG, the hulking file format that crushes photo-realistic data into teensy-weensy files.

next page»

|Home|About Us|Services|Search|
W3C validatedW3C validated CSSCompatible with all browsers