Start Your Own Internet Business
Where to Start

Research
Creating The Product

E-Commerce
Promotion
Google Adwords
Affiliates
E-mails

E-zines

Offline

Search Engines

Workshop

Forward   

Introduction

Hosting

What You Need

Planning

Composer

Templates

Graphics

Tables

Image Maps

Frames

Forms

Meta Tags

Publishing

Test

Create Ebooks

EBooks
Cover Design

Cover Thin Flat

3D Cover

Graphics & Art

Introduction

Animation

Side Bars

Converting

GIF's & JPEG

Scanning

Site Design

Dimensions

Colours

Artwork

Links

Multimedia

Converting

MP3's

Streaming Audio

Screen Capture
Videos

Radio Shows

Jukebox

Extras

PDF Files

Validate
Scripts
Training Videos
Macromedia

Gif's and Jpeg's are probably the most widely accepted graphical format on the web today. Both formats can be displayed as solid or transparent images and also have the ability to be interlaced or progressive.

Now that Netscape and other browsers are supporting both GIF and JPEG graphics in in lined Web page images you could use either graphic format for the visual elements of your Web pages. However, in practice most Web developers will continue to favour the GIF format for most page design elements, and choose the JPEG format mostly for photographs, complex "photographic" illustrations, medical images, and other types of images where the compression artefacts of the JPEG process do not severely degrade image quality.

Gif's

Interlaced  graphics display images in two passes of alternating lines instead of loading them one line at a time. Depending on the graphics viewer or Web browser, interlaced GIFs may produce a "Venetian blind" effect or simply a blurry or blocky image that gradually sharpens. Pages using interlaced GIFs let people see at least the outline of an image sooner; thus the pages often appear to load faster than those with non-interlaced graphics. If a browser doesn't support interlaced images, an image will simply appear as a normal (non-interlaced) GIF.

A transparent GIF lets the background show through selected parts of an image. When creating the GIF, the designer can designate one color in the image's palette as transparent. When the GIF is displayed, areas using that color reveal whatever is underneath. Transparency is most often applied to a GIF's background color to let the page's own background show through, so that images appear to float on the page. Most modern Web browsers support transparent GIFs. Those that don't simply display the images as normal GIFs.

There is no special scripting involved for interlaced or transparent graphics. The interlacing and transparency are created within the graphics software programs. Usually you save as and then choose the options tab to create an interlaced or transparent image.

Advantages of GIF Files



The most widely supported graphics format on the Web.  All graphic web viewers support the GIF format for inlined images.

GIFs of diagrammatic images look better than JPEGs.

GIF supports transparency and interlacing.

JPEG

Progressive JPEG Compression Explanation

Progressive JPEG (Joint Photographic Experts Group) compression is termed "lossy", this means that to save disk space, the image quality is compromised.

Depending on the amount of detail one wants, the compression can be set from a range of 10% to 100%. The lower the percentage, the lower the image quality. Also, the lower the percentage, the lower the file size. The PJPEG image format is best used for photographic images with many colors.

Progressive JPEGs always have 16.7 million colors available whether or not the computer is set to display millions. The main difference between PJPEGs and normal JPGs is in how they are displayed online.

Netscape Navigator 2.0 and above as well as Internet Explorer 2.0 and above both support PJPEGs. A preview image is displayed while the image is loading. This preview is very blurry and has very limited detail. As the image continues to download, more detail becomes visible. PJPEGs have a slightly better compression scheme than that of normal JPEGs, resulting in smaller file sizes while still maintaining the same quality.

Advantages of JPEG Images




Huge compression ratios are possible, for faster download speeds.
Gives excellent results in most photographs and medical images.

Supports full-color images (24-bit "true color" images).

The PNG Image Format

PNG is a relatively new invention compared to GIF or JPEG, although it's been around for a while now. (Sadly some browsers such as IE6 still don't support them fully.) It stands for Portable Network Graphics. It was designed to be an alternative to the GIF file format, but without the licensing issues that were involved in the GIF compression method at the time.

There are two types of PNG: PNG-8 format, which holds 8 bits of colour information (comparable to GIF), and PNG-24 format, which holds 24 bits of colour (comparable to JPEG).

PNG-8 often compresses images even better than GIF, resulting in smaller file sizes. On the other hand, PNG-24 is often less effective than JPEGs at compressing true-colour images such as photos, resulting in larger file sizes than the equivalent quality JPEGs. However, unlike JPEG, PNG-24 is lossless, meaning that all of the original image's information is preserved.

PNG also supports transparency like GIF, but can have varying degrees of transparency for each pixel, whereas GIFs can only have transparency turned on or off for each pixel. This means that whereas transparent GIFs often have jagged edges when placed on complex or ill-matching backgrounds, transparent PNGs will have nice smooth edges.

Note that unlike GIF, PNG-8 does not support animation.

One important point about PNG: Earlier browsers don't recognise them. If you want to ensure your website is viewable by early browsers, use GIFs or JPEGs instead.

This table summarises the key differences between the GIF, JPEG and PNG image formats.