How to Prepare Image Files for the Web

The non-Designer's Web Book 2nd EditionBy Robin Williams & John Tollett

Chapter 11, Pages 189 - 218

Prepared by Linda Blocker

Technology Applications Standards

http://www.sbec.state.tx.us/SBECOnline TA 11.2s

Delineate and make necessary adjustments regarding compatibility issues, including, but not limited to, digital file formats and cross-platform connectivity.

Technology Applications Standards

TA 11.10sAcquire information in electronic formats, including text, audio, video, and graphics.

TA 11.11sModel respect for intellectual properties when acquiring information in electronic formats.

Technology Applications Standards

TA 11.12sIdentify, create, and use available file formats including text, image, video (analog and digital), and audio files.

Web graphic specifications Use RGB web-safe colors. Make the image the size

you want it on the web page. Save images

As GIF or JPEG Select 72 ppi (pixels per inch)

resolution on the computer screen.

Saving Web Graphics

Optimize your image, so it will load quickly.

Use the lowest, acceptable quality level.

Experiment to find the best quality level with the smallest file size.

Preview before you save. Save all the final graphics in a special

graphic file folder for your web page.

Popular graphic file types GIF (Graphic Interchange Format) JPEG (Joint Photographic Experts

Group) Both GIF and JPEG can be viewed

with any browser on the web. Both GIF and JPEG can use any

graphics program in any platform.

GIF files GIF files are best for graphics with

large areas of flat color Type Simple illustrations Images with flat colors

GIFs have a very small file size. GIF files use only 8-bit indexed

color mode.

Saving GIF files

Use web safe colors Reduce the color palette to the

minimum necessary. Turn off "anti-aliasing“. Save with "interlacing“, to tell the

browser to gradually load the image. Save as 72 ppi, in indexed color

mode.

JPEG files JPEG is widely used on the web for

photographs or graphics that have many colors and shades and very few areas of flat color. Photographs Paintings with many colors and shades Drawings with lots of color gradations

JPEG files are very compressed and small.

JPEG files display rich 24-bit color.

Saving JPEG files

Each copy deteriorates the quality, so save a Master copy.

Select "progressive" to tell the browser to gradually load the quality of the image from low to high resolution.

“Baseline Optimized” formatting gives the best color quality.

Finding Graphics Draw your own graphics or have someone

make images for you. Scan images or photos. Find books of copyright-free clip art. Buy graphic source CD-Roms.

Borders Fonts Clip art Graphics

Download graphics or images from the web (Watch for copyrights).

Making Digital Photographs Deliver or mail your film to a photo lab

to be digitally processed. Floppy disk Photo CD Rom Post your photos onto the web.

Upload images Digital camera Camera memory card or disk Computer webcam Cell phone camera.

Scanning Images Scan images into a digital format.

Many homes, businesses, and schools have scanners.

Many office supply or copy stores have pay scanners.

The glass surface determines the largest size picture you can scan on a flatbed scanner.

Edit the image, and make it’s dimensions the size that you want on the web page.

Make a copy to save as JPEG or GIF for the web.

Make a Scanned Image

Make a Master file, at a resolution of 144 or 150 so you can edit it easily.

Save as a TIFF TIFF makes a high-resolution master

copy. Make copies of the master, for editing.

An image which will be printed should be scanned at 300 ppi.

Scanner Resolutions A 144 ppi Master image will leave

the cleanest image, when a copy is reduced to 72 ppi.

When presented with Low, Medium, or High: Medium will meet most needs.

High is helpful, if you plan to do a lot of work on the image.

Colors

"Thousands" of colors in an image will meet most web needs.

A GIF with 256 colors works well for an image which contains lots of broad, flat colors, and is not a photograph.

A JPEG high-quality photograph can contain millions of colors.

Make an image map An image map defines certain areas of an

image as hot spots, which contain links to other pages or sites.

Use layers for the hot spots and their URL links.

You can make hotspots any shape you wish, and they can be invisible.

When you move over the image map, tips and links can pop up as a surprise.

"Save Optimized As..." from the file menu.

