Do You Know Your Web Images? A Primer for the Beginner

In blogging, you need to a little about a lot. Take images in your blog posts, for example: there’s definitely a learning curve. Novice bloggers often don’t take into account how little they know about digital images.

Image File Types

There are three main image file types: GIFs, JPEGs, and PNGs.

GIF stands for Graphic Interchange Format. Its file extension is .gif. It’s pronounced like a word, with either a hard or soft “G”. GIFs can only hold 256 colors, which makes them lousy for detailed photos but excellent for logos and line art. GIFs can have a transparent background and they may be animated. You can create GIFs in image-editing software like Adobe Photoshop, Adobe Illustrator, GIMP, and others.

JPEG stands for Joint Photographic Experts Group. Its file extension is .jpg. It’s pronounced like Jay-peg. JPEGs hold 16 million colors, making them ideal for digital photographs. In fact, most digital camera images are JPEGs. You can edit JPEGs in Adobe Photoshop, GIMP, Google Picasa, and many other software programs and even some online services like Splashup and Flickr’s Piknik.

PNG stands for Portable Network Graphic. Its file extension is .png. It’s pronounced ping. PNGs are ideal for a couple reasons, but they also have drawbacks. PNGs support millions of colors like JPEGs, but they also support transparency, like GIFs. In fact, they even do GIFs one better by offering partial transparency. GIFs only offer full transparency as a substitution for a single color. That may sound wonderful, but hold on. PNGs are often larger file sizes, which is always a concern on the web, because larger files take longer to download and display in a web page. Also, Microsoft Internet Explorer 6 cannot properly render transparency in PNGs. Internet Explorer 7, Firefox, Opera, and Safari have no trouble with PNGs. You can create PNGs in Adobe Photoshop, Adobe Illustrator, GIMP, and other programs.

Image Optimization

You can’t just slap that full-sized picture from your digital camera into a blog post. Well, you could, but it’s not a good idea, is what I’m saying. You need to optimize it first. Optimization reduces the physical dimensions and also the file size of pictures so they’re appropriate for web pages.

Optimizing JPEGs

In JPEGs, detail is removed in 8-pixel blocks within the image. If overdone, this produces “artifacts” in the image that look pixelated and distorted.

Normal JPEG:

Over-optimized JPEG:

Optimizing GIFs

GIFs are optimized by removing some of their colors. For example, by going from 256 colors to 128, the smooth gradient is lost in this picture. It looks striped:

If we severely over-optimize it, it looks like this:

And remember, GIFs can be animated. This one’s just for fun:

Optimizing PNGs

There’s really not much you can do with PNGs other than say whether or not they have transparency and then set them for 24-bit or 8-bit. This is partly why they’re hard to optimize into small file sizes.

To PNG or not to PNG? Fewer and fewer people are using Internet Explorer 6, making PNGs a more appealing option. However, remember that they’re often still larger files than JPEGs or GIFs.

All the images in this post were edited in Photoshop.

Written by Michael Martine from Michael Martine
Posted on January 31st, 2008 and filed under Blogging
Do not forget to subscribe to our RSS feed for updates

3