GRAPHICS/IMAGES

INFSCI 1052

INFSCI 1052

Source: Learning Web Design by Jennifer 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 – www.boxtopsoft.com

Tutorial for creating GIF animation http://www.learningwebdesign.com/pdf/animated_gifs.pdf

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 formatLarge Flat color areas?

GIF or 8bit PNGGraduated color?

JPEGFlat and graduated color?

GIF or 8 bit PNGTransparency?

GIF or PNGMultiple levels of transparency

PNGAnimation

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