Web Design with HTML and CSS

(National Geographic (Little) Kids) #1

Saving images as GIFs


Lesson 5, Graphics, Color, and Transparency 93

Saving images as GIFs


GIF is a popular web format that has some limitations in terms of color and appearance. This
fi le format is lossless, so the clarity of the image is not compromised by GIF compression.
You can compress the fi le size of a GIF by reducing the image’s pixel dimensions and the
number of indexed colors that it uses, which makes GIF the best format for images with a
lot of solid colors, such as logos and illustrations. The compression algorithms for GIF fi les
work best on large spans of color, thereby reducing the fi le size when optimized. However,
a photographic image or an illustration with a lot of tonal values will result in a much larger
fi le size than a same-sized image with solid colors.


The GIF format works best with images that have large spans of solid colors. In this example, an image with a lot of tonal
values are saved as a GIF with 32 colors.


When saving as a GIF, your image fi le can contain up to 256 indexed colors, but you should
reduce the number of colors to the minimum. You can reduce an image to four colors, but it
requires testing to fi nd the best-looking fi le with the smallest fi le size.


You can animate GIF fi les and include transparent pixels to blend the image with diff erent-
colored backgrounds. The pixels in a GIF image must be fully transparent or fully opaque, so
you cannot fade the transparency as with a PNG image, which is discussed later in this lesson.


In the following steps, you will open an image that contains multiple shades of solid color,
and you will save it with a transparent background. You will then animate the image.


You should use animations conservatively because many viewers do not like the distraction.
Free download pdf