Home arrow Graphic Design arrow Page 4 - Web Graphics Overview

Web Graphics Overview

Currently there are three dominant file types found on the Internet: GIF, JPEG, and PNG. Learn how each can work to help us preserve image integrity, while keeping files sizes minimal. Properly optimizing your graphics will make your site look more professional, and reduce the amount of time your visitors spend waiting for your pages to download.

Author Info:
By: Bryan Montford
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
August 02, 1999
  1. · Web Graphics Overview
  2. · CompuServe's Graphic Interchange Format (GIF)
  3. · Joint Photographic Experts Group (JPEG)
  4. · Portable Network Graphic (PNG)
  5. · Conclusion

print this article

Web Graphics Overview - Portable Network Graphic (PNG)
(Page 4 of 5 )

Pronounced "Ping"

This file format was developed by an independent panel of graphic experts to replace GIF. PNG supports any number of colors, alpha channels, lossless compression, and interlacing. The only thing GIF supports that PNG doesn't is animation. This file type works best with about any type of image you care to save. PNG uses the zlib compression scheme, compressing data in blocks dependant on the "filter" you choose. To make compressing your PNG simpler, just choose "adaptive." This will usually give you the best results. If you want the image to be interlaced, select Adam7. Keeping those two points in mind makes saving PNG files relatively painless. To create a transparent area in a PNG, make a mask or alpha channel and save it with the file.

Notes about PNG files: PNG file sizes aren't usually as small as a JPG or GIF. PNG makes up for this deficiency by offering the capability to deliver higher quality images.

Older browsers do not support the PNG format. There are many WYSIWYG editors that still do not support PNG. This is quickly changing. Look for increasing support in the next few months.

PNGs are especially nice for small graphics that require a lot of detail. GIF limits the number of colors you can use. JPEG discards information to save space. PNG doesn't do either one, it keeps everything the way you left it.

Have an image that has mixed content? PNG might be your saving grace. PNGs adaptive encoding looks at each line and evaluates what method of compression will work best for it. An example of an image with mixed content would be a CD cover. The band's logo is set in big block letters over a picture of the group. A GIF will work wonders for keeping the logo intact, but it's going to posterize the photo since it can only use 256 colors. JPEG will handle the photo okay, but it's going to create visible distortion in the logo. You might try keeping the quality of the JPEG very high to minimize the visible artifacts caused by its compression scheme. That will leave you with a sharp looking image that takes forever to download. Next time you're stuck in a situation like this, see if a PNG will work.

blog comments powered by Disqus

- Customizing Wordpress Favicons and Gravatars
- Building Corner Effects with Transparent Bac...
- 3D Graphics Technology: VRML Part I - Introd...
- Creating Visual Effects
- Web Page Design Overview
- Creating Artistic Photographs
- Working with Tools in Paint Shop Pro 8
- Using HTML Quickform for Form Processing
- Introduction to Adobe FrameMaker
- WebLogic Workshop, WebLogic Platform, and th...
- Planning the Site
- Working with Web Services
- WebLogic Workshop Application Development Ba...
- Scanning Images for Web Use
- Web Graphics Overview

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials