HTML and CSS Reference
In-Depth Information
How images work
Images are just images, right? Well, actually there are a zillion formats for
images out there in the world, all with their own strengths and weaknesses.
But luckily, only three of those formats are commonly used on the Web:
JPEG, PNG, and GIF. The only tricky part is deciding which to use when.
So, what are the differences among JPEG, PNG, and GIF?
Use
JPEG
for photos and
complex graphics
Use
PNG
or
GIF
for images with solid
colors, logos, and geometric shapes.
Works best for continuous
tone images, like
photographs.
PNG works best for images with a
few solid colors, and images with
lines, like logos, clip art, and small
text in images.
Like PNG, GIF works best
for images with a few solid
colors, and images with
lines, like logos, clip art,
and small text in images.
Can represent images with
up to 16 million different
colors.
PNG can represent images with
millions of different colors. PNG
comes in three flavors: PNG-8,
PNG-24, and PNG-32, depending
on how many colors you need to
represent.
GIF can represent images
with up to 256 different
colors.
Is a “lossy” format
because to reduce the file
size, it throws away some
information about the
image.
GIF is also a “lossless”
format.
PNG compresses the file to reduce
its size, but doesn't throw anything
way. So, it is a “lossless” format.
GIF also supports
transparency, but allows
only one color to be set to
“transparent.”
Files tend to be larger than
their JPEG equivalents.
Supports animation.
Does not support
transparency.
Files are smaller for more
efficient web pages.
No support for animation.
Allows colors to be set to
“transparent” so that anything
underneath the image will show
through.
Files tend to be larger than their
JPEG equivalents, but can be
smaller or larger than GIF depending
on the number of colors used.
