Foundation HTML5 with CSS3

Embedding Media

Figure 5-3. A transparent GIF with a gray matte, shown on a checkerboard background for demonstration

Another special feature of the GIF format is support for rudimentary animation. The image can consist of a

number of frames to be displayed in sequence, allowing for some very cool (but also some very annoying)

effects. Of course, each frame in an animated GIF is additional information to store that will increase the

overall size of the file.

GIF files use the .gif extension. The format and its compression formula were once patented, and the

patent holders demanded licensing fees from any software vendor that wanted to produce or display GIF

images. Those patents have since expired, but their existence at the time inspired the creation of a free

alternative image format: PNG.

There’s some difference of opinion about just how to pronounce the acronym GIF. Some

people (including the people who invented the format) pronounce it like “jif,” with a soft g

sound. But in common usage it’s often pronounced with a hard g, as in “gift,” which is

arguably more phonetically correct, in English at least. The truth is both ways are equally

correct, so say it whichever way sounds most natural to you.

PNG

Portable Network Graphic (PNG) is a format invented as a free successor to the patented GIF, and it

improves on its predecessor in several ways. Like a GIF, a PNG image can also contain a maximum of

256 colors (known as 8-bit color, because 256 different values are the most that can be described using

only 8 bits of data per pixel), and it supports transparency the same as GIFs do. Thanks to a different

compression scheme, an 8-bit PNG file can sometimes be smaller than its GIF counterpart.

However, another variant of the PNG format can support 24-bit color to produce millions of unique colors;

it’s similar to JPEG in that respect, though it frequently results in larger files than JPEGs. But the best

feature of 24-bit PNG images is their capacity to include a transparent alpha channel, like an extra invisible

layer embedded in the image to define areas of partial transparency. Whereas the transparent pixels in a

GIF or 8-bit PNG are completely transparent, the pixels in a 24-bit PNG can also be partially transparent,