Displaying graphics on your web page can make it more interesting. To display an image on your web page, you need to convert it to the appropriate file format. Which format is best depends upon the character of the image.
Welcome to Bucaro TecHelp!

Welcome to Bucaro TecHelp!
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

[About BTH]  [User Agreement]  [Privacy Policy]  [Site Map]  [Contact Form]  [Advertise on BTH]  [News Feed]

Google
Web
This Site
Your Ad Here!
Your ad here for one full year, only $20. Send me your ad copy, up to six lines, I'll post it ASAP. After you inspect your ad online, you can pay through PayPal.
Click here for more information.

Graphics File Formats for Your Web Page

Displaying graphics on your web page can make it more interesting. The images that you put on your web page must be transferred from a Web server, across the Internet, to your Web site visitors computer. To keep the transfer delays short, you must keep the image files small. The Graphics Interchange Format (GIF) developed by CompuServe uses a compression technique to reduce the size of graphics files.

GIF Format

Image in GIF format

A GIF image can contain up to 256 different colors. The GIF image format works well because most simple Web graphics contain less than 256 different colors. When you convert an image to the GIF format, if the image contains more than 256 different colors, some color information will be lost.

Complex images such as photographs can contain millions of different colors. Converting a photograph to GIF format may degrade the image's appearance. The Joint Photographic Experts Group (JPEG) format uses a compression method that is more suitable for photographic images.

When you convert an image to the JPEG format, you must select a compression level, sometimes referred to as the quality. A lower compression level results in a higher quality image, but the file size is not reduced as much. A high compression level results in a smaller file size, but the image quality is poorer.

The JPEG format uses a lossy compression technique. This means that the image file size is reduced by throwing away some of the details in the image. As you convert your image with higher compression levels, more image details are lost, resulting in a blurry image.

JPEG Format

Compession Level: 30
File Size: 13KB

JPEG Format

Compession Level: 80
File Size: 4B

The secret to converting an image to the JPEG format is to set the compression level to the highest setting where the loss of detail in the image is not noticeable, or at least is acceptable for your purpose.

Which image format to use, GIF or JPEG, depends upon the character of the image you want to convert. If the image contains blocks of solid color, use the GIF format. Using the complex JPEG compression method on an image that contains large blocks of solid color would actually result in a larger file than would the GIF format. If the image contains lots of detail, like a photograph, use the JPEG format.

In 1995 Unisys surprised Compuserve and the Internet community by announcing that they held a patent on the Lempel-Ziv-Welch (LZW) compression technique used in the GIF file format. Anyone wishing to use the LZW technique would have to pay Unisys a $0.20 per unit royalty.

In response to this, the Portable Network Graphics (PNG) format was developed. The PNG format was placed in the public domain so that no-one is required to pay royalties to use it. Unfortunately the designers of the PNG format did not create a simple replacement for the GIF format. Instead they threw in everything but the kitchen sink. For this reason the PNG format has not received wide acceptance.

Note: As a Web graphics user or designer you do not have to pay royalties to Unisys in order to use the GIF format. The royalties apply mainly to software developers who use the LZW compression algorithm in the code of their graphics applications.

Web Design Sections

RSS Feed RSS Feed

Graphics Design
Anti-Aliasing
Free Animated GIF Maker
Paint Shop Pro : Version 4 Was Best
Graphics File Formats for Your Web Page
The Browser Safe Palette
Image Scanning : Confused About DPI?
Hexadecimal Color Notation on the Web
An Insight to Logos
Building an Image with a Logo
CSS Button Designer
Color Harmony in Web Design
RGB Color Schemer
RGB Color Schemer FAQs
Web Color Table
Web Designer's Reference
Get GIMP - Free Replacement for Overpriced Photoshop
Use GIMP to Scale (Resize) an Image
Graphics Design for Beginners - Cropping Images
Graphics Design for Beginners - Blur Filters
Create GIF Animations With Free GIMP Image Editing Program
How to De-haze a Photo with GIMP
Inkscape - Free Vector Graphics Illusttration Package
Inkscape Basics
Basic Inkscape Vector Drawing
Inkscape - How to Add a New Node
Inkscape - How to Join Two Segments at Endnodes
How to Trace an Image Using Photoshop
How to Create a Product Box in Photoshop

[Site User Agreement]  [Advertise on This site]  [Search This Site]  [Contact Form]
Copyright©2001-2007 Bucaro TecHelp P.O.Box 18952 Fountain Hills, AZ 85269