?

Log in

No account? Create an account

Previous Entry | Next Entry

As most (if not all) of you already know, GIF, JPEG and PNG are the image file formats LJ allows for icons. These same formats are, of the various formats web browsers will render, also the most common and accepted out on the Web at large. Every once in a while someone will post asking about which type of file is the best. When this happens many of the responses contain unsupported opinion ("JPEG rules, PNG drools!") or misinformation ("PNG doesn't support transparency."). What follows is an attempt to address this problem by bringing together in a single post all the basic information on the features of each image format, along with recommendations on the uses for which each format is best suited.

Using the table below we can see what each image format is capable of, and through comparison of features we can also figure out what each image format does well or poorly.

GIF JPEG PNG
Compression Lossless (lossy compression option available in Photoshop/ImageReady) Lossy Lossless
Number of Colors Up to 256/8-bits Up to 16 million/24-bits Up to 16 million/24-bits (PNGs can exceed 24-bit color, but for practical purposes 24-bits is the maximum.)
Indexed Color Yes No Color is indexed at up to 8-bits (maximum of 256 colors). Color is not indexed at greater than 8-bits (257 to 16 million colors).
Transparency Yes, single color No Yes, alpha (variable) transparency
Animation Yes No No
Color Management No Yes Yes

More About GIF

One obvious thing GIFs are good for is animated images. If your heart is set on making a mini-movie or a loop of Master Shake moshing to Kelis, GIF is your only option (until MNGs are supported by LJ). GIFs make decent still images as well, and the size in bytes of a still icon in GIF format is very small, but with the restriction on the maximum number of colors GIFs are best for line drawings and other kinds of simple graphics where photorealism isn't needed. A photorealistic icon might contain thousands of colors (if every pixel in a 100x100 icon were a different color from every other pixel, the icon would contain 10,000 colors), and if you want to keep the detail you've got to go with either JPEG or PNG.

In the table I note that there's a lossy compression option for GIF in Photoshop/ImageReady. I never use it because in my experience too much quality is lost even when it's applied lightly. Other folks here have had better luck with it, so if you use Photoshop and ImageReady don't be afraid to experiment with it (and the other GIF optimizing options).

More About JPEG

JPEG is the format you're likeliest to encounter when looking at someone's online photo album, getting an archive of movie screencaps from cap_it, or surfing for pr0n. ^_~ JPEG is a decent format for photorealistic icons, but with one caveat: If the JPEG is highly compressed you'll get a nice small file, but you'll also get an ugly icon. Due to its use of lossy compression, JPEGs degrade in appearance as the file size is reduced. If you want to save your icons as JPEGs, try to use as little compression as possible. Another compression-related problem is degradation over time due to repeated compression. If you open a JPEG, edit it a bit and save it, then edit it more and save it again, then edit it even more and save it a third time, each time a save happens the file gets a fresh round of compression, causing a bit more information to be lost. If you want to save your icons as JPEG, save a master copy of the icon in either your image editor's native format, or as a PNG. Always go back to that master copy to edit and save your JPEG copy just once, and always as a separate file from the master. Even if you set your compression level to 'none' in your image editor, some teensy little bit of compression will still be applied and some teensy little bit of information will be lost. Lossy compression is inherent in the JPEG standard and it cannot be turned completely off.

Referring back to GIFs, if your icon is simple, like line art or other styles of imagery with clean lines and relatively few colors, saving as JPEG is not a good idea. The compression artifacts that may be very hard to see in a photorealistic image stand out like hundreds of tiny sore thumbs on a line drawing. GIF and PNG are both much better suited to low color, simple icons.

More About PNG

