Web Graphics Guide – Image File Formats
Posted on: March 13, 2009 | Category: digital / web media | 4 Comments
Iedereen kent wel websites waar foto’s en afbeeldingen van een slechte kwaliteit op staan. Hieronder staan de 3 verschillende opties voor het weergeven van afbeeldingen. Zo zijn er ook afbeeldingen, bijvoorbeeld met teksten, die alleen het best tot hun recht komen in een bepaald bestandstype.
Hieronder staan de 3 verschillende bestandopties voor afbeeldingen in websites en wat de juiste toepassingen daarvan zijn. Ook de consequenties voor de grootte van verschillende bestanden (en dus ook de uploadtijd van een site) worden in dit artikel toegelicht.
Images provide a visually stimulating medium to enhance a user’s experience. So mastering file formats is a critical and foundational knowledge to exceptional web design. Consider them as the ingredients to a web design recipe or the tools for the web design carpenter. You cannot use a screwdriver to hammer a nail and expect good results. Web graphics follow a similar principle.
The currency to web graphics are image quality and file size. The dillemma is between preserving image quality to keep images clean and smaller file size to save bandwidth and decrease page load time. Luckily, the basics only require us to deal with the following three formats: .gif, .jpg, .png.
GIF – Graphic Information Format
- allows up to 256 colors
- can be animated
- features transparencies
- uses a lossless compression (no loss in image quality)
GIF graphics have a 256 color restrictions making it ideal for simple graphics and texts that don’t require a lot of colors. Cartoons, logos, charts, texts, all work very well GIF formats. Photo’s don’t. Simply put, the fewer colors you use, the more efficient GIF files are.
JPG – Joint Photographic Experts Group (JPEG)
- supports true colors (16 million colors)
- allows varible compression (i.e. it has a “quality” setting with most graphic softwares)
- suffers generational degradation if edited and saved multiple times
- uses a lossy compression (image quality is lost reduced at higher compression)
JPG are commonly misused as the “one-size-fits-all” form of graphics (due to it’s compatibility with true colors) at the cost of large file sizes. However, they do excel superbly when displaying photographs or scanned artwork. Since these files uses a lossy compression, unnecessary data are discarded during the compression process and changes are irreversible. As a general rule of thumb when image quality is to be preserved, set the compression to where the decrease in quality is invisible to the naked eye (for
about 20% of the original file size or less.)
PNG – Progressive Network Graphics
- allows 8, 24, or 32 byte storage (256 colors, 16million, or 16mill+alpha transparencies respectively)
- transparencies not supported by IE6
- lossless or lossy compression
- utilizes best of both GIFs and JPGs
- generally poor support for ancient browsers
PNG’s are better suited as the “one-size-fits-all” solution since most of the old browsers are obsolete. On a personal note, I’d stay away from transparencies until IE6 becomes obsolete as well. The best time to use PNG is when GIFs are unsuitable (too many colors) and JPG’s are overkill – PNG’s will come to save the day.
Final Note
As a final note, the best advice I can give you is to always use the Export Preview / Save for Web feature (found under File) in your graphics editor to get the best bang for your buck. You can never go wrong.
Bovenstaand artikel is afkomstig van WebDesignLibrary.
About the Author (gonzo)
My name is Jan Rajtoral and I am the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.
{This article contains : 606 words}
Category: digital / web media | 
Subscribe to RSS | 
RSS-Feed by e-Mail
Post Title: Web Graphics Guide – Image File Formats → March 13, 2009
More Posts about this Topic:
- Easy Ways to ‘Pimp’ your Website → January 12, 2010
- Make a Good Impression with Webdesign → October 28, 2009
- Minimalist Web Design – Why Less Really Is More → July 9, 2009
- When should you Redesign your Website? → February 13, 2009
Share this Article/Post!
We really appreciate your support. If you enjoyed this article, please consider sharing it with others using the social bookmarking site of your choice.
Only Valuable Comments Get “Link♥Love”
4 Gorgeous Responses,
to this article: “Web Graphics Guide – Image File Formats”
Leave your Comment
(only English & Dutch comments are allowed)
Subscribe to our Feed
Stats & Bookmark
- FeedBurner:
- @gonzodesign_: 246 followers
Featured Sites
About
- gonzoblog.nl is all about:
- Brand Identity, Logo Design, Corporate Identities, Print Media, Graphic Design, Typography & Digital/Web Media.
- gonzoblog.nl is proudly powered by: gonzodesign, creative solutions.
Advertise with us?
| This WordPress-theme 'gonzoblog' is created by:
mm.. thank you ))
Hey pispowl,
you’re welcome. Cheers ….
Twitter ID: gonzodesign_
Author, thank you very much for what always keep up to date
Hi Avto,
you’re welcome! Thanks for your visit and comment, Cheers & Ciao ..
Twitter ID: gonzodesign_