html presentation graphics h format h data compression h size h creating or finding h publishing
TRANSCRIPT
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