As a Web designer and developer, I have worked with graphics in a variety of formats. Anybody who uses Adobe Photoshop – the standard for design production in the interactive business – has learned his or her way around JPG
, GIF
, TIF
, EPS
, PSD
, PCX
and BMP
files.
Those types of files signify characteristics about a given graphic, and are used for specific reasons. For example, some file types are used strictly for print purposes. Others are best used for web display. However, an analysis of graphics production and all your available options begins and ends with some basic rules of the World Wide Web and what browsers will allow.
- No image is displayed in a browser at any higher than 72 dpi (dots per inch). Period. Save a file at 300 dpi (the most common resolution above 72), and it will still be displayed at 72 dpi. Your effort is essentially wasted.
- Effective content display on the web depends on the site builder’s ability to keep any page’s overall file-size down. Ten years ago, many pages would top the 100kb mark; however, it’s not uncommon today to strive for pages under 30kb.
The JPG
(Joint Photographic Experts Group) is the most common file type for saving graphics on the web. Most often, a savvy designer will compose his or her creation in Adobe Photoshop in what’s called a PSD file. A PSD file is nothing more than Adobe’s native Photoshop format, which allows for higher resolution, image layering and sophisticated design element organization. Unless you’re savvy enough of a developer, you won’t even be able to display them in a browser.
(Editor’s Note: You probably could display them if you’re willing to edit the file on your server that delineates mime-types. More than likely, it suffices to say that this is something most ecommerce proprietors will never even consider.)
The same goes for TIF
, EPS
, BMP
and PCX
files. These file types are used most commonly in design work for print. You can find a definition of the most common graphic file types on these pages:
- home.comcast.net/%7Emontecin/digits.htm#graphicformat
- jkoester1.home.mindspring.com/WebQuests/wqhandoutshtml/webgraphicsdefined.htm
- why-not.com/articles/formats.htm
According to webopedia.com, a JPG
“is a lossy compression technique for color images. Although it can reduce files sizes to about 5% of their normal size, some detail is lost in the compression.”
Simply put, JPG
s can be saved at a really, really small file size. While the image – typically a graphic of photo quality – does lose something in the translation between what you create and what is displayed in a browser, it typically renders an acceptable image in the eyes of most web surfers.
On the other hand, webopedia.com called GIF
s a bitmapped graphics file format used by the World Wide Web, supporting color and various resolutions. It also allows for file compression, but because the GIF
is limited to 256 colors, “it is more effective for scanned images such as illustrations rather than color photos.”
The rule most designers live by is:
- If you’re working with a photo or a file so sophisticated and complex that you must minimize its file size, then save as a
JPG
. - If you’re creating a button, icon, small logo or anything without photographic-quality imagery that doesn’t require heavy color depth, then save as a
GIF
. Webopedia.com has a simple explanation of when to use which file type.
While that explanation includes a discussion of a PNG
file, that’s an option not executed by many designers. In fact, it’s so uncommon that it doesn’t warrant discussion, much like a third-party dark horse in a presidential race. The candidate is there and might garner votes, but most pundits and even voters consider the effort a two-person affair.
As to which software to use to do design work, you have options. Besides Adobe Photoshop, you can use programs such as PaintShop Pro to create and produce Web designs. However, most folks consider the reasonable options to be limited – that’s the result of Adobe Photoshop’s dominance of the graphics production market and its saturation within the design industry. It is not an exaggeration to say that virtually every designer uses Photoshop exclusively.
On the other hand, Adobe Photoshop runs almost $700 (unless you think to buy it online, perhaps on an auction site like eBay). For the small-business owner, his or her ecommerce effort might depend on thrift. In that case, check out these Photoshop alternative discussions:
The most appealing is Adobe Photoshop Elements, a pared-down program that would allow novices to competent designers and producers to complete graphics work without providing the bells-and-whistles required for ultraserious design. It costs under $100, which isn’t half-bad when compared to $700.
However, regardless of your tools – throughout the existence of the Internet and keeping standards in mind – your choice for graphics file-type really is limited to the JPG
and GIF
. Always has been, and might always be. There’s nothing magical, controversial or provocative about their dominance.
The JPG
compresses into really small files. The GIF
does also, but can only handle a limited number of colors. In the end, your browser won’t show your graphics at any higher than 72 dpi, so you might as well shoot for the best quality you can muster at the smallest file size.
Browser technology, web standards and existing graphics products don’t really leave the site designer much choice.