Web Graphics: Why Are We So Limited?
JPG and GIF best for web design
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, JPGs 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 GIFs 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.
Sponsored links
- Pod1 – Design, Ecommerce, Online Marketing
3 Comments
Legacy User says:
I take issue with your statement that browers will always display graphics at 72 DPI. First of all, DPI is only relevant in print work and is absolutely irrelevant to the Web. PPI is only marginally relevant, mostly as a very rough sizing guideline. Browsers don't care about the pixel density of an image. The only thing that matters on the Web is an image's dimensions measured in pixels. If you design your web site to be 800px wide and want a photo to take up one quarter of the width, the photo should be 200px wide, simple as that. If you think you can make a photo always appear 4"x5" on the viewer's screen then you're stuck in the print paradigm and don't understand how display graphics work.
-- B. T. Clown
Legacy User says:
72 DPI is the resolution for all screens right now, and the default resolution for web graphics. Period. You can save your graphics at 300 DPI if you would like, but they will still display at 72 DPI on a computer screen, because there are only 72 pixels crammed into each linear inch of a computer screen. Like it or not, pixels from the web world and "dots" (the mesh screen size) in the print world are analogous.
-- Brian Getting
Legacy User says:
This is not correct (Brian and Ryan). It's a little confusing (and this is a common misconception). A particular monitor's DPI is based on the monitor size and the resolution of the monitor: A 19" monitor with 1024x768 pixel resolution would have a DPI greater than a 19" monitor with a 800x600 pixel resolution.
However, in effect, there is no difference between a 72dpi image that is 500px wide and a 300dpi image that is 500px wide ON A WEB PAGE. In fact, each image will be the same filesize. However, if you were to print out a 500px wide image at 72dpi, it would be much larger than the printed version of the image at 300dpi. On paper, a 500px wide image, at 72dpi is 7 inches wide. On paper, a 500px wide image at 300dpi is nearly 3 inches wide.
Part of the filesize misinformation is that, if you were to want an image to print out at 7 inches wide (at 300dpi) you would have to have a 2100px wide image, and thus a larger filesize.
I had held the "72 dpi misinformation" until I did some research on it recently.
-- Misha
