|
Site Navigation
Day One
Day Two
Day Three
Day Four
We use and recommend
for your on-line transactions
| |
Picture Formats
We finally are
going to add some graphical content to our web sites. Pictures and
graphics add visual interest to your site, and as we can see from the
illustrations in this site, make it easier to understand the written content.
We are first going to discuss picture formats.
Graphics files usually
contain one of two types of data: raster—colored dots (or pixels)
arranged in rows, and vector—images composed of lines, polygons, and
text. Raster formats are ideal for photos, and vector formats are best
for logos and diagrams. Vector formats use smooth outlines to create
objects, maintaining quality even when an image is enlarged or reduced.
Generally speaking, there
are three factors to weigh when considering graphics formats: the output
media (print or Web), the format's specific features, and your workflow.
Workflow is also crucial: You can't choose a format if your equipment doesn't
support it. The
information below will help you make the right decision.
 Typically, the only Web formats worth using are those supported by most
browsers: GIF, JPEG, and PNG. Large raster images are more download- and
memory-friendly if they're compressed, but lossy compression schemes
(such as JPEG) shrinks images by discarding data. Also, some formats
support simple transparency (where designated pixels are opaque or
clear), and others offer gradient (or alpha channel) transparency
effects.
Internet
Friendly Formats
JPEG (Joint Photographic Experts Group) is a
full-color raster format supported by all popular Web browsers and
digital cameras. Its compression can produce very small files for speedy
downloads. But JPEG employs lossy compression, so it can degrade image
quality (notice the blocky interference pattern). Each time you save a
JPEG file you further degrade the image.
GIF (Graphics Interchange Format) is a Web-ready
raster format. GIF files use a limited palette of 256 simultaneous colors
at most, but they often use fewer colors to reduce file size. Small
color palettes, lossless compression, transparent
colors, and frame-based animation makes GIF a fine choice for Web
graphics such as icons or logos.
PNG (Portable
Network Graphics) is gaining acceptance as a raster format for the Web.
PNG supports palette-based and full-color images, plus lossless
compression and a true alpha channel. The helmet in the image has a
clear background as well as a soft, semitransparent drop shadow that can
interact with other page elements. Note that not all browsers can
display PNG's multilevel transparency. Most of the images on my
site are PNG images.
SWF (Small Web Format or ShockWave Flash) is a
proprietary vector graphics file format produced by the
Macromedia Flash software. Intended to be small enough for
publication on the web, SWF files can contain animations or
applets of varying degrees of interactivity and function. The
Flash program produces SWF as the compressed and
uneditable final product, whereas its uses the .fla
format for its editable working files.
Formats to
Avoid
BMP, or
bitmaps, are a Windows format. BMP files are usually not compressed, so
they are typically much larger than compressed image file formats for the same
image. For example, an 800×600 24-bit image will occupy almost 1.4 megabytes. As
such they are generally unsuitable for transferring images on the Internet or
other slow or capacity-limited media.
TIFF, or
Tagged Image File Format, is a great
choice for raster images intended for print. TIFF encompasses many
different color modes. In addition to RGB color, TIFF supports 8-bit
gray-scale or 32-bit CMYK (cyan, magenta, yellow, black) data (for commercial offset printing). TIFF
offers advanced features, including gradient transparencies, multiple
layers, and several compression methods. TIFF is not used on the
web. If you have TIFF images to include on your site, you will need to
convert them to JPG, GIF, or PNG images.
Native files are
specific to particular programs. Proprietary formats support features
essential to image development. The Photoshop file (PSD) shown here
contains multiple layers, transparency masks, editable text, and
automated shadows effects (as shown in the Layers palette).
Proprietary formats generally do not work on the web.
|
