Transcript Images for the Web

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?