Image Formatting tips
Image
file formats
Image files are
made up of picture elements, called PIXELS The pixels that comprise an
image are in the form of a grid of columns and rows. Each of the pixels
in an image stores digital numbers representing brightness and color.
Major graphic file formats
There
are many graphic file formats, if we include the proprietary types. The
PNG, JPEG, and GIF formats are most often used to display images on the
Internet. These graphic formats are listed and brieflydescribed below,
separated into the two main families of graphics: raster and vector.
Raster formats
JPEG
The JPEG (Joint
Photographic Experts Group) image files are a lossy format. The DOS
filename extension is JPG, although other operating systems may use
JPEG. Nearly all digital cameras have the option tosave images in JPEG
format. The JPEG format supports 16-bit color and produces relatively
small file sizes. Fortunately, the compression in most cases does not
detract noticeably from the image. But JPEG files do suffer generational
degradation when repeatedly edited and saved. Photographic images are
best stored in a lossless non-JPEG format if they will be re-edited in
future, or if the presence of small "artifacts" (blemishes), due to the
nature of the JPEG compression algorithm, is unacceptable. JPEG is also
used as the image compression algorithm in many Adobe PDF files.
TIFF
The TIFF (Tagged Image
File Format) is a flexible image format that normally uses a filename
extension of TIFF or TIF. TIFF's flexibility is both a feature and a
curse, with no single reader capable of handling all the different
varieties of TIFF files. TIFF can be lossy or lossless. Some types of
TIFF offer relatively good
lossless compression for bi-level (black
and white, no grey) images. Some high-end digital cameras have the
option to save images in the TIFF format, using the LZW compression
algorithm for lossless storage. The TIFF image format is not widely
supported by web browsers, and should not be used on the World Wide Web.
TIFF is still widely accepted as a photograph file standard in the
printing industry. TIFF is capable of handling device-specific color
spaces, such as the CMYK defined by a particular set of printing press
inks.
RAW
The
RAW image format is a file option available on some digital cameras. It
usually uses a lossless compression and produces file sizes much
smaller than the TIFF format. Unfortunately, the RAW format is not
standard among all camera manufacturers and some graphic programs and
image editors may not accept the RAW format. The better graphic editors
can read some manufacturer's RAW formats, and some (mostly higher-end)
digital cameras also support saving
images in the TIFF format
directly. There are also separate tools available for converting digital
camera raw image format files into other formats, one such tool being
Dave Coffin's dcraw, which is made available under a combination of GNU
General Public License and public domain licenses.
Adobe's
Digital Negative Specification is a recent (September 2004) attempt at
standardizing the various "raw" file formats used by digital cameras.
PNG
The PNG (Portable Network
Graphics) file format is regarded and was made as the free and open
successor to the GIF file format. The PNG file format supports true
color (16 million colors) whereas the GIF file format only allows 256
colors. PNG excels when the image has large areas of uniform color. The
lossless PNG format is best suited for editing pictures, and the lossy
formats like JPG are best for final distribution of photographic-type
images because of smaller file size. Many older browsers do not yet
support the PNG file format. The Adam7-interlacing allows an early
preview even when only a small percentage of the data of the image has
been transmitted.
GIF
GIF (Graphic Interchange Format) is limited to an 8-bit palette, or
256 colors. This makes the GIF format suitable for storing graphics
with relatively few colors such as simple diagrams, shapes and cartoon
style images. The GIF format supports animation and is still widely
used to provide image animation effects.
BMP
The BMP (bit mapped) format
is used internally in the Microsoft Windows operating system to handle
graphics images. These files are typically not compressed resulting in
large files. The main advantage of BMP files is their wide acceptance
and use in Windows programs. Their large size makes them unsuitable for
file transfer. Desktop backgrounds and images from scanners are usually
stored in BMP files.
XPM
The
XPM format is the default X Window System picture format (very popular
in the Linux world). Its structure is based on the string format of the C
programming language. Because XPM was designed to be human-readable,
and is stored as uncompressed plain-text, the file size of these
pictures can be more than twice as large as uncompressed binary bitmap
files (such as BMP, uncompressed TIFF, MacOS-PICT, or Irix-RGB formats).
This format is unsupported by most non-Unix software and operating
systems (though many web-browsers retain display support for the XBM
subset, which was the minimal image format in the early days of the
WWW).
MrSID
The
MrSID (Multiresolution Seamless Image Database) format is a wavelet
compression format used mostly by Geographic Information Systems to
store massive satellite imagery for map software.
Vector formats
As opposed
to the raster image formats above (where the data describes the
characteristics of each individual pixel), vector image formats contain a
geometric description which can be rendered smoothly at any desired
display size.
SVG
SVG
(Scalable Vector Graphics) is an open standard created and developed
by the World Wide Web Consortium to address the need (and attempts of
several corporations) for a versatile, scriptable and all-purpose vector
format for the web and otherwise. The SVG format does not have a
compression scheme of its own, but due to the textual nature of XML, an
SVG graphic can be compressed using a program such as gzip. Because of
its scripting potential, SVG is a
key component in web applications:
interactive web pages that look and act like applications
GIF and JPEG are currently
the primary file types for graphics on the Internet. This article
provides an overview of each of them, as well as when each format should
be used.
The GIF Format
The
GIF format is one of the most popular formats on the Internet. Not only
is the format excellent at compressing areas of images with large areas
of the same color, but it is also the only option for putting animation
online (unless you want to use Flash or other vector-based animation
formats, which typically cost more). The GIF89a format also supports
transparency, and interlacing.
GIF files support a maximum of
256 colors, which makes them practical for almost all graphics except
photographs. The most common method of reducing the size of GIF files is
to reduce the number of colors on the palette. It is important to note
that GIF already uses the LZW compression scheme internally to make
images as small as possible without losing any data
When to
use them
Generally, GIF files should be used for logos, line
drawings and icons. Avoid using it for photographic images, and
graphics which have long stretches of continuous-tone in them. When
you're designing GIF files, avoid using gradients and turn off anti-
aliasing where possible to minimize the file size.
The JPEG Format
The JPEG format,
with its support for 16.7 million colors, is primarily intended for
photographic images. The internal compression algorithm of the JPEG
format, unlike the GIF format, actually throws out information.
Depending on what settings you use, the thrown out data may or may not
be visible to the eye. Once you lower the quality of an image, and save
it, the extra data cannot be regained so be sure to save the orginal
When
to use
As a rule, the JPEG format should be used on photographic
images, and images which do not look as good with only 256 colors.
|
optimize an image for the web using adobe photoshop
JPEG v. GIF - Which format should I
use? GIFs work well for
images with large blocks of color and sharp edges. Notice the difference
in file size. Using GIF format for this type of image produces a
small file. 
rose.gif
GIF Format, 3 KB
|
| 
rose.jpg
JPEG Format, 16 KB
|
| 
Zoom of rose.gif
|
| 
Zoom of rose.jpg
|
JPEGs work well for images with
continuous tones, such as photographs.
Again, notice the file size.
In this case, the JPEG is smaller. 
sunset.gif
GIF Format, 38 KB
|
sunset.jpg
JPEG Format, 20 KB
|
|  
|
This document explains how to reduce an image's file size and format it
for use on the Web. It is important to make image files as small as
acceptable quality will permit, since smaller images dramatically
decrease download time when users access your Web pages. |
|
You will need:
- an image, ready for processing, and
- access to Adobe Photoshop
|
 Reduce the
