HTML presentation

Graphics

formatformat data compressiondata compression

sizesize creating or findingcreating or finding

publishingpublishing

HTML presentation

Graphics

You have created quantitative graphics - You have created quantitative graphics - charts and graphs from numbers using charts and graphs from numbers using ExcelExcel

You will also explore You will also explore bit-mappedbit-mapped graphics in paintinggraphics in painting

and and raster raster graphics in drawinggraphics in drawing you can create a graphic with a digital you can create a graphic with a digital

camera camera

HTML presentation

Common Bond

How do the images you work with in How do the images you work with in Paint, Draw or a digitized image have a Paint, Draw or a digitized image have a common bond?common bond?

They are all stored using some They are all stored using some formatformat. . format format - special pattern- special pattern data compressiondata compression

HTML presentation

Data Compression

A full-screen 256 color photograph takes A full-screen 256 color photograph takes about a megabyte of storage, the same as about a megabyte of storage, the same as the complete text from a typical paperback the complete text from a typical paperback book!book!

massive storage for graphicsmassive storage for graphics slow to transmit over computer networksslow to transmit over computer networks data compression allows large files to be data compression allows large files to be

temporarily squeezedtemporarily squeezed

HTML presentation

Data Compression

compressed files must be compressed files must be decompressed to be useddecompressed to be used

all forms of compression involve all forms of compression involve removing bits - the trick is to remove removing bits - the trick is to remove bits that can be replaced when the file is bits that can be replaced when the file is restored restored

different compression techniques work different compression techniques work best for different types of databest for different types of data

HTML presentation

Different forms of Data Compression

lossless compression - allows a file to lossless compression - allows a file to be compressed and later be compressed and later decompressed without any loss of datadecompressed without any loss of data

zip/pkzip (DOS/windows), tar (Unix) and zip/pkzip (DOS/windows), tar (Unix) and GIF for general graphicsGIF for general graphics

HTML presentation

Different forms of Data Compression

lossy lossy systems can usually achieve a better systems can usually achieve a better compression than a compression than a lossless lossless one but may one but may lose some information. This is tolerable in lose some information. This is tolerable in many types of sound, graphics, and video many types of sound, graphics, and video files but not for programs and data filesfiles but not for programs and data files

Jpeg is a popular lossy compression system Jpeg is a popular lossy compression system for graphics filesfor graphics files

Mpeg is for digital videoMpeg is for digital video

HTML presentation

Web Graphics

The two most important considerations The two most important considerations in selecting graphics for the web arein selecting graphics for the web are

sizesize formatformat

HTML presentation

The Size of Graphics Files

important in web pagesimportant in web pages users will have to download your pages users will have to download your pages

and view themand view them a good size for a web graphic is a good size for a web graphic is

between 10k-30k - about 3% the size of between 10k-30k - about 3% the size of the high color, high resolution graphicthe high color, high resolution graphic

HTML presentation

Picking your Web Graphics Type

Only 2 file typesOnly 2 file types GIF (CompuServe Graphics GIF (CompuServe Graphics

Interchange Format) - very popular Interchange Format) - very popular among browsersamong browsers

JPEG - (Joint Photographic Experts JPEG - (Joint Photographic Experts Group) - gaining popularityGroup) - gaining popularity

HTML presentation

GIF

displays graphics inline ( doesn’t require displays graphics inline ( doesn’t require a special viewer)a special viewer)

lossless image clarity than JPEGlossless image clarity than JPEG images that have a small color palette images that have a small color palette

(256 or less) often look better(256 or less) often look better can create transparent graphicscan create transparent graphics larger than JPEGslarger than JPEGs

HTML presentation

GIF

GIF images decompress more quickly GIF images decompress more quickly and tend to be drawn more quickly than and tend to be drawn more quickly than JPEGs of the same file sizeJPEGs of the same file size

drawback - they do include certain drawback - they do include certain copyrighted elements that make it less copyrighted elements that make it less than an open standard for graphics than an open standard for graphics interchangeinterchange

HTML presentation

GIF File Formats

InterlacedInterlaced noninterlacednoninterlaced difference is how the browser displays difference is how the browser displays

the graphic as it loadsthe graphic as it loads

HTML presentation

JPEG

gaining popularity on GIFgaining popularity on GIF can have more color than GIFcan have more color than GIF smaller size can transmit more quickly smaller size can transmit more quickly

over the netover the net decompression takes longerdecompression takes longer

HTML presentation

Creating graphics for the Web

For creative people, use programs such For creative people, use programs such as Photoshop or CorelDraw as Photoshop or CorelDraw

can use Microsoft Paint, but you must can use Microsoft Paint, but you must use a program (graphics converter) that use a program (graphics converter) that converts the Paint format (BMP) into GIF converts the Paint format (BMP) into GIF or JPEG)or JPEG)

JASC’s Paint Shop Pro (shareware)JASC’s Paint Shop Pro (shareware) http://www.jasc.com/psp.htmlhttp://www.jasc.com/psp.html

HTML presentation

Creating graphics for the Web

most important thing is file sizemost important thing is file size 15K-35K15K-35K download public-domain graphicsdownload public-domain graphics scanned photographs, digital camerasscanned photographs, digital cameras http://seurat.art.udel.edu/Site/http://seurat.art.udel.edu/Site/

InfoDocs/GIFToot/GifTips.HTMLInfoDocs/GIFToot/GifTips.HTML

HTML presentation

Good Sites

http://www.webdiner.com/bps/http://www.webdiner.com/bps/graphics/graphic.htmgraphics/graphic.htm

HTML presentation

How to Grab that Graphic?

Called downloadingCalled downloading just point the mouse on the graphic, just point the mouse on the graphic,

click the RIGHT mouse button and click the RIGHT mouse button and choose the option “Save Image as …choose the option “Save Image as …

Now save it to your floppy (zip)… or at Now save it to your floppy (zip)… or at home you can save it on your hard drivehome you can save it on your hard drive

WARNING - be respectful of copyrightsWARNING - be respectful of copyrights

HTML presentation

Embedding Graphics in Web Pages

HTML uses an empty tag called the <IMG> HTML uses an empty tag called the <IMG> (image tag)(image tag)

<IMG SRC=“image URL”><IMG SRC=“image URL”> oror <IMG SRC=“path/filename”><IMG SRC=“path/filename”> Note: all web production tools do insert these Note: all web production tools do insert these

commands through the product’s GUI interface. commands through the product’s GUI interface. But it is good to recognize the set of tags that But it is good to recognize the set of tags that accomplishes this actionaccomplishes this action

HTML presentation

Background Graphics

<BODY BACKGROUND = “paper.gif”><BODY BACKGROUND = “paper.gif”> tag is inserted after the <BODY> tagtag is inserted after the <BODY> tag

HTML presentation

Contrast and Brightness Rules

If you use a light background, choose If you use a light background, choose dark font colorsdark font colors

Light font->dark backgroundLight font->dark background You may need to adjust your font color You may need to adjust your font color

when choosing a new backgroundwhen choosing a new background

HTML presentation

Adding a background or graphic to your Homepage

You can use a simple editor and type in You can use a simple editor and type in the HTML commands from the previous the HTML commands from the previous two slides two slides

oror use Composer - (see Composer ppt)use Composer - (see Composer ppt) or (substitute your favorite HTML editor) or (substitute your favorite HTML editor) or use Word - (see Word-Web ppt)or use Word - (see Word-Web ppt)

HTML presentation

Questions