For still, photorealistic icons, I think PNG is the best format, and it also works for low color line drawings and the like. The lossless compression used by PNG will generally get an icon in at under 40K and do it without compromising the quality of the image. PNG is not as good for making larger images like headers in that the lossless compression may not get you enough reduction in file size to make the image friendly for download on a slow connection (although if a large file size doesn't bother you or your audience, go ahead and make your headers PNG). OTOH, PNG is fine for large images to be used in other ways, especially for screencaps. Few capping programs will save to PNG, but many will save to both BMP (Windows Bitmap) and JPEG. If the capping program only saves to JPEG, stick with that. If the capping program offers a choice between BMP and JPEG, <voice style="TV's Frank">Do What I Do</voice> and save your caps as BMP, then use another program to convert from BMP to PNG. BMP files are huge because they're not compressed, which is why most folks cap to JPEG. However, BMP caps are higher quality than JPEG caps due to that very same lack of compression. If you convert your BMP caps to PNG, you get a good amount of compression while keeping the quality, which means you can more reasonably archive better quality caps. (For image conversion, try IrfanView on Windows or GraphicConverter on Mac.)

It's possible you might run into an instance where you save a photorealistic icon to PNG and it doesn't manage to be smaller than 40K. If this happens, switch to JPEG and use the lowest amount of compression necessary to get the icon under 40K.

Transparency: GIF or PNG?

Both GIF and PNG support transparency, but GIF is less sophisticated than PNG. In a GIF, one color in the color index can be set to render as transparent when displayed in web browsers and image viewers capable of acknowledging that setting. The edges of the transparency in a GIF will not be anti-aliased, which means if you want a GIF to look like it has smooth edges against a background you'll only be able to make the GIF compatible with one color for the background.

PNG supports alpha transparency, which means that any color in a PNG may have an alpha channel associated with it which can be set to a variable level of transparency. This makes it possible for a PNG to have anti-aliased edges that look good against any background color. The problem is that alpha transparency isn't universally supported by web browsers, with the main faulty browser being Internet Explorer 6. PNGs with anti-aliased edges can look ugly in IE6. The beta of IE7 correctly renders alpha transparency.

PNG can also do single color transparency like GIF, and that transparency is universally supported since no alpha channels are involved.

If you're making an animated icon and need transparency, use GIF. If you're making a still icon and need smooth edges that look good against any background, use PNG. If you're making a still icon and don't need smooth edges, either GIF or PNG will work.

Color Management for JPEG and PNG

icon_tutorial gets posts on a regular basis from users that read something like this: "My icon looks fine in Photoshop, but when I save to JPEG/PNG the icon looks too dark (or light). Why is this happening?" The answer to this question is...

JPEG and PNG can both contain color management information which may be interpreted by a web browser to adjust how the colors in that image are displayed. This is intended to insure that images in these formats look good on a variety of displays, but spotty implementation in both image editors and web browsers can cause problems.

If you use Photoshop and haven't done it already, you should calibrate your display and set up color management. After this is done it's decision time. You can edit your color management policy to either embed a color profile in your images or discard pre-existing color profiles and not embed a new profile. At the present time I'm recommending the following for web graphics like icons and headers: set color management to discard pre-existing color profiles from source images and not embed a new profile in a finished image. This will give web browsers no information with which to modify the display of an image. If, however, the image you're working on is a photo for display in an online gallery, you may want to consider embedding a color profile. Much will depend at this point on personal preference and whether or not you're color-correcting images professionally. If you do this for a living you may already have a preferred way of doing things that's different from my suggestions, or you may have to adhere to a standard set by an employer. Whatever the case, do what you think best or necessary. My recommendations are not absolute rules, just guidelines for the general situations most graphics amateurs will find themselves in.

Summary

PNG format is in general the best format for making icons, with exceptions for animation (use GIF), the possibility of needing additional compression (use JPEG), and transparency concerns (single color or alpha, alpha support in current web browsers). PNG is also good for headers and larger graphics but the file size may be excessively large if the image has high detail (use JPEG to get a smaller file, but take care to maintain quality). Try PNG for archiving screencaps, too. Since PNG and JPEG are subject to color rendering weirdness, make sure your software is managing color well.

The End Is Near?

Though I've gone into a fair amount of detail about each of the three image file formats more detail is available, especially where GIFs are concerned. If all goes well and I can compose it sooner rather than later, look for a post that will help you get the best results possible when optimizing GIFs (both animated and still) and tell you more about why in certain cases GIF beats JPEG.

Comments

( 21 comments — Leave a comment )
(Deleted comment)
aquamarcia
Sep. 11th, 2006 05:15 am (UTC)
Actually, JPEGs were created by a consortium of photography experts working for Satan. Satan's been to busy working out the kinks in his Anti-Christ Project™ to fuss with digital image standards. ;~)
twisted_badger
Sep. 11th, 2006 05:47 am (UTC)
hi. you win. i love livejournal, you get to see the most awesome people.
bchsbunny2005
Sep. 11th, 2006 05:26 am (UTC)
This is very useful, Thanks for posting it.
I always use JPGs because PNGs never load on my Dial up connection and a Low Compression JPG looks the same in most (not all) instances as a PNG.
the_calzone
Sep. 11th, 2006 05:37 am (UTC)
Just reinforces my beliefe that PNGs kick ass.
twisted_badger
Sep. 11th, 2006 05:45 am (UTC)
a loop of Master Shake moshing to Kelis
you're trying to seduce me aren't you *dead pan*

sorry. hi. lol.
vilain_garcon
Sep. 11th, 2006 05:49 am (UTC)
Thank you for posting this
I still don't get why people think one format is better than the other (for all purposes.) They all do what they are supposed to do.
erunameundomiel
Sep. 11th, 2006 06:37 am (UTC)
I've recently been wondering about this and was considering posting something about it. Thanks so much for all of the info. It looks like I'm sticking with PNGs.
krinklecut41490
Sep. 11th, 2006 11:16 am (UTC)
:) this was pretty cool, though i pretty much knew most of it. i still prefer to use pngs for small graphics, like icons, jpgs for banners and wall paper etc and gifs only for animations. its how i have been doing it for... years, actually. haha.
theleaningelm
Sep. 11th, 2006 11:31 am (UTC)
Awesome. It's too early for me to appreciate anything deeper than the pretty colors, so it's been duly memm'd to pore over read later.
aehallh
Sep. 11th, 2006 12:42 pm (UTC)
Okay, so here's one for you...

