9Lesson 9: Web Graphics

Transcription

9Lesson 9:
Web Graphics
Objectives
By the end of this lesson, you will be able to:

3.3.1: Distinguish between vector and raster graphic types.

3.3.2: Identify and choose appropriate image file formats, including browsercompatibility issues and lowest common denominator in audience usability (e.g., GIF
87a, GIF 89a, JPEG, JPEG 2000, PNG, BMP).

3.3.9: Insert metadata into images to ensure accessibility and to ensure higher page
ranking in search engine result pages.

3.3.10: Identify the benefits and drawbacks of using stock photography when
developing a site (e.g., license-free vs. licensed stock photos, increase in project
speed, reduction in creative control).

4.1.2: Identify accessibility issues and solutions related to Web images and animation
(e.g., text-reader capability, captioning).

4.1.5: Identify Scalable Vector Graphics (SVG) characteristics (e.g., XML-based, twodimensional, searchable, scalable, zoom support).
9-2
Web Design Specialist
Pre-Assessment Questions
1.
Name three characteristics of good Web graphics.
2.
Web images can be categorized into what two graphic formats?
3.
Which term describes the approximation or reconciliation of colors between an image
palette and the system palette?
a.
b.
c.
d.
Palette flash
Resolution
Dithering
Color depth
© 2013 Certification Partners, LLC — All Rights Reserved
Version 1.1
Lesson 9: Web Graphics
NOTE:
Graphics are not
used only for
aesthetics. Images
are memorable and
can be used to
underscore a point
or sell a product.
Web images should
be made functional
whenever possible.
OBJECTIVE
3.3.10: Stock
photography in site
development
9-3
Web Site Images
Images are essential in Web site design. Users have come to expect a visually pleasing
experience that can only be achieved with the use of images. Images can also be used for
navigation in the form of image maps and graphical buttons that link to other pages or
resources. On a corporate site, the organization's logo and trademarks are crucial for
name recognition and branding.
Graphics illustrate content, provide backdrops for other activities, and offer a means of
navigating a Web site. Several concepts are important to Web graphic artists.
Using stock images
Stock photography refers to images for which you can purchase the rights to use the
images in printed material or on a Web site. Photographers file their images with an
agency that negotiates licensing fees on the photographer's behalf. Stock images are then
licensed from the agency.
Many modern stock photography distributors offer still photos, videos and illustrations.
Millions of photos are available for licensing, and all images on stock photography Web
sites include embedded metadata that makes it easy to search for images based on
keywords.
Licensing
To use a stock image, you must purchase a license for the image. The license is a onetime fee that allows you to use the image multiple times for multiple purposes. Generally,
there is no time limit for using the image, but there is usually a restriction on how many
times the image can be reproduced. The specified number of times an image can be
reproduced is often referred to as a print run. For example, a license might allow the
purchaser to print 500,000 copies of a brochure using the image.
Two types of licensing are available:
•
Royalty-free license — allows the buyer to use an image without having to pay a
royalty each time the image is used. Royalty-free does not imply that the image is free
to use without purchasing a license or that the image is in the public domain. The
buyer also does not have the right to resell or transfer the image. The fee for the
image is usually based on the size of the digital file. For example, a 600-KB image
might cost $50, whereas a 10-MB version of the same image might cost $200.
•
Rights-managed license — allows the buyer to "rent" an image through negotiation
of a specific price for a specific use. Some rights-managed licenses stipulate
exclusivity; that is, the buyer may restrict similar use of the image by others for the
duration of license. Rights-managed licenses are usually more expensive than
royalty-free licenses, but they allow for much larger print runs. For example, a
magazine with a large print run would use a rights-managed license instead of a
royalty-free license. Generally, the fee charged is based on the scope of the project.
For example, you might pay $200 to use an image in a small brochure, or many
thousands of dollars to use an image in a national advertising campaign.
Version 1.1
9-4
Advantages and disadvantages of using stock images
When developing a Web site, there are both advantages and disadvantages to using stock
photography.
Advantages include saving time and money. Image databases are quick and easy to
search, licenses can be purchased online, and images are downloaded immediately for
use. Licenses (especially royalty-free licenses) are much less expensive than hiring a
photographer and models for a photo shoot, in most cases.
Even if you were to use internal resources for conducting a photo shoot (thereby saving
the cost of the licensing fee), you must consider the time factor. Using stock photos
increases project speed. Another advantage to using stock photography is that you know
exactly what the finished image looks like, while an assignment photo shoot may deliver
photos that require editing.
Disadvantages to using stock photography are (in some cases) the cost associated with
the licensing fees, and a reduction in creative control. You have to select from the images
that are available, and you may not be able to find exactly what you want.
Online stock photography resources
There are numerous stock photography Web sites with large databases of searchable
photos and videos. These include but are not limited to the following:
•
Jupiter Images (www.jupiterimages.com)
•
Getty Images (http://gettyimages.com)
•
Shutterstock Images (www.shutterstock.com)
In addition to licensing single images, many sites offer access to collections of images on
a monthly or yearly subscription basis.
Microstock photography
Microstock photography is an offshoot of stock photography. Online microstock
photography provider iStockphoto (www.istockphoto.com) pioneered the microstock
photography industry. Microstock providers deal almost exclusively over the Internet,
accept photographs from amateur photographers as well as professionals, and sell their
images at a very low cost (generally from US $0.20 to US $10).
Image prices are based on credits. An image may cost between 1 credit and 20 credits,
depending on size, and credits may range from less than US $1 to US $1.40 each.
Contributing photographers categorize their images with keywords and upload them to
the site's inspection queue, where they are reviewed for quality. Photographers receive a
commission of between 20 percent and 40 percent of every sale. iStockphoto also sells
vector graphics and raster illustrations.
Critics of iStockphoto contend that the company is devaluing the stock photography
market by selling images so far below accepted price standards. The commission rate is
also below the industry norm (50 percent) and is based on much lower purchase fees.
Free images
Some Web sites offer free use of digital photos for personal and commercial use. Certain
restrictions can apply to these images, such as the domain name of the Web site must not
be removed from the photo, the photos may not be resold, and the photographer retains the
original copyright. A few sites that offer images free of charge include the following:
Version 1.1
•
FreeStockPhotos.com (www.freestockphotos.com)
•
FreeImages.co.uk (www.freeimages.co.uk/)
•
Freepixels (www.freepixels.com)
9-5
Another possible source for free images is photosharing Web sites. Although the images
do not require a license, photographs on these Web sites are copyrighted to the
photographer, and you will need to contact the photographer or owner of the photo to
obtain permission to use the images.
Photosharing
Photosharing Web sites allow you upload, organize, view, share and download photos and
other image files. Some sites are free, while others offer subscription-based services. Free
sites generally rely on advertising or the selling of prints for revenue. Some sites offer
subscriptions for their premium services, and they offer a free package that has a scaleddown feature set.
Some photosharing sites require you to download an application for uploading and
managing photos. Some sites also support only specific platforms or browsers.
NOTE:
Tags and tagging
will be discussed in
the next section.
The best sites allow you to create private and public photo albums (and include
password-protected access); prevent unauthorized downloading of photos (for example,
through right-clicking and selecting a save option); provide online tools for editing photos
(cropping, red-eye removal, etc.); offer the ability to buy and sell prints and other gifts;
and allow you to search for photos by keyword "tags" or date. Several sites accept
pictures taken with cameraphones, and some allow you to upload and share videos as
well.
History
The first photosharing sites appeared in the late 1990s, offering photo finishing such as
touch-ups and red-eye removal, and online ordering of prints.
As digital cameras and cameraphones became more widely used, more and more users
signed up for photosharing services. Today, many photosharing sites include social
networking and business elements, such as the ability to create and join communities,
the ability to create private and public photo albums, and the ability to sell your personal
photographs online.
Modern photosharing services strive to make organizing, storing and sharing digital
photos convenient, safe and easy. These sites offer various ways to share pictures,
including the purchase of prints, and the creation of unique photo gifts such as luggage
tags, post cards, mugs, mouse pads, calendars, etc.
Some sites are also geared to professional and semi-professional photography enthusiasts
who want to sell their work, or who want a forum where they can display their photos
and receive feedback from other photographers around the world.
Selecting a photosharing service
When selecting photosharing sites and services, consumers may consider ease of use,
tools available for managing photo albums and videos, tools available for photo editing,
service fees, storage space and daily upload limits, absence of ads and spam, the ability
to buy and sell prints, and password-protected access, among other features. Several
sites advertise themselves as "family-friendly," prohibiting photos or other media
portraying explicit nudity.
Version 1.1
9-6
Popular photosharing sites include the following:
OBJECTIVE
3.3.9: Metadata in
images
NOTE:
Metadata will be
discussed in detail in
a later lesson.
tag
A user-defined nonhierarchical term
assigned to an item
for categorization
purposes.
•
dotPhoto (www.dotphoto.com/)
•
Webshots (www.webshots.com/)
•
Fotki (www.fotki.com/us/en/)
•
Flickr (www.flickr.com)
•
SmugMug (www.smugmug.com)
•
Picasa (http://picasa.google.com)
•
Shutterfly (www.shutterfly.com)
Adding metadata to images
Metadata is data about other data. On the Web, metadata often provides a description or
synopsis of a Web page, can include keywords used by search engines, and can denote
authorship of a file. Including metadata in your pages and images can help visitors find
your site.
Metadata for photographs typically includes the date and time a picture was taken and
the details of the camera settings. Many digital cameras record metatdata in
exchangeable image file format (EXIF).
A key feature of photosharing sites is the ability to tag items in order to categorize them.
A tag is a non-hierarchical keyword or term that you can assign to an item such as a
Web page or an image file. Tagging or "image tagging" an item allows it to be found again
by browsing or searching; that is, a tag is metadata.
Tags are considered a bottom-up system of classification, in contrast to hierarchies,
which are top-down systems. In a hierarchical system (also called a taxonomy), a
designer specifies a limited number of terms that can be used for classification, and there
is one correct way to classify each item. In a tagging system, users decide how to tag an
item. There is an infinite number of ways to classify an item, and there is no wrong way.
An item may have several tags, and thus belong to several different categories.
Many photosharing sites allow users to tag their images, making the pictures highly
searchable. Some sites even allow for geotagging, which is the process of adding
geographical identification metadata to photos and videos. Geographical metadata
usually includes latitude and longitude coordinates, and can also include place names.
NOTE:
Search engine
optimization (SEO)
will be discussed in
detail in a later
lesson.
Using metadata in your images (along with properly naming your Web pages and using
keywords in your pages) can help you achieve higher rankings in searches.
In the following lab, you will use Picasa to add metadata tags to an image. Suppose you
are creating a Web site for a dog trainer, and she has several photos of her "clients" that
she wants posted to her Web site. You can add metadata tags to the images so that
people searching for photos of dogs or of a particular breed will see some of the images
and thereby increase the chance of a visit to her Web site.
Version 1.1
9-7
Lab 9-1: Adding tags to a photo
In this lab, you will use Picasa to add tags to a digital photo.
1.
Desktop: Copy the C:\CIW\Web_Dsgn_Spec\LabFiles\Lesson09\Lab_9-1 folder to
your Desktop.
2.
Browser: Go to http://picasa.google.com and download and install Picasa 3 (The
current version as of this writing is 3.6). Accept the suggested defaults. When the
installation is complete, close and reopen Picasa.
Note: The picasa36-setup.exe binary file is located in the LabFiles\Lesson09\Lab_9-1
folder of the supplemental materials for this course. You can use this file to install
Picasa 3 if you wish.
3.
Picasa 3: In the Folder list on the left side of the window, click the Lab_9-1 folder to
display its contents in the main portion of the window. Click the image to select it.
Notice that file properties for the picture (file name, creation date, picture dimensions
and file size) display in the blue bar that separates the upper portion of the window
from the lower portion, as shown in Figure 9-1.
Note: If you cannot locate the Lab_9-1 folder, select File | Add File To Picasa,
navigate to the Desktop\Lab_9-1 folder, then double-click Age7.jpg.
Figure 9-1: Picasa 3 interface
4.
Double-click the Age7 image to open it in an editing window.
5.
Select Picture | Properties to display the file properties in a dialog box. A few
additional properties such as resolution, JPEG quality and unique ID are indicated.
Click OK to close the properties dialog box.
Version 1.1
9-8
6.
Select View | Tags to open the Tags panel on the right side of the window, as shown
in Figure 9-2. You use this panel to add tags to your pictures.
Figure 9-2: Picasa 3 Tags panel
7.
In the Type In A Tag To Add box, type dog, then click the plus sign (+) to add the tag.
8.
Add the following tags to the image: pit bull, female, trampoline, family pet.
9.
Redisplay the properties for the picture. Notice that your user-defined tags now
display as properties, as shown in Figure 9-3.
Figure 9-3: Updated picture properties
Version 1.1
9-9
10. Close the properties dialog box. In the top-left portion of the window, click the Back
To Library button to exit the editing window, then quit Picasa 3.
11. If time permits, upload the tagged photo to the Web (a Google account is required and
you must have Picasa Web Albums installed). Set the visibility for the album to Public
and click the View Online button to see the uploaded photo.
In this lab, you added tags to a photo.
Digital Imaging Concepts
All digital images have certain attributes that can drastically affect quality and file size. A
few of these attributes are discussed in this section.
Pixels
NOTE:
You were
introduced to pixels
in the lesson that
discussed page
layout and color
theory.
NOTE:
Be sure that you
understand the
difference between
image resolution
and color depth.
Resolution relates to
the clarity of an
image, without
regard to color.
The term "pixel" is short for "picture element." The pixel is the smallest unit displayed by
a computer monitor. Pixels in a grid form the building blocks for images a computer can
display.
Color depth
Pixels provide some amount of color information. This information, measured in bits,
determines how many colors each pixel can display. For example, pixels with 4 bits of
grayscale information can display up to 16 shades of gray. Eight bits of color information
per pixel produces up to 256 bits of color information, and so forth. Higher bit values
(also called bit depths) result in more intense or realistic colors. As the color depth
increases, however, so does the file size.
Image resolution
A user's monitor resolution determines how large onscreen images will be displayed.
Screen resolution depends on the number of pixels present in a monitor's height and
width. Higher screen resolutions display more pixels per inch (ppi). For example, a 15inch monitor set to a resolution of 800x600 will not display as many pixels per inch (ppi)
as a 15-inch monitor set to 1024x768.
For printing, greater detail is achieved with higher-resolution images, and this detail is
measured in dots per inch (dpi). When scanning images from a print source or importing
pictures from a digital camera for use on the Web, it is generally accepted that you
should set the resolution to 72 dpi in order to display the image on screen at
approximately the same size as the original image.
For Web images, the dimensions of the image in pixels — rather than the dpi or ppi — are
most important. When designing a Web site, you will typically resize images to the
dimensions you want to use on your Web page.
The relationship between actual size and pixel size can be a bit confusing at first. To
understand it, consider an image that is 100 pixels wide by 100 pixels tall. If this image
is displayed on a 17-inch monitor set to 800x600 resolution, the image will occupy oneeighth of the width and one-sixth of the height available on the monitor screen. If the
monitor is set to a resolution of 1280x960, then the image will take up less space on the
screen. The monitor has not increased in size, and the image is still 100 pixels by 100
pixels. What has changed is that the monitor is displaying more pixels per inch (ppi).
Because monitors can be set at different resolutions, there is no way to specify that an
Version 1.1
9-10
image should be 1 inch long, for example, on a Web page. Instead, you specify image size
in pixels, such as 100 pixels or 224 pixels.
Palettes
Although an 8-bit color display can show millions of colors, it can only display 256 colors at
one time. The system maintains these 256 colors in a system palette. A 16-bit display can
display 65,536 colors at once, and a 24-bit display can show 16.7 million colors at once.
Most users currently have the ability to view at least 16-bit color, so limiting the number of
colors you use is not as big an issue for Web designers as it was several years ago.
When you create an 8-bit image using a vector or paint program, the program builds a
palette based on the colors used in the image. The system palette then adjusts slightly to
convey the correct colors when the image is displayed. When you display several images,
either in sequence or simultaneously, you might experience a disconcerting flash of
colors known as palette flash or palette shift.
Palette flash occurs when a significant discrepancy exists between the image bit depth or
palette and the system bit depth or palette. To overcome this limitation, the browser
automatically applies a technique called dithering to the image.
NOTE:
As discussed in the
lesson about page
layout, dithering will
not occur if you limit
colors to those in
the browser-safe
color palette.
Browser-safe colors
are listed at
www.lynda.com/
resources/webpalet
te.aspx.
Dithering
Dithering is the approximation or reconciliation of colors between an image palette and
the system palette. The dithering process works by placing two colors from the system's
palette next to each other in order to trick the eye into seeing a third color that is desired
but not part of the palette. Dithering makes it possible to display images that contain
more colors than the system displaying them can support.
When a Web browser encounters an image that contains colors not supported by the
current monitor settings, the browser will automatically use dithering to try to approximate
the correct colors in the image. Unfortunately, dithering can alter the image's appearance in
ways you might not want. In particular, a high-color image such as a photo can appear
grainy when displayed on a computer that supports only 256 colors.
When you create Web images using a graphics-editing program, you can specify whether
the image should use dithering or whether the graphics application should change the
image colors to the closest browser-safe colors. If you use only colors in the safe 216color palette that can be displayed on both Firefox and Internet Explorer browsers (i.e.,
browser-safe colors), then your images will not dither when viewed on any browser.
However, using only browser-safe colors severely limits the range of colors and types of
images you can use on your pages, and is rarely an option for photographic images. The
consensus among designers today is that you should use browser-safe colors whenever
possible. Fortunately, this issue is becoming less problematic because most computers in
use today support resolutions higher than 8-bit display.
Raster vs. Vector Graphics
OBJECTIVE
3.3.1: Vector vs.
raster graphics
Web images can be categorized into two graphic formats: raster (or bitmap) and vector.
Each format has different file subtypes.
Version 1.1
9-11
Raster graphics
The most common graphic format is raster, also known as bitmap. Raster graphics use
small dots to create images and colors. Raster graphics include the JPEG, GIF and PNG
formats.
NOTE:
Raster graphics are
frequently called
bitmap graphics. It is
important to
understand that
these two terms
mean the same
because both terms
are widely used.
The larger the dimensions of the image, the larger the associated file size. When viewed
with magnification, a raster graphic resembles a series of little squares, each of which
has a color value that contributes to the overall shape. Because raster graphics are
created using actual dots of color, making a raster graphic larger decreases the image
resolution. In other words, if a raster graphic has 72 dots per inch (dpi) and is 1 inch
wide, it will have 36 dpi if you make it 2 inches wide using magnification. Figure 9-4
shows a raster image as it looks when magnified.
Figure 9-4: Magnified view of raster image
NOTE:
It is important to
understand the key
characteristics of
raster images in
Web development:
They work best for
photos, and image
size affects file size.
For a raster graphic to render its shape, the browser and the available RAM work in
unison to load the graphic. The information for each pixel is stored, and then rendered in
the browser to create the image. The reason that larger raster images result in larger file
sizes is that more pixels must be instructed on the values to display. Removing pixels and
compressing files will decrease file size, but will also reduce image quality. Raster
graphics are best suited for photographs and realistic graphics.
Vector graphics
NOTE:
You can review and
apply concepts of
appropriate use for
raster and vector
graphics in Activity
9-1: Identifying
graphic formats and
files.
Vector graphics are quite different from raster graphics in their rendering process. Vector
graphics store the information about the image in mathematical instructions that are
then interpreted and displayed.
For example, to create a circle, the vector graphic need only know the center coordinates,
radius and color values. With this information, mathematical instructions are used to
render the graphic. To increase the size of the circle, only the information values need to
change, therefore increasing the size of a vector does not increase the file size of the
image. Figure 9-5 shows a sample graphic and illustrates how the graphic uses lines to
interpret and render the shape.
Version 1.1
9-12
Figure 9-5: Vector image using mathematical interpretation
NOTE:
It is important to
understand the key
characteristics of
vector images in
Web development:
They work best for
line art and
illustrations, and
image size does not
affect file size.
Another advantage of vector graphics is their ability to scale to the output device being
used. Vector has this ability because it is not resolution-dependent. Vector graphics are
best suited for line art, shapes and illustrations.
Graphics Applications
You can create, retouch and export Web-ready digital images with a variety of graphics
programs. These programs can be divided into two general groups: vector-based drawing
programs and paint-type programs.
Vector-based drawing programs
Vector-based drawing programs map shapes that you create onto an invisible grid. Image
information is stored as a set of mathematical instructions. As previously discussed,
vector graphics are resolution-independent, meaning that computer monitor settings do
not affect their size or appearance. Vector files are also smaller than similar paint-type
image files. Vector graphics are commonly used in high-end three-dimensional and
Virtual Reality Modeling Language (VRML) environments.
Currently, vector graphics cannot deliver truly photo-realistic detail, and they display
somewhat more slowly on screens. They also require a browser plug-in or helper
application for viewing on the Web. However, vector graphics work very well for
industrial, manufacturing, scientific and educational purposes.
If you want to develop your own graphics, vector-based drawing applications commonly
used in the industry include the following:
•
Adobe Illustrator CS6
•
Adobe FreeHand MX
•
CorelDRAW X5
•
Inkscape
•
Adobe Fireworks CS6
Note that Fireworks supports both vector and raster graphics. You will be introduced to
this application later in the course.
Version 1.1
NOTE:
You may find it
difficult to
remember how to
distinguish between
paint and draw
programs. Draw
programs use
mathematical
vectors to draw
lines, whereas paint
programs can
spread color over
an area of a
bitmap.
9-13
Paint programs
Paint-type programs create raster images from scanned photos and video frame captures,
or can be used to create original artwork. Raster files can represent highly detailed
images. As previously discussed, a raster graphic is an arrangement of small dots, and
each dot corresponds to a pixel on the screen. Raster images can be edited pixel-by-pixel
if necessary. One drawback of rasters, however, is that the original files are large. Both
JPEG and GIF formats are raster graphic types.
If you want to develop your own graphics, paint-type applications commonly used in the
industry include the following:
•
Adobe PhotoShop CS6
NOTE:
You can review and
apply concepts of
appropriate use for
draw-type and
paint-type
applications in
Activity 9-1:
Identifying graphic
formats and files.
•
Microsoft Image Composer
•
Corel PaintShop Photo Pro X3
•
Adobe Fireworks CS6
OBJECTIVE
3.3.2: Image file
formats
Graphic images come in numerous file formats: bitmap (BMP), Tagged Image File Format
(TIFF), Windows Metafile (WMF), Graphics Interchange Format (GIF), Joint Photographic
Experts Group (JPEG), Portable Network Graphics (PNG) and Scalable Vector Graphics
(SVG).
Note that Fireworks supports both vector and raster graphics. You will be introduced to
some basic functions of this application later in the course.
Image File Formats
Only GIF and JPEG are natively supported by all browsers; other file formats can be
viewed with the aid of a plug-in. Native support means that the browser does not require
any special software or plug-in to display the image. When creating Web graphics,
designers must choose between GIF and JPEG based on the type of images they want.
Table 9-1 lists various image file formats and their file name extensions.
Table 9-1: Image file formats
NOTE:
How many of the file
formats named here
are familiar to you?
Have you seen
others used on the
Web?
File Name
Extension
File Format
Origin
.jpg, jpe, .jpeg
Joint Photographic Experts Group
(JPEG)
Joint Photographic Experts Group
.gif
Graphics Interchange Format (GIF)
CompuServe Inc.
.tif
Tagged Image File Format (TIFF)
Aldus Corporation
.bmp
Bitmap (BMP)
Microsoft Corporation
.wpg
WordPerfect Graphic
WordPerfect Corporation (Novell)
.png
Portable Network Graphics
Codelab Inc.
.pcx
Bitmap (BMP)
ZSoft Corporation
Version 1.1
9-14
Graphics Interchange Format (GIF)
NOTE:
"GIF" is pronounced
with a hard G, as in
"graphic" (not a soft
G as in "giraffe").
GIF is a platform-independent file format that is limited to a display of 256 colors.
Originally developed by CompuServe for its online service, GIF has been adopted by most
developers because of its small file size. Graphic interlacing (the progressive rendering of
images) is unique to GIFs and is a preferred method for display of large graphic files.
GIF is considered a "lossless" format; this term means that as the image is compressed,
no information is lost. Consequently, a GIF file may not compress as much as a JPEG file
of the same size. The amount of compression cannot be determined by the designer for a
GIF file, though it can for a JPEG file.
GIF files exist in two versions: 87a and 89a. The original 87a format supports most of the
GIF's advantageous features, such as small file size, lossless compression and
transparency. The 89a version of GIF also supports animation and interlacing.
Animated GIF
The 89a version of GIF allows storage and playback of a sequence of still images to create
the illusion of animation. GIF files can provide many full animation and video effects
without the need for plug-ins.
Regular GIF files contain only one static image; the animated GIF functions much like a
cartoon flipbook. Animated GIF files consist of sequential frames that reload from a browser's
cache and replay in an infinite or predetermined loop to simulate motion. One advantage that
animated GIFs have over other image animation is that they do not depend on client-pull or
server-push. Both server-push and client-pull require a file to be downloaded sequentially
with numerous exchanges between the user's computer and the server.
Transparent GIF
Another advantage that a GIF image has over a JPEG image is that the designer can
designate a color of the GIF image to be transparent. This feature removes the constraints
of square or rectangular graphics. For example, the designer can create a circular logo in
a square image by making the background color transparent. Thus the image appears
circular when, in fact, it is square with information for the square background to appear
transparent.
Joint Photographic Experts Group (JPEG)
NOTE:
"JPEG" is
pronounced "jaypeg."
NOTE:
Considering the
many advantages
that GIF images
seem to have over
JPEGs, what reasons
can you think of to
use JPEG images?
Graphics in the JPEG format are capable of much greater color depth than GIFs, but
usually require more time to download. JPEG files can contain up to 24 bits of color
information (16.7 million colors) and work particularly well for photographs. JPEG files
are compressed automatically. They are decompressed when they arrive at the Web page.
Compression effects vary: The greater the compression, the greater the level of
degradation in the final image. JPEG is considered a "lossy" format type; this term means
that as the compression of the image is increased, colors are dropped from the image
color palette, resulting in image degradation. For example, a 100-KB JPEG file can be
compressed to perhaps 10 KB. However, this amount of compression may diminish the
image quality to an unusable degree.
One drawback to this format is that the designer has no control over how the 24 bits are
mapped into the 256-color palette used by a client's display. Also, considerable
differences exist between the way Firefox and Internet Explorer display images. Further,
the display results of PCs and Macintoshes also differ. Designers should test their images
in these two and other browsers, as well as multiple operating systems, before deciding
which format best serves their purposes.
Version 1.1
9-15
JPEG 2000
NOTE:
You can review and
apply concepts of
effective use for GIF
and JPEG file
formats in Activity
9-1: Identifying
graphic formats and
files.
A newer JPEG format enhances the compression feature of standard JPEGs and
improves scalability and editablility. As discussed, the original JPEG format is lossy,
which results in information about the image being discarded upon compression. This
loss of data effectively creates "holes" in the image, which are filled and thus create a
speckled effect. With JPEG 2000, the compression includes a Wavelet technology that
stores the information differently, reducing the amount of speckling that occurs when the
JPEG is decompressed. The file name extension for JPEG 2000 is .jp2.
Portable Network Graphics (PNG)
The PNG file format is emerging as the new format for Web graphics. PNG brings together
the best features of the GIF and JPEG formats into one format. PNG files are lossless and
support transparency like GIFs, yet also support compression and high bit depth like
JPEGs. In addition, PNG bit depth can be adjusted, unlike GIFs or JPEGs, which must be
8-bit and 24-bit depth, respectively. Compression is enhanced in PNGs by using
compression filters that can support up to 48-bit color.
NOTE:
You can compare
file size of GIF, JPEG
and PNG files in
Optional Lab 9-1:
Comparing image
file formats.
However, browser support for the PNG format is currently not complete. Older versions of
the major browsers offer little support for PNG. Internet Explorer version 6 had
incomplete support for transparent PNGs, and Internet Explorer 7 and 8 are unable to
correctly display PNG images with color correction. PNG-compatible browsers include
Apple Safari, Google Chrome, Mozilla Firefox and Opera, with partial support available in
the various versions of Internet Explorer. As a result, it is not advisable to rely on PNG as
a fully supported format for the Web.
Scalable Vector Graphics (SVG)
OBJECTIVE
4.1.5: SVG
characteristics
NOTE:
This course
introduces XML in a
later lesson.
Scalable Vector Graphics (SVG) format is a W3C Recommendation that uses Extensible
Markup Language (XML) to describe certain shapes. Similar to other vector graphics, SVG
is best for working with two-dimensional line art and shapes. To read the SVG 1.1
specification, visit www.w3.org/TR/SVG11.
Because SVG is a vector graphics format, it is also scalable. A circle image stored as a
vector graphic has the same file size whether it is saved with a diameter of 90 pixels or 900
pixels. In addition, the use of XML in SVG files allows the graphic to become an object in
the X/HTML page, enabling access to the full XML document object model. Therefore,
filters, masks, scripting and mouse events can be tied to SVG files. And because SVG
graphics are stored as simple XML files, they are searchable and can be easily manipulated
with Web programs to support zooming, rotation, movement and other types of image
manipulation. (XML will be discussed in more detail later in this course.)
Figure 9-6 shows a brief sample of well-formed SVG code syntax. This example shows
XML code, which is case-sensitive but does not strictly require the use of lowercase
letters for tags. If this code were XHTML, all of the tags would need to be typed in
lowercase letters.
Version 1.1
9-16
<?xml version="1.0" standalone="no"?>
<SVG WIDTH="5in" HEIGHT="4in"
XMLNS = 'http://www.w3.org/2000/svg-2000-stylable'>
<DESC>
</DESC>
<G>
</G>
</SVG>
Figure 9-6: SVG image file syntax
For more information about SVG, you can visit the following URLs:
NOTE:
It is important to
understand the
concept of
copyright
infringement. It is
commonly believed
that images and
text on the Web
can be "borrowed"
simply because it is
possible — and easy
— to copy them.
The ability to copy
material from the
Web does not make
it legal to do so.
•
www.w3.org/Graphics/SVG
•
www.mozilla.org/projects/svg/
Creating and Optimizing Images
Creating Web-quality images requires the knowledge and use of a graphics application.
This aspect of Web design can be the most difficult to master. Depending on the size of
your organization, a graphic artist might design all the images. If you are not artistically
inclined, many resources on the Web offer images for free use. High-quality graphics are
not usually free. As an alternative, you can subscribe to Web sites that offer tens of
thousands of graphics. These subscriptions can range in price from a nominal monthly
fee to more substantial annual fees.
Be sure that any graphics you use on your Web site are copyright free. Web site
text must also be your company's original creation or licensed for you to use.
Always check the legal statements on any Web site whose material you want to
borrow. Copyright infringement is illegal and punishable by fine and
imprisonment.
Web images and accessibility
OBJECTIVE
4.1.2: Accessibility
issues with images
and animation
Good Web graphics must be aesthetically pleasing, relevant to the site's purpose and,
most importantly, small in file size. File size directly affects download time and is a key
consideration for the Web developer. Developers must consider bandwidth requirements
for the images used on a page.
According to WebSiteOptimization.com (www.websiteoptimization.com), about 95 percent
of the Internet connections in the United States are broadband (as of December 2009).
Although this does mean that most users can view content that requires high bandwidth,
it also means that some users are still connecting with a modem. The most common
modem connection speed today is 56.6 Kbps.
Even with a high-speed Internet connection, images that are unnecessarily large will take
longer to download than users may be willing to wait. A graphic-intensive page can
initiate poor reviews if the content is overwhelmed by a lengthy download time due to
image misuse.
Version 1.1
NOTE:
The effect of images
on Web page file
size and download
times is a key
consideration for
Web developers.
9-17
If the site is intended for use as an intranet application over a network, then many
obstacles are removed. At the same time, remember that an intranet serves a different
purpose than an Internet application. An Internet presence is for public use and
represents the face of the organization to the outside world. It should provide an
enjoyable experience. An intranet is for business purposes; it is intended for quick and
easy access to information and resources. If an intranet application is too graphical and
flashy, it reduces worker productivity. You can think of the intranet as more functionoriented, and the Internet as more presentation-oriented.
The alt attribute
The alt attribute provides alternative text in place of an image on an XHTML page. The
syntax for using the alt attribute is as follows:
<img src="filename.gif" alt="This is a link to the search page"/>
For reasons of user accessibility, the XHTML Transitional specification requires the alt
attribute for your code to validate to the standard.
NOTE:
The alt attribute is
easy to add to Web
page images. This
simple addition
does more than
make a Web site
more accessible. It
also helps sites
appear more
thorough and
professional even to
users who do not
require it for
accessibility
purposes.
The alt attribute is useful for several situations:
•
Users who have disabled the image-viewing capability on their browsers can read the
image name or link destination.
•
Users can read the image name or description while an image loads.
•
Software can provide accessibility options for vision- and hearing-impaired users.
Image optimization
For the Web designer, none of the benefits of the GIF, JPEG or PNG are realized unless
optimization is considered. A misconception is that any one of these formats is better
than the others. As you learned earlier, each image format has special benefits that make
it unique. As a Web designer, you must learn which format to use for any particular
graphic. Consistently using GIFs or JPEGs does not ensure that you are optimizing your
image use.
Following are some guidelines you can use to help optimize your Web graphics:
•
Use colors from the browser-safe color palette.
•
Use the fewest colors possible.
•
Use solid colors whenever possible.
•
Avoid anti-aliasing when possible.
•
Use optimization utilities.
Optimization sources
Many sources are now available to help the Web designer optimize graphics. The basic
procedure of optimization is determining the smallest color palette possible and choosing
a file format that results in the quality required. The most commonly used optimization
tools are included in graphics applications such as PhotoShop CS6, Fireworks CS6 and
others. Two other common image optimizers are now in use as well: online versions and
desktop versions.
Online image optimizers typically require an annual subscription fee, which varies
depending on the number of pages or graphics you want to optimize. Some other services
are free. The Web designer simply enters a URL for the images. The online program visits
Version 1.1
9-18
the site to download and optimize the images. The designer is then granted access to the
optimized images. The following services provide online image optimization:
•
GIFBot from NetMechanic — www.netmechanic.com/products/accelerate.shtml
•
SiteScan from OptiView — www.optiview.com/
The desktop image optimizers perform the same process, except the images being
optimized need not be made available on the Web for the service to access them. The
following services provide desktop image optimization:
•
DeBabelizer Pro from Equilibrium —
www.debabelizer.com/Internet/Equil/Products/DeBabelizer/index.html
•
Ulead SmartSaver Pro from Corel — www.ulead.com/ssp/
•
GIFCruncher from Spinwave.com — www.webreference.com/services/graphics/gc/
In the following lab, you will evaluate and optimize image files using a free online
optimization service. Suppose your project manager tells your Web team that the site you
are currently designing is exceeding file size limits recommended by the marketing team
for your site's target audience. Your project manager asks you and your team members to
review the site pages, and consider ways to reduce download time without sacrificing the
content or design you have all been working hard to create. You can suggest using an
image-optimizing tool such as this one to evaluate your site's images and reduce file sizes
wherever possible.
Lab 9-2: Optimizing images for Web use
In this lab, you will use a free online image-optimization service from NetMechanic called
GIFBot. This service will evaluate the graphics and links on a designated page, provide a
summary of the site graphics, then provide optimized versions of the graphics for you to
choose, download and keep.
1.
Browser: Go to www.netmechanic.com/products/accelerate.shtml. You will see
the NetMechanic GIFBot page, as shown in Figure 9-7. Click the Try It Now link.
Version 1.1
9-19
Figure 9-7: NetMechanic — GIFBot page
2.
In the GIFBot Free Sample section, enter a URL to any Web site in the URL field
(Section 1), as indicated in Figure 9-8. You can use your company Web site or any
site you frequently visit and want to test. Or, if you prefer, you can upload a file from
your computer by clicking the Browse button.
Figure 9-8: Entering URL to test images
3.
Enter an e-mail address (Section 2).
4.
Select Both GIF And JPEG from the Output Format drop-down list (Section 3).
Version 1.1
9-20
5.
Click the Test Now button to proceed.
6.
The service will begin downloading the images and evaluating them. Notice the
progress indicator that appears as the images are being evaluated. When the
evaluation is complete, a full report will appear, as shown in Figure 9-9.
Figure 9-9: Image evaluation report
7.
Scroll down to view the results. Notice the file size of each image. In the Image Size
column (Figure 9-10), click a file size (which is a link) of one of the larger images
listed in the report.
Figure 9-10: Image file sizes
Version 1.1
8.
9-21
You will see repetitions of the same graphic as you scroll down the page. Notice that
next to each copy is information about the graphic, including type, image quality,
size, download time and percentage of file size savings. You can now compare the
optimized image with the original image by moving your mouse pointer over each
image. As you do, the original image will appear. Move the mouse pointer away and
the optimized image will reappear, providing a precise comparison. You may find that
you must scroll down to test several images before noticing a change. In the example
in Figure 9-11, there is a significant degradation of image quality as the file size is
reduced. This indicates that the image is already fully optimized.
Figure 9-11: Comparing optimized image versions
9.
If one of the optimized images is acceptable, click that image. The image you select
will open in a new browser window.
10. Right-click the image and select Save Image As. Specify a name for the image, then
click the Save button. You now have an optimized version of the image.
By optimizing all the images on a page (and a site), you can dramatically reduce
download time, providing users with a faster browsing experience.
Image slicing and splicing
Another technique that is used to help shorten download time of large images (such as
image maps) is a process called slicing.
The slicing process involves dividing images into several smaller images. With the use of
HTML tables, the image can be reconstructed or spliced back together in the browser
window. Slicing does not change the file size of the image, but rather gives the
appearance of faster loading because the user sees portions of the image (the smaller
image sections) before the entire image has downloaded.
Version 1.1
9-22
Many slicing applications are available; some are freeware, whereas others are available
for a fee.
Essential Graphic Design Concepts
Graphic design is a collection of disciplines (from visual arts and age-old printing to pagelayout methods) that are used in order to construct a piece of visual communication. You
apply various graphic design principles in Web design to create successful Web pages
that draw a visitor in, give him the information he wants, and move him around your
Web site.
Throughout this course, you will learn graphic design principles and apply various
graphic design techniques. The following section discusses three essential concepts of
graphic design that you can apply when creating your Web pages. These concepts are:
composition, grid-based layout and typography.
Composition
Composition is the placement or arrangement of visual elements, whether on a canvas, a
printed page or a Web page. Composition involves what draws the viewer's eye into the
page, or where the viewer "enters" the page, and deals with how to lead the eye through
the page. When considering composition, the designer must determine what the central
point of interest on the page will be, and then compose other elements of the page
accordingly.
Each page should have a focal point. Avoid the mistake of trying to make everything on
the page stand out.
Visual hierarchy
When viewing any form of visual communication, the eye is attracted to the point of
highest contrast. Consider a painting. Objects that are most important in the work are
closer than the less important objects in the background. The artist helps us to see which
objects are closer by painting them larger than the rest, and with more intense color,
color depth and clarity than objects in the background.
You create a visual hierarchy in a Web page by varying text size, weight and color. Titles,
subtitles and body text are used to create this hierarchy because the human eye is
trained to look for the points of highest contrast first. By emphasizing the titles, and then
to a lesser degree the subtitles, etc., you make the outline of the page readily apparent.
This helps the visitor ascertain the organization of the page quickly. An outline is the
simplest form of visual hierarchy.
Grouping
Grouping related elements on a page helps to define the page's structure. When we first
glance at a page, we try to group the elements in our minds in order to simplify the visual
field. We use grouping to ignore the details and grasp the main concepts. A good designer
facilitates this process by grouping Web page elements on the page.
Grouping occurs when objects have similarities in shape, color, size, location and
proximity. Apply the same typeface, color, weight, etc., to all the objects in a group so
that a viewer can easily identify all the elements that comprise the group.
Version 1.1
9-23
Visual cues
A basic principle of composition is that the eye follows lines, gesture and movement in
the page (whether these are real or implied), and that it rests temporarily on masses
before moving on. Masses include images and shapes (remember that words and
paragraphs are shapes too). Therefore, the placement of elements on your page will affect
or guide how the eye moves around the page.
Human faces and gestures in images play a big part in overall compositional flow. Be
sure to place these types of elements so that they point into (and not off of) the page. Our
eyes also tend to move around the edges of shapes, including the page or browser
borders, so placing visual cues along these boundaries redirects the eye back into the
page to discover other levels of your visual hierarchy.
Integration of elements
Integration of page elements is achieved when the page appears as a whole unit instead
of as a collection of various elements. In order to achieve integration, you should repeat
colors, shapes, lines and patterns throughout a page. Repeat this use of color and
pattern throughout all the pages of the Web site so that the entire site is unified.
Grid-based layout
A typographic grid is a two-dimensional structure consisting of intersecting vertical and
horizontal lines. The modern typographic layout grid has been used for producing printed
material since the 1940s. But the Web designer's interest in grids is a fairly recent
development.
The purpose of the grid is to help designers achieve coherency when organizing a page. As
the vertical and horizontal lines of the grid intersect, boxes called grid units are formed.
Text and graphics to be placed on the page are placed within the grid units. Because of
the regular and balanced occurrence of grid units on the page, Web page elements placed
within the grid units are aligned and balanced with each other. The grid becomes an
underlying framework for the page, providing spaces in which to "hang" or attach various
elements. The grid helps the designer create a balanced, harmonious composition.
The theory behind using grid-based layout is that aesthetics can be constructed. That is,
if you use a well-defined grid that fits the purpose of your content, and then you place
elements within the grid units, you will most likely have a good start at creating a page
that is aesthetically pleasing.
There is no hard and fast rule concerning how many grid units to create, or how far apart
they should be spaced, or whether they should be spaced evenly. Grids can be used to
underpin one-, two- or three-column layouts, or even more. Some designers prefer evenly
sized columns; others prefer to use ratios to determine the size of narrower and wider
columns. The key is to determine a grid that is suitable for the content you want to
display.
NOTE:
Visit
www.maths.surrey.
ac.uk/hostedsites/R.Knott/
Fibonacci/fib.html
for more information
on the Fibonacci
spiral and the
golden mean.
The golden ratio
Ratios are often used for composition in art and print. For example, the golden ratio (also
called the golden mean, the Fibonacci spiral and the divine proportion) has been used in
art and architecture for centuries. This ratio is evident in nature as the number Phi
(1.618033988749895) and is found in many places, such as in the spirals of a nautilus
shell, in the petal distribution of various flowers, and in the seed heads of numerous
plants.
Version 1.1
9-24
To create a design grid based on the golden ratio, do the following:
•
Determine the width of your design area. For example, if you were designing for a
monitor with a resolution of 1024x768, the page would not be more than 1004 pixels
wide. Let us assume that our design width will be 984 pixels.
•
Divide the design width by Phi (1.62 is sufficient). 984 / 1.62 = 607.4074. Round to a
whole number, to arrive at 607. The width of the wider column (let us call it the main
column) would be 607 pixels.
•
Subtract the width of the main column from the design width to determine the width
of the narrower column. 984 – 607 = 377. The narrower column would be 377 pixels
wide.
Using these measurements, you would create a two-column layout with a main column
that is 607 pixels wide and a secondary column that is 377 pixels wide.
If you were designing for a monitor resolution of 800x600, assume the design width to be
760 pixels. Using the formula in the previous example, the main column would be 469
pixels wide and the secondary column would be 291 pixels wide.
You can also use percentages for a flexible-width layout: 100% / 1.62 = 62% for the main
column, leaving 38% for the secondary column. A flexible-width layout adjusts to the size
of the browser window.
Typography
glyph
An element of
writing.
To a designer, the appearance of words is as important as their meaning. The designer
strives to create balance and relationship between the elements on a page. Typography is
the art of arranging and designing type and modifying type glyphs. This section is meant
to be only a brief introduction to typography.
Definitions
Although typography is an ancient craft, many of its terms have fallen out of use and
require defining.
measure
The width of a body
of type.
A measure is the name given to the width of a body of type. The three basic units for
defining the measure's width are as follows:
•
One point = 1/72 of an inch
•
One pica = 12 points
•
One em (pronounced "em") = the distance horizontally equal to the type size, in
points, that you are using. For example, 1 em of 12-point type is 12 points.
On a Web page, a pixel may also be used as a unit for defining the width of a measure.
leading
The amount of
added vertical
spacing between
lines of type.
Leading (pronounced "ledding") is the vertical space in a text block; it is the distance
from one baseline of text to the next. Leading strongly affects the legibility of text. Too
much leading makes it hard for the eye to locate the next line of text. Too little leading
makes it difficult to distinguish the lines of text from one another.
Legibility
The first thing a viewer sees upon arriving at your Web site is not the title or other
details, but the overall pattern and contrast of the page. The repeating patterns
Version 1.1
9-25
established through the use of organized text and graphics increase legibility and help
the reader grasp the organization of your content.
Because Web browser windows are resizable and because some users may set their
browses to display very large type, it is difficult to arrive at an optimal size for measure.
In general, a measure of 52 characters to 78 characters (including spaces) should allow
for comfortable online reading.
Proper leading will keep the eye moving along the line of text. In print, a simple rule for
legibility is that leading should be 2 points greater than the size of the type. On a Web
page, you might want to consider making the leading 2 points to 4 points greater than
the type size.
If you use reverse text (white text on a black background), increase the leading and
decrease font weight to improve legibility.
Typeface
When designing your pages, you want to create a harmonious fit between the text and the
visual flow of content. While there are many typefaces from which to choose, each with its
own unique tone, there are still some user systems on which only the default operating
system fonts are installed. If the font you specify is not available, the browser will
substitute the default font.
Make yourself familiar with the fonts that are resident on various operating systems,
such as those on a Windows system and those on a Mac. You can find a list of common
and equivalent fonts for both of these operating systems at www.ampsoft.net/webdesignl/WindowsMacFonts.html. Instead of specifying a single font to be used in your Web page,
specify a font family that includes at least one font from both operating systems (e.g.,
Verdana, Geneva, Helvetica).
The most conventional scheme for typefaces is to use a serif font for body text and a sans
serif font for headings. Whichever fonts you choose, make sure they look good on the
screen.
You should also consider the nature of your content and how the content on your page
will be used. For example, Times New Roman is a good choice for pages with a lot of body
text that will most likely be printed. Times New Roman looks good on the screen and it
looks good in print as well. Georgia and Verdana were designed specifically for computer
screens. They look good on a Web page, but they look oversized and cumbersome in
print.
Case
Choosing uppercase or lowercase letters has a strong effect on the legibility of your text.
As we read, our eyes scan over the text, recognizing words primarily by their shape, not
by parsing each letter and then assembling a recognizable word. Words that are formed
from all capital letters are shaped like rectangles — they offer no visual clues as to what
the word is. Reading text that is in all uppercase letters is tiring and monotonous.
The use of initial caps (capitalizing the first letter of each word) in headings also disrupts
a reader's ability to scan for word forms.
Emphasis
You will want to add emphasis to various elements on the page in order to give visual
clues about the page's structure. Small variations are usually enough to establish visual
contrast. A good rule of thumb when working with text is to add emphasis using one
parameter at a time. For example, if you want to add emphasis to your section headings,
Version 1.1
9-26
increase their size by one measure, or keep them the same size as your body text and
make them bold.
Bold text gives emphasis because it contrasts in color from the body text. Bold text works
well on section subheadings, for example. However, large blocks of bold text lack contrast
and lose their effectiveness.
Italic text attracts the eye because its shape differs from the body text. Italic text should
be used for specific purposes, such as listing a book title, or for foreign words and
phrases. Large blocks of italic text, however, are difficult to read.
Underlining sections of body text or making the text a different color may cause users to
assume that the text is a hyperlink. Colored text does work well to distinguish section
headings, but you should avoid using colors that are too close to the default Web link
colors of blue and magenta.
You can also add extra spacing around a block of text to isolate it and thereby draw
attention to it. This is a subtle but effective technique.
Type size and accessibility
We have all seen Web sites with absurdly large headings (or perhaps with ridiculously
small headings). For this reason, many Web designers avoid using the standard heading
tags (H1, H2, etc.). However, these tags help give the document structure.
You can, of course, adjust the size of the headings to something more harmonious and
give your page a more unified look. There is much room for artistic impression when
determining the relative sizes of your text and headings. For example, since about the
16th century, typographers have been using a series of 16 typeface sizes (between 6 and
72) that have generally been accepted as both legible and pleasing to the eye. The sizes in
this series are related to one another. Many designers prefer to use these old and
established type sizes, while others seek to create their own relationships among varying
sizes of type on the page.
Conforming to accessibility standards has made the prospect of specifying type size more
daunting than it has been in the past.
If you specify your type size in pixels, for example, the size is absolute. This helps you
keep a firm hold on how your text will render in the browser and keeps your page design
intact;. but it also prevents, for example, a vision-impaired user from enlarging your text
so that it is legible.
NOTE:
Cascading Style
Sheets (CSS) will be
discussed in detail in
a later lesson.
To ensure the scalability of text, the designer must use relative units, such as the em
unit, to control aspects such as type size, indents, margins and leading. The W3C
recommends that you let the user set the base font size in his browser, and that you set
all variations using the em unit. Consider the following line of code from a Cascading
Style Sheet (CSS):
P { font-family: arial, "lucida console", sans-serif
Text-indent: 2em }
In this example code, if the user sets his default font size to 12 points, then a 2-em text
indent would be 24 points. If the user changes his default font size to 16 points, then the
2-em indent would change to 32 points to reflect the larger size.
Ensuring scalability using a method such as this requires that you use a highly
adaptable page layout that will accommodate text of varying sizes.
Version 1.1
9-27
Case Study
Online Art Show
Adalberto wanted a Web site for selling his paintings. He envisioned an online gallery of
photos of his paintings, with information about each piece and sales offerings. He
contracted a Web developer named Sonja, and they began talking about the design.
Sonja explained that the most important factor in the design of this online gallery would
be ensuring that high-resolution images of the paintings were available without requiring
users to wait for large files to download.
Sonja came up with two options. One solution was to create a slideshow of medium-sized
images, in which the site visitor could look at one photo at a time and have the option on
each page to download a larger version of that photo. The other solution was to create
several pages of small, thumbnail photos, each of which the visitor could click to view a
larger version of the photo.
Sonja and Adalberto decided to use the thumbnail solution in order to minimize the
required download time, while maximizing the number of paintings each site visitor
would see.
*
*
*
Consider this scenario and answer the following questions:
•
This case study demonstrated two creative solutions to a problem involving image
download times. Can you think of other solutions that might also have worked in this
scenario?
•
What advantages might there have been to using the first solution offered in this
scenario? Would that solution work better for some other type of content or site?
•
What other types of Web sites or pages might face challenges related to image
download times? What approaches might work better for different types of sites?
Version 1.1
9-28
Lesson Summary
Application project
Graphic images do more than make your Web site more attractive. They make your site
more memorable to users; they reinforce ideas and themes; and they help sell products.
Images provide visual information and bring the concepts discussed on your site to life.
Good images are critical to a Web site's success.
But where can Web developers acquire good images if they cannot create the images
themselves? Remember that any content you find posted on the Web — images, text,
animation, music and so forth — is protected by copyright laws that prohibit anyone but
the content's creator (or other rightful owner) from using that content without
permission. The fact that you are able to copy material from the Web does not mean that
you are allowed to use it on your own pages.
If you need graphics and cannot create your own, some Web sites offer graphics that you
can download and use for free. Note that these sites may impose certain requirements in
exchange for use of their work, including credit attribution or restriction to noncommercial use.
To locate sites that offer free graphics, visit a graphics site such as
www.freegraphics.com, or enter "free graphics" in a search engine. Can you find graphics
that are suitable for your own Web site? At each site, scroll to the bottom of the home
page and look for a copyright notice. Even though the graphics are offered for free use,
they are usually copyrighted by the creator and subject to the creator's terms for use.
Were there any requirements you were asked to satisfy in exchange for use of these files?
Skills review
In this lesson, you learned about the importance of Web graphics. You studied the most
common formats, along with the advantages and disadvantages of each. You also learned
about the differences between raster graphics and vector graphics. Finally, you studied
the tools and techniques that Web designers use to create and optimize graphics.
Now that you have completed this lesson, you should be able to:

3.3.1: Distinguish between vector and raster graphic types.

3.3.2: Identify and choose appropriate image file formats, including browsercompatibility issues and lowest common denominator in audience usability (e.g., GIF
87a, GIF 89a, JPEG, JPEG 2000, PNG, BMP).

3.3.9: Insert metadata into images to ensure accessibility and to ensure higher page
ranking in search engine result pages.

3.3.10: Identify the benefits and drawbacks of using stock photography when
developing a site (e.g., license-free vs. licensed stock photos, increase in project
speed, reduction in creative control).

4.1.2: Identify accessibility issues and solutions related to Web images and animation
(e.g., text-reader capability, captioning).

4.1.5: Identify Scalable Vector Graphics (SVG) characteristics (e.g., XML-based, twodimensional, searchable, scalable, zoom support).
Version 1.1
9-29
Lesson 9 Review
1.
Why is file size an important consideration when choosing graphics for your Web
site?
2.
Name two common forms or uses for graphic images in a Web site.
3.
What is a pixel?
4.
List at least three image file formats (or corresponding file name extensions).
5.
Name at least two guidelines for optimizing your image files.
Version 1.1

9Lesson 9: Web Graphics

Transcription

Similar documents

MacDraft PE (Front) US

© www.jbonzer.com Graphics DJ Inkers

UltraVu® II 5330

SQUARE PICTURE FRAME size 100x100 cm | GRAPHIC CMYK

Meryl Natchez, CEO, TechProse

Tactile Graphics: High Quality Doesn`t Mean High Cost!

Free Graphics and Image Editing Tools

EE5808 Topics in Computer Graphics