|
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.
| GIF |
JPEG |
PNG-8 |
PNG-24 |
| Better
for clipart and drawn graphics with few colours, or
large blocks of colour |
Better
for photographs with lots of colours or fine colour
detail |
Better
for clipart and drawn graphics with few colours, or
large blocks of colour |
Better
for photographs with lots of colours or fine colour
detail |
| Can
only have up to 256 colours |
Can
have up to 16 million colours |
Can
only have up to 256 colours |
Can
have up to 16 million colours |
| Images
are "lossless" - they contain the same
amount of information as the original (but with only
256 colours) |
Images
are "lossy" - they contain less
information than the original |
Images
are "lossless" - they contain the same
amount of information as the original (but with only
256 colours) |
Images
are "lossless" - they contain the same
amount of information as the original |
| Can
be animated |
Cannot
be animated |
Cannot
be animated |
Cannot
be animated |
| Can
have transparent areas |
Cannot
have transparent areas |
Can
have transparent areas |
Can
have transparent areas |
On the whole, GIFs are better for the Web, as Web graphics
tend to be small, have a small amount of colours, and
sometimes need fancy stuff like animation or transparency.
However, JPEGs are really handy when you have a very complex
or large image (such as a photo), and/or you want a full
colour image. PNG-8 can often produce smaller file sizes
than GIF, and both types of PNG are lossless.
|
