Monday, October 10, 2011

Graphic Design 101: Image File Formats

There are a handful of image file formats, but only a select few we use for certain purposes. New ones pop up now and then, but not often enough to worry much about being up to date with all of them.

For graphic designs (raster), we typically use PSD (Photoshop Document) and XCF (eXperimental Computing Facility for GIMP) especially when working with layers. Think of these file types as "workstation" formats. You don't publish them, but you modify and back them up for future versions or derivatives.

"But PNG is the best format ever!". No, a PNG (Portable Network Graphic) is a lossless (doesn't lose quality) image format for raster/pixel graphics. It is widely used, but not for everything. It cannot do animations (single layered) like a GIF and can be unnecessarily large for photos (unlike JPG/JPEG).

Use JPG/JPEG (Joint Photographic Experts Group) for photos and generally large graphics with lots of detail. It is best used for images under 128x128 or with a very low color count (under 16 colors) for best file size optimization. Don't forget to backup your original as a PSD or XCF so you can convert to a lossless image format if needed. JPG is meant to compress in file size through stretching and interpolating calculations, making it a primary candidate for photos with millions of color. You can adjust the quality level from 0-100% for compression. 100% quality isn't necessary as 70% typically does just fine with most photos, but it is better than using a PNG if you must.

GIF (Graphics Interchange Format) are a lot similar to PNGs with two major exceptions. They are animated and they have a color limit of 256. This is why you avoid drawing in a GIF opposed to a PNG or (preferably), a PSD/XCF file. I always have ran into trouble drawing in GIFs (the color palette appears fixed sometimes even if you don't exceed the limit). You could be drawing in an orange-red and end up drawing brown (at least this behavior is in GIMP).

If you want to modify a JPG/JPEG or a GIF that you don't have access to their original format, export them to a proper format (PSD/XCF). You will be able to use all the color and layers (or even animation frames) you want. Export them to whatever desired (with the proper format in mind) when finished.

Now we all (for the most part) heard and may even know what these formats are. But what about those vector formats?

SVG (Scalable Vector Graphic, open format) and EPS (Adobe Illustrator's Encapsulated PostScript) will save both vector points (you will lose the ability to modify them in any non-vector format). The good news is, they also handle layers and animations. I want to advocate though, to use SVG over EPS. SVG has actual support on Internet browsers these days (though I'm not sure about the notorious IE), making it a possible new image format to post. Of course, if you ever design an image in SVG format, you can always export it to PNG or JPG (which you probably should do anyway for compression).

1 comment: