JPG Vs. GIF Vs. PNG
Alright, you are an artist and just like a carpenter, you have tools; and you have to know what tool is right for what job. The internet is a very specific and very intimidating place. Users on the World Wide Web have short attention spans; so if your graphics take 10 minutes to load; you are doing something wrong!
Here I am going to try and explain the 3 main guns in your closet: the JPEG/JPG, the GIF, and the PNG. Please remember this is intended as a guide for use on the internet. Artwork for print and logo work is entirely different because you aren't as restricted with size and loading time.
Now, without further adieu...
First up, the JPEG/JPG.
If compressed too much; looks very muddy and ugly. But how much is too much? Well using Photoshop and "Save For Web," let's give a demonstration:
This is a sunset photo I took. You can find it in the Photography section here at I Hate Artists.
The one on the left is saved at 100, which is maximum quality using Save for Web. The center one is saved at 59. The one on the right is saved at 0.
- The one saved at 100 is 39.93KB and would take 15 seconds to load on a 28.8 modem.
- The one saved at 59 is 9.983KB and would only take 4 seconds to load on a 28.8 modem.
- The one saved at 0 is 2.93KB and would take 2 seconds to load on a 28.8 modem.
Here you can see that the warm center is almost perfect. I usually use between 59 and 72 in Save for Web.
You can also save a JPEG as Progressive, which gives the viewer a lo-res version of the picture then, after a few "scans," shows them the real picture. This is sometimes better than having nothing there.
Also worth noting is that JPEGs cannot handle transparency at all. So what if you want a transparent logo? That leads us to our next 2 options...
The GIF.
First things first; the GIF supports transparency and animation! Cool right? It also only supports 256 colors! Sorry to set you up and then knock you down like that... People have been telling me to see someone about that...
So if you have a gradient, drop shadow, glow, etc. it's probably not going to come out too good here.
The way GIFs reduce file size is to actually remove unneeded colors from the palette, so if you have a picture with a ton of colors, sometimes it will "blend" colors together or replace colors so it can make the file size smaller. This is why GIFs aren't good for photographs.
However GIFs are great for very small images such as icons. For CSS style things like a 1 pixel repeating image, a GIF is perfect. But for photos; I would stay clear of GIFs.
Also GIFs are slowly being phased out because Unisys, the company that created GIFs, decided that companies that write programs that output GIFs have to pay them licensing fees.
That, and the shortcomings of the GIF lead to...
The PNG.
A PNG is smaller than a GIF when it comes to compression, and also supports transparency. It also supports 24 bit color (about 16 million colors). However it does not animation, but we have flash for that nowadays.
Ready for the negative? IE6 doesn't support the transparency of PNGs. You can use JavaScript to hack it, but if they have JavaScript disabled it won't matter.
IE7 and Firefox 2.0 support it though. So in a few years, we will be good to go with PNGs. For now though, it's a matter of waiting.
Basically it boils down to this: if your picture will look good with only 256 colors; the GIF will work. But if you need more than that, you should go with JPG.
However keep an eye out for PNGs because they are going to bring a ton of interesting things on the internet in the years to come.
