HTML and CSS Reference
Would the real image format please stand up?
This week's interview: Image formats mix it up
Head First: Well, hello everyone. I think this might be
the first time we've interviewed three interviewees at once!
GIF: Sounds like complexity to me—more things for your
users to remember.
JPEG: Hey there, and hey to GIF and PNG.
PNG: Well, GIF, wouldn't the world be nice if we could
fit all images into 256 colors? But we can't.
GIF: I'm not sure why I have to share the interview
couch with these other bozos. Everyone knows GIF is the
original image format of the Web.
GIF: Hey, for line drawings, figures, that kind of thing, it's
often very easy to fit images into 8 bits, and for that I look
JPEG: Ha! As soon as you get good at representing
complex images, like photos, maybe then people will take
you seriously again, but I'm not sure how you're going to
do that with only 256 colors.
JPEG: Ha, when is the last time you saw a photo stored
in GIF? People have figured out your downsides, GIF.
GIF: Did I mention I can be transparent? You can take
parts of me, and anything behind me shows right through.
Head First: PNG, help us out here? You've been kind of
quiet so far…
PNG: You can't compete with me on that one, GIF. I can
set any number of colors to transparent; you are limited to
PNG: Yeah, it's easy to be quiet when you're #1. I can
represent complex images like JPEG and I'm also lossless
like GIF. Truly the best of both worlds.
GIF: One color or many, who cares? One is all you need.
Head First: Lossless?
PNG: Not if you want to have anti-aliased transparent
areas in your image!
PNG: Right; when you store an image in a lossless
format, you don't lose any of the information, or detail, in
PNG: Yeah, you know, because I allow more than one
color to be transparent, so you can have nice soft edges
around the transparent areas.
GIF: Me too! I'm lossless too, you know.
Head First: Well, why would anyone want a lossy
Head First: That sounds like a nice feature. Can you do
JPEG: There's always a tradeoff. Sometimes what you
want is a fairly small file you can download fast, but that
has great quality. We don't always need perfect quality.
People are very happy with JPEG images.
JPEG: No, but I'm not too worried about it; there aren't
many photos you'd want to do that to. That's for logos.
PNG: Hmmm, I'm seeing my transparency used all over
PNG: Sure, sure, but have you ever looked at lines, logos,
small text, solid colors? They don't look so great with
Head First: Well, I'll have to think twice before doing a
three-person interview again, but it sounds to me like GIF
and PNG, you're great for logos and text images; JPEG,
you're great for photos; and PNG, you come in handy if
we want transparency as well as lots of colors. Bye!
Head First: Wait a sec, JPEG raises an interesting issue.
So GIF and PNG, are your file sizes large?
PNG: I'll admit my file sizes can be on the large size
sometimes, but I provide three formats so you can right-
size your images: PNG-8, PNG-24, and PNG-32.
PNG, JPEG, GIF: Wait, no, hold on!!!