physical size of the image.
|
Most people are more comfortable with images that fit completely
on their screen. Reducing the physical size of images also dramatically
reduces the file size. For most machines, an image size of more than 550
pixels wide and 375 pixels high is safe.
- Open your image
in Photoshop by choosing File > Open . . . from the menu bar,
locating your file, and clicking the "Open" button.
- Under the
Image menu, select Image Size . . .
- Make
certain that the "Constrain Proportions" and "Resample Image"check boxes
are checked in the "Image Size" dialog box.
- Under the "Pixel
Dimensions," you will see numerical fields for "Width" and "Height." If
the largest value is the "Width," replace it with the number 550. If
the largest value is the "Height," replace it with the number 375.
- Click
"OK."
- If the image looks satisfactory, save it by choosing File
> Save from the menu bar.
| 
|
It is a good idea to save this image under a different file
name, leaving the original scanned image in its original form. That
way, if you decide to start over, you will not need to scan the image
all over again.
|
 Change the
image resolution.
|
Most monitors display images at 72 pixels per inch. Higher
resolution will be lost on the computer screen, though not in print. If
the intended use of the image is for computer display, such as a Web
page or PowerPoint presentation, you should reduce its resolution to 72
pixels per inch.
- Open your image in Photoshop.
- Under
the Image menu, select Image Size . . .
- Make
certain that the "Constrain Proportions" and "Resample Image" check
boxes are checked.
- In the "Print Size" section, there is a
"Resolution" numerical field. Make sure that "pixels/inch" is selected
in the pull-down menu to its right.
- If the number in this
field is larger than 72, change it to 72.
- Click "OK."
- If
the image looks satisfactory, save it by choosing File > Save
from the menu bar.
|  Change the
compression for JPEG files.
|
One of the most common file formats on the Web is called "JPEG."
It is commonly used with photographs, paintings, and any image which
requires many shades of color. JPEG images have a relatively small file
size compared to other digital file formats.
- From the File
menu, select Save As . . .
- Select a new name for the
file, making sure to add the file extension ".jpg" to the end of the
file name.
|
|
Be sure to save your file under a different name from the
original scanned image, since the following process cannot be undone.
- Make certain that "JPEG" appears in the "Format" or "Save
as" pull-down menu, and select it from the menu if it does not.
- Click
the "Save" button, which will bring up a '"JPEG Options" dialog box.
- In
the "Format Options" section, select "Progressive."
- In the
'"Image Options" section, enter a number from 0 (lowest quality) to 10
(highest quality) in the "Quality" field. Most images look fine saved
between 3 and 5.
- Click "OK."
- If the new image
looks satisfactory, you can return to the original and try repeating the
above steps with a lower "Quality." If the new file looks bad, return
to the original and repeat the above steps with a higher "Quality."
- When
you have finished, save the final copy of your image, remembering to
add the ".jpg" file extension to its name.
|
 Change the
