Transcript GD-Basics

Images for Information and Interaction
One of the major features that make the World Wide Web stand out from other
forms of information media is that pages on the Web can contain full-color
images. It was arguably the existence of those images that allowed the Web to
catch on so quickly and to become so popular in so short a time. To place images
on your Web pages, those images must be in GIF or JPEG format (GIF is more
widely supported) and small enough that they can be quickly downloaded over a
potentially slow link. The use of images in Web pages is one of the bigger
arguments among users and providers of Web pages today. For everyone who
wants to design Web pages with more, bigger, and brighter images to take full
advantage of the graphical capabilities of the Web, there is someone on a slow
network connection who is begging for fewer images so that his or her browser
doesn't take three hours to load a page.
As a designer of Web pages, you should consider both the attractiveness and
loading time of web pages. Balance the fun of creating a highly visual, colorful
Web page with the need to get your information effectively to everyone you
wants to have it.
Images make the text information more vivid, support faster interpretations that
are not easily possible with text. So, we can say they are the epicenter of
multimedia. Images could be static or dynamic (in case of animations or
generating charts etc.). Static images could be created using any of the Image-
Editing tools or could be sourced from scanned images/image capture from
digital cameras, which in turn needs to be retouched for achieving good quality.
Animated images that may or may not have links are dynamic in nature. Some
basic GIF animations could be created using software like ImageReady and more
interactive complex animations could be achieved using advanced tools like
Flash.
As introduced earlier, the two most common graphic file formats on the web are
.GIF (Graphic Interchange Format) and .JPEG (Joint Photographic Experts Group).
These file formats are used on the web because they have the best compression.
Compression is the technique used to take a large file and turn it into a smaller
file by applying a fancy mathematical algorithm to it. Since many users are
accessing web pages on 28.8 modems, the smaller the file, the more quickly it
can be transferred over the net. Image size is no joke. If your images take too long
to load, a user will never even bother to wait to read about what you have to say.
A good rule of thumb is that you should use .GIF files for images and .JPEG files
for photographs.
Use the GIF format in these situations
• Transparent images.
• Table or page backgrounds that use only a few colors.
• Anytime when 256 colors is sufficient for the image
Use the JPEG format in these situations:
Images created from photos, especially of people, scenic, animals, etc.
When you need a background consisting of colors that are not available in
the GIF format. The .GIF format is also interesting because of the amount
of "special effects" it provides. Besides a standard .GIF file, you can easily
download freeware programs to create interlaced .GIF files, transparent
.GIF files, and animated .GIF files.
An interlaced .GIF file is a file that loads in pieces. It starts out fuzzy and
continually focuses until it is in perfect focus. Interlacing does not actually speed
up the loading of the image, but it does make a user feel as if it does because they
can watch it materialize.
Transparent .GIF's allow you to specify a single color that will become
transparent, thus allowing the background to show through. This is useful when
you want to create the illusion of irregularly shaped artwork such as when you
add text art to your page. Instead of getting an ugly square box around your text, a
transparent .GIF will make the type appear to blend right into the page. The
following example shows the same image, one with no transparency and one with
a transparent background.
Animated .GIF files allow you to merge several images into one in order to
create a cell animation. Note that for each cell, the image is that much larger,
so you must take care to make your animation in as few cells as possible.
Animated banners, or pictures, are some of the largest file size images on the
web. This is because they really consist of multiple images, which means larger
overall file size and increased download time.
Modern image animators will compress the images used in an animation by
removing pixels that are duplicated between the image frames. This can be a
tremendous benefit with animations consisting of similar looking frames.
File Formats
Overview of various multimedia file formats
Graphics File Format
Extension
Features & Description
.gif
Used for Web Graphics – Small, only 256 colors can
have transparencies and animation.
.jpg
Small, Compressed can have millions of colors.
.psp
Internal format for Paint Shop Pro, useful if you are
not done editing a photo.
.psd
Internal to Adobe PhotoShop, useful for transfer to
PhotoShop from Paint Shop Pro or other Adobe
applications.
.png
New format for use on the Web. Compressed, millions
of colors, transparencies. Some quirks with display
.tif
Common in use with early scanners, very large files. Best
to avoid this format.
.wmf
Windows Metafile. Useful for clipart, can be used to make
large area, small sized web background .gifs
.bmp
Large files, used for Windows programs and backgrounds.
.pcx
Common older general purpose format, do not use on the
web
.pcd
Kodak PhotoCD Format, used with Photo Developing
BMP: It is the native format for MS Paint, the generic graphics program
included with Windows. BMP supports 16 million colors and RLE (Run Length
Encoding) compression. You can open and save BMP files in RGB, Indexed,
Grayscale, and Bitmap color modes.
JPEG (Joint Photographic Experts Group): Primarily used for two purposes – to
compress files and to save files for use on the Web. You can open and save JPEG
files in RGB, CMYK, and Grayscale color modes. It is a lossy compression mode,
which means that it loses information to make the file smaller. The amount of
data that is lost depends on the settings you choose when you save a file in JPEG
format.
GIF (Graphics Interchange Format): GIF, which stands for Graphics Interchange
Format, is a loss less method of compression. All that means is that when the
program that creates a GIF squashes the original image down it takes care not to
lose any data. It uses a simple substitution method of compression.
The maximum compression available with a GIF therefore depends on the
amount of repetition there is in an image. A flat color will compress well sometimes even down to one tenth of the original file size - while a complex,
non-repetitive image will fare worse, perhaps only saving 20% or so. There are
problems with GIFs. One is that they are limited to a palette of 256 colors or less.
CompuServe, which created the GIF, did at one point say it would attempt to
produce a 24-bit version of the GIF, but then along came problem number two:
Unisys. Unisys discovered that it owned some patents to key parts of the GIF
compression technology, and has started demanding fees from every company
whose software uses the (freely available) GIF code. This has somewhat stifled
development. There is a 24-bit, license-free GIFalike called the PNG format, but
this has yet to take off
PCX (PC Paintbrush):
Native format for PC Paintbrush, the Windows paint
program. PCX supports 24-bit color. You can open and PCX in RGB< Indexed,
Grayscale and Bitmap color modes.
PICT (Macintosh Picture): Native Macintosh image format. This format has been
used extensively in desktop-publishing applications and for transferring files
across platforms. PICT can support bitmaps and object-oriented images. It can
compress files and works particularly well on images with large areas of color,
such as black and white alpha channels
TIFF (Tagged Image File Format): A Standard for images that will be placed in
desktop-publishing programs. It can be transported across platforms and
compressed to reduce file size. You can open and save TIFF files in RGB, CMYK
(with alpha channels), Grayscale, Lab, Indexed, and Bitmap (without alpha
channels) color modes.
PCD (Kodak PhotoCD): PhotoCD is a technology developed by Eastman Kodak for
high-quality, visually lossless image capture and storage. PhotoCD service
providers are licensed by Eastman Kodak to capture (or convert) images to Kodak
PhotoCD format and to write them to a specialized CD-ROM disc called a Kodak
Digital Science PhotoCD Disc. These discs are each capable of holding up to 100
or more high-quality images. They are multi-session CD-ROM's, which means that
a customer can have a few images added to the disc and bring it back to have
more added at a later time. Images on the disc are stored in a specialized file
called an Image Pac that contains five (or sometimes six) copies of the image at
resolutions ranging from 72K to 18 (or 72) megabytes in file size. Image Pac's may
be used on any IBM-PC Compatible, Macintosh or UNIX computer. Each image is
accessible through Kodak's PhotoCD Access software. Wide acceptance of the
Kodak PhotoCD format in the graphic arts industry has made the Image Pac a
reliable standard for desktop publishers. Depending on the user's intentions,
other software may be used to manipulate PhotoCD Images including:
• Kodak KPCMS Filters for Photoshop, Illustrator, PageMaker & other
• Desktop publishing applications
• Kodak PhotoCD Acquire Filter for Photoshop
• Kodak PhotoInsert software for Microsoft Office applications
• Internal PhotoCD filters in programs such as Microsoft PowerPoint
• Corel PhotoPaint
Photographers and photo labs can use the larger resolutions, especially the Base x
64 image in the 6resolution Image Pac, for archiving "electronic film" and for
photo retouching and restoration.
PSD (Photoshop format): Native Photoshop format – retaining all the Photoshop
specific features like layers, channels etc. Corel’s Painter and Photo Paint and
Jasc’s Paint Shop Pro can import PSD files with layers. To use an image in a PSD file
in Quark, you will need to flatten it (eliminate its layers) and convert it to TIFF, EPS
or other compatible format.
PNG (Portable Network Graphic): Supports transparency and 16 million colors.
Supports RGB and Grayscale color modes (with one alpha channel). Compression
possible.
ABC of Colors
Color Models
A color model is an orderly system for creating a whole range of colors from a
small set of primary colors. There are two types of color models, those that are
subtractive and those that are additive. Additive color models use light to
display color while subtractive models use printing inks. Colors perceived in
additive models are the result of transmitted light. Colors perceived in
subtractive models are the result of reflected light.
The Two Most Common Color Models
There are several established color models used in computer graphics, but the
two most common are the RGB model (Red-Green-Blue) for computer display
and the CMYK model (Cyan-Magenta-Yellow-Black) for printing.
RGB Color Model
1.Additive color model
2.For computer displays
3.Uses light to display color
4.Colors result from transmitted
light
5.Red+Green+Blue=White
CMYK Color Model
1.Subtractive color model
2.For printed material
3.Uses ink to display color
4.Colors result from reflected light
5.Cyan+Magenta+Yellow=Black
Notice the centers of the two color charts. In the RGB model, the convergence of
the three primary additive colors produces white. In the CMYK model, the
convergence of the three primary subtractive colors produces black. In the RGB
model notice that the overlapping of additive colors (red, green and blue) results
in subtractive colors (cyan, magenta and yellow). In the CMYK model notice that
the overlapping of subtractive colors (cyan, magenta and yellow) results in
additive colors (red, green and blue). Also notice that the colors in the RGB model
are much brighter than the colors in the CMYK model. It is possible to attain a
much larger percentage of the visible spectrum with the RGB model. That is
because the RGB model uses transmitted light while the CMYK model uses
reflected light. The muted appearance of the CMYK model demonstrates the
limitation of printing inks and the nature of reflected light. The colors in this chart
appear muted because they are displayed within their printable gamut (see
below).
Additive vs. Subtractive Color Models
Since additive color models display color as a result of light being transmitted
(added) the total absence of light would be perceived as black. Subtractive color
models display color as a result of light being absorbed (subtracted) by the
printing inks. As more ink is added, less and less light is reflected. Where there is a
total absence of ink the resulting light being reflected (from a white surface)
would be perceived as white.
Color Gamut and Color "Space
Examples of color depth are shown in the following table
Color Depth
No. of Colors
Color Mode
1 bit color
2
Indexed Color
4 bit color
16
Indexed Color
8 bit color
256
Indexed Color
24 bit color
16,777,216
True Color
Determining Color Depth
Since each bit represents 2 colors, it is easy to work out the number of colors for
the various color depths. The number of possible colors would be 2 to the
power of the number of bits per pixel:
A
color
depth
of
4
bits
would
be
2
times
itself
4
times:
8
bits
would
be
2
times
itself
8
times:
be
2
times
24
times:
2 x 2 x 2 x 2 = 16 colors
A
color
depth
of
2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 colors.
A
color
depth
of
24
bits
would
itself
2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x
2 = 16,777,216 colors
True Color
Images are known as "True Color" where each pixel is defined in terms of its
actual RGB or CMYK values. Every pixel in a true color image has 256 possible
values for each of it's red, green or blue components (in the RGB model) or cyan,
magenta, yellow and black (in the CMYK model). Because there are 256 possible
values for each RGB or CMYK component, then RGB true color would have a 24-bit
color depth and CMYK true color would have a 32-bit color depth. There are
millions of possible colors for each pixel in a true color image. That's why it is
called "True Color".
RGB images are derived from the 3 primary colors of red, green and blue. In 24-
bit RGB color, each red, green and blue component is 8 bits long and has 256
variations in intensity. These variations are represented in a scale of values
ranging from 0 to 255 with 0 having the least intensity and 255 having the
greatest. When the 3 components are combined there are 256 x 256 x 256
possible combinations or 16,777,216 possible colors.
For example, white would be composed of maximum intensity of red, green
and blue light (R=255 G=255 B=255) and black would be composed of zero
intensity of red, green and blue light (R=0 G=0 B=0). Cyan would be composed
of maximum intensity of blue and green light and zero intensity of red light
(R=0 B=255 G=255). Magenta would be composed of maximum intensity of red
and blue light and zero intensity of green light (R=255 G=0 B=255):
R=255
G=255
B=255
R=0
G=0
B=0
R=0
G=255
B=255
R=255
G=0
B=255
True Color and the CMYK Color Model
Images using the CMYK color model are also true color. CMYK images
are derived from the 3 primary colors of cyan, magenta and yellow plus
black. In 32-bit CMYK color, each cyan, magenta, yellow and black
component is also 8 bits long and has 256 variations in intensity. Each
pixel in a 32-bit CMYK image is one of 256 x 256 x 256 possible colors x
256 variations of black. A mix of 100% each of cyan, magenta and yellow
produces black, so the black component is extra. Even though there are
more bits per pixel in the CMYK model, in reality it has a smaller color
"space" or gamut than RGB. Many graphics programs support both color
models.
Indexed Color
Images which do not define colors in terms of their actual RGB or CMYK values
and which derive its colors from a "palette" are known as "Indexed Color". The
color palette of an indexed color image has a fixed number of colors. Because the
palette is limited to a maximum of 256 colors, it is not possible for an image to
look as realistic as it can use RGB or CMYK. Hence, they are not true color. This
type of color is known as "Indexed Color" because colors in the palette are
referenced by index numbers which are used by the computer to identify each
color. Some file formats restrict the number of colors to fewer than 256. The GIF
format is one such format and has a color depth of 8 bits per pixel or less. GIF files
use indexed color and allow a maximum of 256 colors. TIFF files can be stored as
indexed color or true color.
A sample palette is shown below:
Windows 16 Color Palette with Index Numbers
Grayscale Images
Grayscale images have a maximum
color depth of 8 bits. The reason for this
can also be worked out easily. When
defining shades of gray in terms of RGB,
each of the 3 red, green and blue
components must be equal to each
other. Examples of grays are R=192
G=192 B=192, and R=128 G=128 B=128.
Since all three components must be
equal for any shade of gray there are
only 256 possible combinations. Thus,
grayscale images have a maximum color
depth of 8 bits. A complete 256 color
grayscale palette is shown in the sample
images below.
It is possible to create a grayscale image with a 4-bit color depth or less. Some
software packages allow the user to reduce the number of colors in the palette
from 256 to 16 or 2, though one would hardly classify a 2-color image as
grayscale.
Browser Safe Color
Browser software is your window into the web. You can’t see web pages without
the browser, so the browser plays a huge role in how your images are displayed,
especially when viewed on 256-color systems. Fortunately, the most popular
browsers all share the same palette management process. They work with the
system palettes of each respective platform. This means that any artwork you
create will be forced into a variety of different palettes, depending on which
operating system it is views from. If you work with browser-safe colors when you
create artwork, you still have the important task of ensuring that those colors
remain browser safe during the file format conversion process. Unfortunately,
files that are converted to JPEG do not retain precise color information. The lossy
compression method used throws away information. So for graphics with lot of
solid color, it is advisable to save in GIF format and retain the color information.