PNG and Apple? A lot of people (some actually WITH Macs) tell me PNG can't be seen (or seen correctly?) on Macs. As I have never had proper access to a Mac to test this, do you know? I know there are a few icon contests/challenges out there that don't allow entries to be PNG files and use that as the reason, so I'm really curious about it. =o)

That aside, thank you for this! It's going in my memories so I don't have to type up often more than a page of an answer to people about the differences between PNG & JPEG and PNG & GIF. :D
pensnest
Sep. 11th, 2006 02:18 pm (UTC)
I have no idea why anyone would say this. I'm a happy Mac user, and I save my icons as .pngs all the time. I never have a problem looking at them!
fileg_
Sep. 11th, 2006 03:17 pm (UTC)
We are a multi-Mac household, and we have never had trouble with png. The Mac was designed to be graphics friendly, so I don't know why people would think this.

The problem is in Internet Explorer. If your running IE, you will have trouble with png, even on the Mac - but it's not the Mac's fault.
aquamarcia
Sep. 11th, 2006 07:56 pm (UTC)
The Macs not seeing PNGs is only partly true. If a Mac is running OS X (the current Mac operating system seen on TV ads and installed in all new Macs for several years now) then web browsers like Safari, Camino and Firefox for that OS will all be able to view PNGs just fine.

If a Mac is running OS 9 or earlier (which would make the Mac in question quite old) then web browsers like IE5 and Netscape 4.7 would have problems showing PNGs because the browsers are just as old as the OS they're running on.

So really, it's not a problem. Anyone using PNG incompatibility on Macs as an excuse to exclude PNGs from use is reaching too far into the past to have a useful perspective on the issue. Any reasonably modern Mac gets along with PNGs perfectly well.
pensnest
Sep. 11th, 2006 02:19 pm (UTC)
Thanks - most interesting. I hadn't clued in on the possible disadvantages of using PNGs for banners, so I've certainly learned something today.
linkinpark2720
Oct. 19th, 2006 12:46 am (UTC)
So Helpful. Thanks for posting this up! I'm a little late with the comment but, this entry is great. Meming.
lantiscod
Nov. 16th, 2006 02:12 pm (UTC)
Jesus! I never noticed! Thank you so much for sharing!
pretty_fits
Feb. 21st, 2007 11:15 am (UTC)
Thanks for the bit on color management, helped me alot.
americanmutt
Feb. 28th, 2007 10:51 pm (UTC)
I have tried and tried with color settings and nothing seems to work. Thank you for writing this though, I have this along with the Calibration Tutorial bookmarked.

My specific problem has nothing to do with the image file type I save the image as, it is with the "The Save For Web" optimization screen. Seeing as that is the problem I think it would probably have something to do with my monitor, it is a Samsung SyncMaster (LCD). The colors that I get in Photoshop are the exact colors I want. When the image is saved or viewed through the Windows Picture and Fax viewer the image is considerably darker, regardless of image file type.
heartyred
Nov. 26th, 2007 03:21 pm (UTC)
Thanks for this link! Sorry about my topic.
aquamarcia
Nov. 27th, 2007 01:51 am (UTC)
There's no need to apologize. The question you asked is on-topic and it can't be helped that people give out bad information in response. I just wanted to make sure you got set straight. :)
ceares
Aug. 5th, 2008 08:28 am (UTC)
Thanks so much for this. Until recently I had no clue about png, and still didn't realize the differences until this.
( 21 comments — Leave a comment )

Latest Month

July 2017
S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Tags

Powered by LiveJournal.com