number of colors for GIF files.
|
The other common Web file format is the "GIF" format, which uses a
more limited color palette than the "JPEG" format. GIF is used for
files with small numbers of colors, such as line drawings, icons, and
graphs. The most common technique for shrinking these files is to remove
any excess colors.
- Select Image > Mode
> Indexed Color . . . from the menu bar. If this is already
selected, select Image > Mode > RGB Color,
then return to this menu and select Indexed Color . . .
- Select
"Adaptive" from the "Palette" pull-down menu.
- Select "8
bits/pixel" from the "Color Depth" pull-down menu.
- From the
"Dither" pull-down menu, select "None."
- Click the "OK"
button.
- Choose Image > Mode > RGB Color from the
menu bar, then return to this menu and select Indexed Color . . .
- The "Palette" drop-down menu should now default to "Exact."
At this point, you can click "OK" and then save your file. However, if
you need further space saved, continue while preserving the original.
The following steps can drastically reduce file size, but they can cause
a loss of quality, so it is best not to work with the original.
- Select
"Adaptive" from the "Palette" drop-down menu in the "Indexed Color"
dialog box.
- Look at the number in the "Colors" field and
remember it or write it down.
- Under "Color Depth," select the
"bits/pixel" level so that the number of "Colors" is half the number
you wrote down.
- Click the "OK" button and examine the image.
If it looks fine, save it under a new file name and repeat the process
for the next lowest number of "Colors."
- When you have
finished, save the final copy of your image by choosing File >
Save as . . . from the menu bar, selecting "CompuServe GIF" as the
file format, adding the ".gif" file extension to its name, and clicking
the "Save" button.
| |
Transparent GIFs
Using Adobe Photoshop, the image
below was drawn against a white background. The copy on the left was
saved in GIF format without using transparency - notice how the
background of the image remains white although the background of the
table is set to yellow. The copy on the right was also saved in GIF
format, but with a transparent background.
face.gif
|
facetrans.gif
|
Color Palettes
To display a full-color image on a
256-color computer, an application must simulate colors it can't
actually display. The computer does this by dithering: combining pixels
from its 256-color palette into patterns that approximate other colors.
At a distance the human eye merges these dithered patterns into another
color, but up close the image appears speckled. Because different
operating systems and applications build color palettes according to
their particular needs, color variance arises when moving across
platforms and programs. You should prepare for the fact that visitors to
your website will be using different systems with various color
settings.
There is,
in fact, no one universal 8-bit palette that will not dither on all
platforms. However, there is a 216-color palette that will not dither on
most. The web-safe palette (or browser-safe palette) consists of 216
colors that display the same on both Macintosh and PC operating systems.
These colors will also display the same on PC systems using a low color
depth. By using the web-safe palette you will ensure that the graphics
you create look the same no matter what system or browser the viewer is
using. When displaying graphics created with non web-safe palettes, the
browser tries to approximate the color through dithering. This may work
fine for some graphics, but will often produce results far from what you
intended.
Web-safe
colors should be used for creating images with large blocks of solid
color. Photographs should not be remapped to web-safe color, as they
will take on a blocky appearance.
| Choosing
a web-safe palette in
Adobe Photoshop
| 
|
- Open Adobe Photoshop
- Click on the Swatches tab of the
floating palette for Color, Swatches, Brushes
- Click on the arrow in the upper
right, on the same line as the Swatches tab.
- Choose Replace Swatches.
(Note: "Load Swatches" will just add the new palette to the end of the
current palette, without indicating which palette is which).
- Open the Color
Palettes folder: c:\program files\adobe\photoshop 5.0\goodies\color
palettes
- Choose the file Web Safe Colors.aco, and click Load.
A web-safe color palette is
now loaded.
| 
true color
(millions
of colors)
|
| 
Screen shot of image
using
lower color depth (256 colors)
|
When web-safe colors are used to create
the image, it looks the same when
displayed in either mode.
true color
(millions
of colors)
|
| 
Screen shot of image
using
lower color depth (256 colors)
|
Although web-safe colors work well
for creating images with large blocks of color, photographs
should
not be remapped to web-safe color. The reason the first image looks
better is because
dithering works quite nicely with continuous tone
images. In fact, all JPEGs are dithered.
Look at the difference
below: 
Saved as a jpg,
using
millions of colors
|
| 
Saved as a jpg,
after
conversion to web safe colors
|
GIF
Cruncher and JPEG Cruncher
Free on-line tools for compressing GIFs and JPEGS
are available at www.gifcruncher.com
and www.jpegcruncher.com.
These tools are very useful for automatically reducing file size and
comparing different levels of quality. Each tool will return several
versions of your image, ranging from high quality and large file size,
to low quality and low file size. Choose the file which best suits your
needs, and save it to your disk. UsefulLinks:
The Photoshop
CS2 Book for Digital Photographers (with examples)
|
