GRAPHICS/IMAGES INFSCI 1052

Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware of copyright holders even if you change the image  Easier to maintain quality if resizing to a smaller size  Black and white are scanned using 8 bit gray scale Using black and white allows no adjustments to midtone colors  Digital Cameras  Web is relatively low resolution environment so high end equipment is not necessary  Electronic drawing  Adobe Illustrator  Adobe Photoshop

INFSCI 1052 Stock Photography  Pictures  Illustrations  Buttons  Logos  Rights-Managed  Need a license to use May be able to get exclusive use for an image Can be pricey  Royalty free  Pay a one time fee

INFSCI 1052 Web Sites with Images  IStockPhoto  Royalty free  Submitted by users  Inexpensive – as low as a dollar  Getty Images  Largest collection of images Professional Royalty free and Licensed Inexpensive to very expensive  Jupiter Images Rights managed and royalty free

INFSCI 1052 JuicyStock.com  Pics of people and places around the world  Inexpensive Veer  Rights managed and royalty free  Edgy  Illustrations, fonts and stock video Clip Art  Royalty free illustrations, animations and buttons  Usually get clip art with graphics packages like PowerPoint  Can be amateurish – sometimes pay membership fee – sometimes free

INFSCI 1052 Sites for Clip Art  Clipart.com  Membership fee – good quality  Original Free Clip Art  Free  #1 Free Clip Art  Free

INFSCI 1052 Graphics Formats  There are hundreds of formats  Three choices for the web  GIF Best for images with flat colors and hard edges Good for animation and transparency  JPEG Best for photographs Best for images with color blends  PNG Good substitute for GIF Good for transparency

GIF  Graphics Interchange Format  Small size and cross platform compatible  Uses compression scheme that is good for:  Logos  Lineart  Graphics containing text, icons  Doesn’t work as well when saving photgraphs or textured images  8 bit – 256 colors  Uses indexed color – color table  Can edit color table in Photoshop  Many images start off as RGB and then are transferred to GIF and 256 color scheme so some color information gets lost

INFSCI 1052 GIF  Compression  Lossless  No image information is lost (except color)  Uses Lempel – Ziv – Welch compression scheme LZW Looks for repetition in image – that’s why images with large areas of a single color do well  All parts of a GIF image can become transparent so the background shows through  Interlacing  Multiple passes to show the image – gives hint of the image on first pass  Animation  Multiple frames of an image and settings for speed etc all stored in one GIF file Gifmation –  Tutorial for creating GIF animation 

INFSCI 1052 JPEG  Joint Photographic Experts Group – a standards body that created it  Good for gradients and blended colors – not so good for large flat color areas and sharp edges  Don’t use a limited color palette like GIFS  24bit images that can represent millions of colors  Compression  Lossy – some of the image information is discarded  Can choose the amount of compression – file size versus image quality  Process is not reversible – don’t continuously resave a JPEG image  Photoshop allows you to make copies of the original  Display time  JPEGS display in multiple passes increasing the resolution with each pass – similar to GIF interlacing – can specify the number of passes  Takes longer – not much – to decompress a JPEG than a GIF

INFSCI 1052 PNG  Portable Network Graphic  Designed to replace GIF (Web) and TIFF ( storage of images)  8 bit indexed or 24 bit RGB or 16 bit grayscale or 48 bit color  Lossless  On/off transparency or levels of transparency  Progressive display  Embedded text  Transparency  Biggest feature  Can contain multiple levels of transparency – alpha channel  Use PINGS  May have smaller file size than GIF depending upon graphics software  Larger file size than JPEG though

INFSCI 1052 Questions to ask for choice of format Large Flat color areas?  GIF or 8bit PNG Graduated color?  JPEG Flat and graduated color?  GIF or 8 bit PNG Transparency?  GIF or PNG Multiple levels of transparency  PNG Animation  GIF

INFSCI 1052 Size and Resolution  Bitmapped (Raster)  All GIF JPEG and PNG  Made up of many pixels  Different from vector graphics Smooth lines and filled areas Based on mathematical formulas  Resolution Pixels per inch – for the web there is no consistency between monitors On paper 300 to 600 Onscreen, typically 72 Higher resolution monitors make images look smaller The pixels are smaller Digital camera can take a picture 1600 px by 1200 px which is way too big for the web

INFSCI 1052 Resize images  Use graphics image package like Photoshop. Also, many online services for free or image manipulation software for free Optimize images for download  Dial up – one second per kilobyte  Many corporations have limits on file sizes  Limit dimensions of the image Crop out unneeded space or color swatches Take advantage of caching If image is used repeatedly Choose right compression for the type of image Use professional package such as Adobe Photoshop Reduce the number of colors with graphics software GIFS can contain 256 but do you need all the colors When you save in graphics package there are choices for bit depth and number of colors. Often 5 bit color looks just as good on the web Limit the amount of dithering ( colors from palettes are mixed to create a new color) in GIFS Need dithering in color blending or gradients

INFSCI 1052 GIF Optimization  Design for flat colors  Save GIF with fewest colors needed  Adjust dithering  Apply a lossy filter JPEG  Use high compression levels – different quality levels  Use weighted optimization – some areas of an image canbe compressed more than others  Slightly blur the image  Avoid flat colors and sharp lines

INFSCI 1052 PNG  Avoid PNG-24  With PNG-8  Reduce number of colors  Reduce dithering  Design with flat colors  Reduce interlacing  Photoshop – Optimize to file size