HTML and CSS Reference
In-Depth Information
Photographers Expert Group. The JPEG file format allows you to
create photorealistic images (Figure 3.1). A great place to go to
view millions of JPEG images is Yahoo's Flickr. A JPEG image is
identified with the extension of either JPEG or JPG.
The second file format used widely on the Internet is GIF,
graphics interchange format. Unlike JPEG, which support
millions of colors, the GIF file format only allows you to create
images that support a color palette of 256 colors (Figure 3.2).
On the face of it, the GIF format appears to be inferior to the
JPEG format. However, the GIF format does have two features
the JPEG format does not: setting transparency as a color and
sequencing a series of images together to play back as a simple
animation.
Both JPEG and GIF image formats, however, are now being
superseded by a more sophisticated image format: PNG. Portable
network graphics (PNG) are a raster-based file format that gives
the best of both JPEG and GIF and a little more (Figure 3.3). A
PNG image format will support 32-byte images for photorealistic
presentation. Additionally, like GIF images, backgrounds in PNG
images can be set to be transparent.
While PNG, GIF, and JPEG images are all great, it is difficult to
programmatically change the graphical display of the images. For
instance, you cannot create a bar chart using JPEG images that
change as new data come in. HTML5 introduces two solutions
that address this problem: SVG and CANVAS.
The CANVAS HTML5 element allows you to create bitmap
images programmatically using JavaScript as the designer. Through
this technique, complex animations and interactive solutions
can be created. Google has established ChromeExperiments.com
(
http://www.chromeexperiments.com/
) to demonstrate powerful
CANVAS and JavaScript experiments (Figure 3.4).
The second technology, SVG (scalable vector graphics), is
a vector-based technology that enables you to create images
and animation using XML syntax similar to HTML. SVG started
Figure 3.1
This image is in JPEG
format. The right side shows the
pixel-by-pixel construction of the
image.
Figure 3.2
The GIF image is
using a Web-safe color palette
of 256 colors. You can see by the
grainy texture that the image is
not photorealistic.
Figure 3.3
PNG graphics allow
you to have the best of JPEG
and GIF technologies in a single
format.
