Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Friday, May 16, 2008
Development & Programming
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/~montecin/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: webopedia.com/DidYouKnow/Internet/2002/JPG_ GIF_PNG.asp
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:
- photographic.com/digitalperipherals/704photoshop/
- newsforge.com/article.pl?sid=04/07/19/214206
- newsforge.com/article.pl?sid=04/07/19/214206
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.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Thursday, September 01, 2005
Comments:
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.
Posted by: Brian Getting
Sunday, July 15, 2007
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.
Posted by: Misha
Thursday, September 20, 2007
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
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.
Posted by: B. T. Clown
Sunday, July 15, 2007