Upload
cynthia-briggs
View
213
Download
0
Embed Size (px)
Citation preview
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