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?