Most beginning web designers have some difficulty with file formats, especially concerning images–I know I certainly did when I was starting out. There are three separate formats for images, and it’s hard to know which format is the best for saving image files that you’re going to display on your website, either as part of your layout or as part of your content. You don’t want the images to take two days to load, but you don’t want them to look like you used them for toilet paper, either. What is a web designer to do?

JPG: Best for Photographs, Not for Graphics

When I first started out, I read a few tutorials here and there about image saving, but I really took to the JPEG file format because it saved my images in such a small kilobyte size, which was and still is important to me. I was very impressed with how JPEG compression packed the image into such a small space that it transmitted well even over a dialup connection, so I began using .jpg format for all of my layout images, content, everything. It’s sort of the same principle as admiring someone who’s managed to pack a ton of stuff into their suitcase–you sit there wondering “How’d they do that?” Little did I know how much JPEG had left out of my images–like people leaving half their outfits at home to save space.

I don’t claim to know how JPEG compression works, but for the most part, it tends to leave a good bit of information out of your image, especially when you save it as a JPEG and choose “Low” or “Medium” quality. The blown-up versions of the two images at the first of this section show you what results from saving an image at “Low” or “Medium” JPG quality:

From left to right: Low: 2.70 KB; Medium: 3.74 KB

As I’ve heard it described, JPEG, especially low- or medium-quality JPG, is a “lossy” format–it’s like your image’s “suitcase” has a hole in the bottom. It sure is lighter when you get to your destination, but there’s a reason for that–the style of compression leaves out some of your image’s pixels to make the file smaller. The JPG file format doesn’t work very well for layout images and small icons because it tries to make up for all the pixels it left out, leaving your image rather pockmarked and subtly polka-dotted with oddly-colored pixels. Once you go up the quality scale, however, you get much better results, but you’re going to have to have a bigger file size, as shown below:

From left to right: High: 5.99 KB; Very High: 8.72 KB; Maximum: 13.7 KB

The blown-up versions below show how much better the image is constructed:

From left to right: High Quality, Very High Quality

Maximum Quality

But do not despair–JPG is absolutely wonderful for photographs, for some odd reason. I’ve taken to using JPG sparingly or not at all in my layout designs unless the layout features a full-color photograph or two, and if I have lots of pictures, I’ll use JPG to compress them without losing too much. (I find that JPG “Very High” quality blends the best of both worlds–smaller file size and good-looking product.)

GIF: Best For Icons and Little Graphics

I used to never touch GIF files except to make random little animations. I thought the file format was overly bloated–certainly its files were usually twice as big as JPG files of the same item. Little did I know, the format was actually going to prove quite useful to me! It may not be as good as JPG at compressing files, but it is great for making your layout tick.

As you can see below, there are four different sub-formats within the GIF format type. Again, I don’t claim to know how each of these works, but I have noticed that “Perceptual” and “Selective” generally turn out the best results; “Adaptive” and “Restrictive (Web)” make me die a little inside, as a web designer, because of the loss of colors. These formats generally correspond to how many colors make up the palette that the image is created from; “Restrictive (Web)” pulls from the smallest palette.

From left to right: Perceptual: 5.77 KB; Selective: 5.75 KB; Adaptive: 5.83 KB; Restrictive (Web): 2.49 KB

For certain, GIF files are terrible when it comes to full-color photographs. But they are wonderful for creating tiny layout graphics that would have otherwise been mistreated by the wrong end of a JPG format. I have used the GIF file format to make some of my first semi-transparent images, as well as the well-beloved transparent “spacer” image. Also, I still use GIF format here and there to make small but readable icons, as well as some of the infographics for my articles.

PNG: Best for Big and Detailed Graphics

Now we come to the file format that is my favorite for web designs as of late. It used to be that I couldn’t even open PNG files on my computer at all–it would load an error message if I went to a site that had PNG files as part of its content or layout. But that was in the dinosaur days of design, I suppose–nowadays, PNG is the great beautifier of the Internet, doing well at saving fully-colored graphics with an even smaller file size than GIF usually can.

PNG-8: 5.43 KB

This image is exactly the same as the GIF image, but PNG saved it with a few less bytes than even the smallest of the quality GIFs (excepting “Restrictive”, which is tiny file size at the cost of a good-looking image). Again, not sure why there is this difference, but I like it–anywhere I can save on file size without losing quality is great for creating a fast-loading and good-looking website.

It also seems to me that PNG does a better job of maintaining the colors I use in my designs. Sometimes, when I save a layout’s pieces in JPG or GIF (and especially GIF for some reason), the colors in the image change, just slightly, just enough to throw off my CSS color codes and make me have to go back and resample the image for my colors. Now, with PNG, I find myself more able to go straight from Photoshop to Notepad to code, and not ever have to refer back to my image for colors, because they’re right on target!

As for using PNG-8 versus PNG-24, I find that PNG-8 does most of what I need it to do. However, if my image just HAS to be highest quality or has transparency in it, I choose PNG-24–it may add half again to the kilobyte size, but it produces the smoothest-looking image. Compare the two below:

From left to right: PNG-8: 5.43 KB; PNG-24: 11.7 KB

Lastly, PNG seems to be better than GIF at handling transparency and not having strange chippy pixels on the sides of the supposedly-“transparent” image or icon. See evidence of this goodness below:

From left to right: Perceptual GIF, Selective GIF, Adaptive GIF, Restrictive GIF

From left to right:  PNG-8, PNG-24

Summary:

If you’re not sure what kind of file format your images need to be in, remember that JPGs are best for photographs, GIFs are best for simple web graphics (icons and the like), and PNGs are best for detailed web graphics (big layout pieces). These simple tips will save you tons of time working on and saving your images!