Types of Web Backgrounds Background graphics Left-edge graphics Top-edge graphics Giant image graphic A textured background A tiled background

Background Graphics Web backgrounds can be colors or

images: Black, white, or a color. Plain colors or patterns. A texture can be added with a filter. A GIF or JPEG graphic that repeats

(tiles) to fill the screen. A giant image.

Left-Edge Graphic Left-edge graphics are popular

backgrounds because they load quickly. They ornament a page and add color. Left-edge graphics help to organize the

page. A Left-edge graphic is a long, skinny

graphic, which creates a bar or stripe down the edge of the web page.

The graphic repeats, to conserve load time.

Making a Left-edge Graphic Open a new image file about 1000 pixels

wide by 50 pixels high. Select the first couple of inches of the file. Fill with a browser-safe color. Select the rest of the image area, and

choose "inverse“ from the select menu. Fill this new area with black, white, or

another color. Add a small stripe of accent color between

the two color strips.

Finish the Left-edge Graphic Crop away most of the image height

(because it will repeat itself). Leave it 1000 pixels wide by 10 pixels high.

The file size is now 250 bytes (.25K). Export the image as a GIF file. Place it on the web page as a background. Add a table to organize information. Turn off the borders, so that the table is

invisible.

Make a Top-edge Graphic Top-edge graphics work best on pages

that have very little or no scrolling. Top-edge graphics repeat, so they can

load quickly. Follow the directions for a left-edge

graphic, but make it tall and skinny. Make this graphic file taller than the

scrollable content area, so it will not repeat too soon and show the top color again.

Giant-image backgrounds Select an image to use as a giant

background. Decrease the number of colors in your

image. Save the image as a low resolution GIF

file to preserve load time. Place the new GIF onto your web page

as a giant background image. Select a contrasting color for your text,

so it can be easily read, over the image.

Make a Textured Background In Photoshop, create a new file 100

pixels x 100 pixels, with a resolution of 72 pixels per inch.

Fill the window with a browser-safe foreground color.

Open the filter menu. Select noise/add noise/pick a setting from the dialog box.

Re-open the filter menu/choose blur/gaussian blur/use a low setting, between .3 and .5

Finish the Textured Background Open the select menu. Choose all to select

the entire image area. To tile the pattern, open the edit menu/define

pattern. Create a new file about 300x300 pixels. Open the edit menu/ fill/from the contents

menu of the dialog box/ pattern/100% opacity(less, for a lighter version)/ok.

Export the original texture file as a GIF89a. Place the image as a background on your web

page.

Make a Tiled Background Use the Adobe ImageReady tile maker

filter. Select the image that you desire. Open the filter menu/other/tile maker. In the tile maker window, select blend

edges/enter a value in the width field. Check the box "Resize Tile to Fill Image". Use the image as a background on your

web page.

Animated GIF Suggested software for creating

GIF animations: ImageReady (comes with Photoshop) Macromedia Fireworks

Make an Animated GIF Make separate graphic files, or frames of

your image. Recreate only the moving parts, to decrease download time

Change the parts to show movement. Number each part as you save it. Place the different parts on separate layers,

and make them invisible until they show up on the correct frame within the sequence.

Place a solid color background on the bottom layer.

Save your Animated GIF As you Save, the software will make one

compact GIF file. Select the number of times you want the

animation to loop. (not forever, please!) Set the speed of the animation, the delay. Depending upon your software, save as a

GIF file, or export all of the layers as one GIF89a file, or "Export Optimized“.

Place the GIF file onto your website. Preview to see the movement.

Graphics Software Links www.adobe.com www.macromedia.com www.apple.com/software/ www.microsoft.com www.arcsoft.com/en www.imsisoft.com www.eyewire.com www.shareware.com www.download.com 

Helpful Photo Sites www.shareware.com www.download.com www.walmart.com www.eckerd.com www.filmworks.com www.kodak.PhotoNet.com  www.shutterfly.com  www.aol.com "You've Got Pictures" www.Yahoo.com Yahoo! Photos www.activeshare.com Adobe www.dotphoto.com online photo album