Images for the Web

planning, acquiring, processing

My Laws of Image Usage

• Images ALWAYS convey information (think about what messages your image conveys)

• If you can use a picture instead of words, do. (but add the words as alt-text).

• Make sure you have the right to use the image(s)

• Don’t make the image files larger than necessary (thumbnail/printing)

Planning

• Audience?

• What information do I want to convey?

• What information can be conveyed visually?

• What style (also informative) do I want to use. (Law 5: Be consistent)

Getting Images 1

• Take pictures (with a camera or digital camera)

• Get from sites that explicitly give the right to use– http://office.microsoft.com/clipart (actually cool pics)

• Logomakers

• Ask permission to use images you like

• Make a collage of free images

• Buy a commercial image or set of images– Eyewire, Artville

Getting Images 2

• Get post-copyright images (100 yr guideline)

• Capture image (permission need still applies) – PSP, SnagIt, Print Screen

• Explore your organization’s intellectual property

• Create an image with a drawing program

• Round Robin - How do you get images?

Processing Images

Image Qualities

• Transparency

• Compression

• Scalability

• Color Depth

File Formats

• Vector - paths - commercial design work• .wmf/.ai (illustrator) /.cd (corel) - not really Web

• Raster - pixels - Web images• .jpg (most colors in compression, but not

transparent)

• .gif (allows transparency, but fewer colors)

• .tif - used often for no compression - some browsers

• .bmp (large file size, microsoft paint)

• .png (more colors than gif, w/ transparency option)

File Sizes• Why Care?

– Loading speed– Space Limitations

• Desirable File Sizes

– 50-300k for display images (arbitrary but possible)– more for printing (but consider an extra step)

• Decreasing size

– smaller image or different compression

Image sizes/resolutions

• 640x480 base size = 307,200 pixels

• ppi = display / dpi = printer

• pixels/ppi=inches

• 72 ppi for web

• Declaring image size in HTML

• Scaling using image programs/Scaling using Word

How to work with images...

Special Images

• Animations - many different programs

• Panoramas (Photovista) - steerable

• Image maps - FrontPage - What do you use?

Look for an image, maybe of a panorama,

maybe with the top and bottom blacked out to show that

it could go all the way around my walls (sample image plan)

Programs

• Paint (.bmp only - severely limited)

• Paint Shop Pro - $84, demo available, nice capture

• Whatever came with your scanner or camera

• Microsoft Word - Great for scaling, clipart

• Adobe Photoshop - $127 (Image Lab?)

• Gimp - Free but very complicated

• Others?