|
|
Support | Learning Center | Web Information
GIF, JPG & PNG
The three most common image file formats on the web are GIF, JPG and
PNG. The first two have been a standard in web browsers since the beginning.
The third one, PNG, is not really a new format in and of itself, but it
is a newcomer to web graphics and until recently was only supported in
web browsers through the use of proprietary plug-ins.
GIF - An acronym
for Graphics Interchange Format, created originally in 1987 by CompuServe
to facilitate the exchange of images between different platforms.
The file format is known for its compression and the fact that it
can store and display multiple images. The major drawback to GIF
is that images can only use up to 256 distinct colors to display
their data. For photographic-quality images, this is a significant
obstacle. Fortunately, the GIF file format contains a small work-around:
the file itself can have a color palette that each stored image
uses in addition to the local palettes created for colors custom
to those specific images. This means that most images stored as
GIFs have access to potentially more than the 256 colors technically
allowed by GIF.
However, the GIF file format is still not the best medium with
which to display your family photos on the web. Where GIF excels
is in storing and compressing text-based images, line and clip art.
Because these types of images don't require millions of colors,
they can quite easily be stored as GIFs with minimal, if any at
all, degradation.
Finally, one of the more popular uses of the GIF file format is
that of animation. Built-in natively to the format are controls
for image delay, layer transparency, and layer position, among others
(layer here refers to each distinct image contained within the file).
By cleverly utilizing these features, people on the Web have created
some truly astounding animations using GIF Animator. |
![](/media/images/support_upw_tutorials/torch01.gif)
![](/media/images/support_upw_tutorials/alienorb.gif)
|
JPG - Developed
by the Joint Photographic Experts Group, this file format is the
Internet standard for presenting photo realistic images. It has
the capability to compress large images down to very small file
sizes while retaining the overall photographic quality of the image.
JPEG files can use any number of colors up, so it's a very convenient
format for 24-bit images (True Color, which supports more than 16
million colors).
Unfortunately, the one characteristic of JPG files that makes them
great for the Internet is also its greatest drawback. The more you
compress an image, the more information that is lost. That means
that high quality photos become blurry, indistinct, and down-right
un-view able at the highest levels of compression. Therefore, when
saving files as JPEGs it's absolutely critical that you maintain
a careful balance between compression and quality.
When choosing to save a file, sometimes it can be difficult deciding
on which format would best serve your purposes. The rule of thumb
is this: if your image is text-based, or contains mostly clipart,
line art, or other drawings, then you should save it in the GIF
format; however, if your image contains mostly photo-realistic information,
your best bet is JPG. |
![](/media/images/support_upw_tutorials/islandnet1.jpg)
![](/media/images/support_upw_tutorials/craternet.jpg)
|
PNG - This is
the lost brother in Internet file formats. Originally the Portable
Network Graphics format was developed by Thomas Boutell, Tom Lane,
et al as a replacement format for both GIF and JPEG - it natively
supports all the characteristics of both formats, and then some,
but it seems to have been forgotten in the push to make web browsers
bigger, better, and more burly. Only recently have browsers begun
supporting this format without the need for special proprietary
plug-ins.
As mentioned above, the greatest advantage to using PNG is that
it supports all the features of both GIF and JPEG. If you have text
or line art, you can activate the GIF-like color reduction options
and create a smaller file with no lossy compression. On the other
hand, if you're saving photo-realistic images you can activate the
JPEG-like compression schemes and save them that way, also with
no loss during compression (unlike JPEG which varies from near-lossless
to extremely lossy). In addition to these features, it also supports
alpha channels for masking, gamma for color correction, and storing
48-bit color images (JPEG can only go as high as 24-bit).
However, there is a drawback to all this: PNG files tend to generally
be larger than JPEG files as they almost always use a lossless compression
scheme. (Though often times when used with the same color palettes
as GIF files they tend to be smaller.) Additionally, while modern
browsers do natively support this format, they don't necessarily
support all of its functionality. Finally, PNG does not support
animation, perhaps the only feature it does not share with GIF.
If you decide to go with PNG, you may find the results are not
always what you expect. |
|
![](/media/images/support_upw_tutorials/png_1.png)
A PNG file compressed down to 27kbs.
![](/media/images/support_upw_tutorials/png_alpha_1.png)
A PNG with a transparent outer edge. If your browser does not display
this image then you have an older browser. If the outer area appears
gray, then you are using Internet Explorer, as it does not support
transparent PNGs.
|
Back
to General Web Info
|