Graphics for the Web Graphic formats and other considerations

Graphics for the WebSlide 2 Web Graphics Things that need to be considered –User’s display monitor –Bandwidth capacity –Graphics size The reality imposes limits on the type and size of graphics that can be used

Graphics for the WebSlide 3 User’s Display Monitor Different types of monitor, VGA, SGVA and XGA Different resolution settings (user defined)

Graphics for the WebSlide 4 Bandwidth Considerations Modem speed DSL or other type of Broadband internet connection Internet traffic

Graphics for the WebSlide 5 Graphic File Size The larger the graphic the longer it will take to download The file size depends on the settings used to capture the image: –The resolution of the graphic in pixels per inch –The colour bit-depth –The physical size of the graphic

Graphics for the WebSlide 6 How are Graphics used in web pages? As backgrounds As inline images As imagemaps with built in links to other areas of the web As rules or lines

Graphics for the WebSlide 7 Graphic Resolution The more pixels in the image the longer it will take to download The more pixels in the image the larger it will appear on the screen

Graphics for the WebSlide 8 Background Images A background image either fills the screen space or, if it is not big enough is tiled (repeated) across the screen filling it

Graphics for the WebSlide 9 Graphic Backgrounds The text or other content you put in the web page sits on ‘top’ of the background graphic image

Graphics for the WebSlide 10 Cont/ Background images should not interfere with the readability of the web page content

Graphics for the WebSlide 11 Cont/ Background images may be pictures, textures or drawings If the background image has too much detail it makes the screen too ‘busy’ and makes the text difficult to read

Graphics for the WebSlide 12 Inline Images This is what you call an image that is coded in HTML in the body section of a web page The picture appears on your screen in the position it has been placed in the document

Graphics for the WebSlide 13 Inline Images If your page has a background image the inline image will appear on top of it The size of an inline image can be controlled by placing the desired dimensions in the HTML code to display it.

Graphics for the WebSlide 14 Image Maps Graphics that are used to navigate your website A single graphic is divided up into various sections. Clicking on different areas of the imagemap, link you to different areas of the website Special HTML code breaks the image into the required areas for the links

Graphics for the WebSlide 15 Lines and Rules Lines and rules are image elements They are used to punctuate and separate sections of text etc Used to break long blocks of text into more manageable chunks

Graphics for the WebSlide 16 Using Rules The HTML tag is No closing tag needed –Using the tag without further values will display a 3D line going across the width of the screen –We can give values (width, size and align) to a rule –The values are entered as a number of pixels –The value NOSHADE gives a 2-D line

Graphics for the WebSlide 17 Rules Rules are used to break up long passages of text The help the viewer to read by giving the eye a rest

Graphics for the WebSlide 18 Graphic File Formats Since download time is the most important factor JPG, GIF and PNG graphics are must suitable formats These are condensed file formats and much smaller than TIFF, BMP or other formats

Graphics for the WebSlide 19 Interlacing Speeds download of graphics Interlacing allows the visitor to see a low resolution image while the higher one is being loaded The GIF89a file format supports interlacing while the older JPG formats do not.

Graphics for the WebSlide 20 Solving the JPG problem This can be overcome for the JPG formats by using the extra HTML code – inside the This first loads a low resolution version of the image but you need 2 images! The 2 images used must have same dimensions