Images & Image Maps 16 th February

Images & Image Maps Web authors can add icons, logos and high impact images to their pages Images enhance web pages Important issues to consider are image complexity and file-size General rules to be followed:  Use images to enhance page layout and content  Keep image complexity low  Use thumbnail versions of images to reduce download time  Use icons and logos to distinguish the web page

General Information Computer screen is divided horizontally and vertically into pixels  Example: a monitor with a resolution of 800x600 has 800 and 600 pixels in the horizontal and vertical directions respectively

4 Types of Graphics Graphic types commonly used on Web pages:  GIF  JPG  PNG

5 GIF Graphics Interchange Format Best used for line art and logos Maximum of 256 colors One colour can be configured as transparent Can be animated Uses lossless compression Can be interlaced

6 JPEG Joint Photographic Experts Group Best used for photographs Up to 16.7 million colors Use lossy compression Cannot be animated Cannot be made transparent Progressive JPEG – similar to interlaced display

7 PNG Portable Network Graphic Support millions of colors Support multiple levels of transparency (but browsers do not -- so limit to one transparent color for Web display) Support interlacing Use lossless compression Combines the best of GIF & JPEG Browser support is growing

Images Images take a long time to load so JPEG and GIF formats allow progressive loading of images  Progressive JPEG  Interlaced GIF Images are loaded with gradual resolution Transparency allows the viewer to see the background of a Web page through the part of the image that is transparent

Image Scaling Users can scale images up or down by using an image program or XHTML tags Why would it not be recommended to scale images up?  Resolution will worsen  Staircase effect (jaggedness of the image boundaries)

10 XHTML Image Element Configures graphics on a Web page src Attribute  File name of the graphic alt Attribute  Configures alternate text content (description) height Attribute  Height of the graphic in pixels width Attribute  Width of the graphic in pixels

XHTML Alignment

XHTML More Attributes Adding Vertical Space  vspace Attribute Adding Horizontal Space  hspace Attribute A more modern approach is to use the CSS padding property

Accessibility & Images Required:  Configure the alt attribute Alternate text content to convey the meaning/intent of the image NOT the file name of the image Use alt=“” for purely decorative images Optional:  Configure the longdesc attribute Used when meaning cannot be conveyed in the alt text Usually a URL to a Web page with text

14 Image Links To create an image link use an anchor element to contain an image element Home

Using Images A web page that uses an image – School of Computing Homepage (

Choosing Names for Image Files Use all lowercase letters Do not use punctuation symbols and spaces Do not change the file extensions (should be.gif,.jpg,.jpeg, or.png) Keep your file names short but descriptive  i1.gif is probably too short  myimagewithmydogonmybirthday.gif is too long  dogbday.gif may be just about right

17 Organizing Your Site Place images in their own folder Code the path to the file in the src atttribute

Other Image Topics Thumbnail Images Image Maps Sources for Graphics Guidelines for Using Images Accessibility

19 Thumbnail Image A small image configured to link to a larger version of that image.

Image Maps An image map is defined as a single image that links to multiple URLs or XHTML documents They allow us to link different parts of an image to different web pages Image maps are both client and server-side based Examples are roadmaps and layouts

Image Maps (example) Triangle.html Rectangle.html Circle.html

Types of Image Maps There are 2 types of image maps : Server side  Requires client-server communication twice  Server side maps existed before the client maps Client side  Client resolves the click locally and then requests the web page  Web authors should use client-side image maps in their web pages

Creating Image Maps Create the image Define the virtual shapes of the map Configure the image map Create the XHTML files (URLs)

Creating Image Maps XHTML provides 3 virtual shapes  Rectangle  Polygon  Circle Each of the virtual shapes can be defined by a set of points The image software can be used to find the co-ordinates of the points used to define the virtual shape

25 Image Maps element  Defines the map element  Defines a specific area on a map  Can be set to a rectangle, circle, or polygon href Attribute shape Attribute coords Attribute

Sample Image Map

Write the XHTML code for the image map in the next slide Rectangle, coords are 10,25,90,60 Polygon, coords are 100,60,210,60,150,10 Circle coords are 252,40,35 Use the 3 tags, and

Write the XHTML code for this Restaurant Image Map Appetiser as rectangle Meals as triangle Pizza as circle

Using Image Maps The tag is used to define an image The tag is used to define one virtual shape at a time

30 Sources for Graphics Create them yourself using a graphics application:  Adobe Photoshop  Adobe Fireworks  Google’s Picasa ( Download graphics from a free site Purchase/download professional-quality graphics Purchase a graphics collection on a CD Take digital photographs Scan your photographs Scan your drawings Hire a graphic designer to create graphics

31 Guidelines for Using Images Consider image load time Reuse images Consider image file size with image quality Screen Resolution Specify dimensions Gamma – brightness & contrast

32 Images and Accessibility Don't rely on color alone.  Some visitors may have colour perception deficiencies. Use high contrast between background and text color. Provide a text equivalent for non-text elements.  Use the alt attribute on your image elements If your site navigation uses image links, provide simple text links at the bottom of the page.

Reference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript