Images in web pages

Images

• Why do we use images?• They add interest, and keep the user from being

bored• They convey information

– Charts are easier to understand than tables of figures– Photographs give sense of processes or locations

better than words – Logos remind us of corporate identity– Icons convey functional meaning

• Some images are invisible!– Eg “shims” to create space

Images

• We can add images to our HTML pages using an image tag.

• An image tag has several attributes, some of which are mandatory, and some that are optional.

• The image tag <img src=“” /> is an empty tag (similar to the <br /> tag).

• We simply insert an image, and don’t need to tell the browser where the image ends.

IMG

• <img src="imgs/simple/shim.gif" width="38" height="5" border="0“ alt=“” />

• Src= the source URL of the image, or the path to it

• Width and height attributes tell the browser how much space to allow

Measurements

• Width and height are measured in – Pixels, or– Percentage of page size

• Note that attributes take “quotation marks”

• You can force an image to cover the page background by using “100%”, but – Small images enlarged by instructions to the browser

display as poor quality– Large-enough images to give good quality will be slow

to download over slow connections/modems– The browser uses time and processor power to

manage resizing

IMG

• <img src=“imgs/simple/shim.gif” width=“38” height=“5” border=“0” alt=“”>

• Sometimes you want a border round an image, but more often you don’t– This example is a “spacer” making white space on the

page, so does not need a border– Borders are measured in pixels– Again, attributes take “quotation marks”

• Be careful that the quotation marks in your HTML are “straight quotes” not the “curly quotes” shown here or in Word

ALTernative text

• alt=“ ”• Use the ALT tag to provide alternative text for

your image. – Text is displayed by the browser when you mouse

over the image – While loading (and if it doesn’t display at all) it is

represented as a small text box– Empty ALT tag alt=“ ” tells a screenreader to skip

the image – Lack of ALT tag forces a screenreader to tell the user

there’s an image - because there’s no way of knowing how important the image may be.

ALTernative text

• Good ALT tags tell users more about your images even if they are fully sighted

• Keep ALT tags short and informative – Alt=“road blocked by fallen trees”

Images

• Positioning images on the page can be done with the ALIGN attribute, but– Like many older HTML tags this is deprecated and

the use of style sheets is preferred• <style type="text/css">• <!--• img {• padding: 10px;• float: left;• position: static;• }• -->• </style>

Image controlled using CSS

Image Maps

• Areas of an image can be defined as hot spotshot spots• These enable the browser to hyperlink to other

pages or areas

Image Maps

• Useful for “cheap and cheerful” buttons– make a simple background in Photoshop

• Dreamweaver makes image mapping easy– no “user feedback” other than the hyperlink cursor

“finger” and the jump to new content

• Defining the co-ordinates for it by hand is tedious

Image Map example

These are set up as hot spots

Image Map example

Clicking on the mapped hot spot activates the hyperlink and loads a new page

Image types• Characteristics, advantages and

disadvantages

• Vector images– “Line” drawings, computer graphics

• Bit-mapped or raster images– Photographs, “painted” images

Vector images

• Define areas or lines mathematically• Scalable without loss of definition• File sizes do not increase with image size• Often look artificial, “computer generated”

– which may be what you need

• Small file storage• Best-known web format is Flash (exported

as .swf)• New standard – Scalable Vector Graphics

or .svg – slowly being supported

Vector image examples

Scalable without loss of definition

Clip art file, .wmf format

Clip art file, .cgm format

Bitmapped (raster) images

• Define each pixel in terms of colour, intensity and position

• Not just Windows “Bitmap” format .bmp (though this is a bitmapped format)

• .jpg, .gif or .png used on Web• JPG and PNG can look subtle and lifelike• Potentially LARGE files; 2 x larger image requires

4 x larger storage and up- and down-load time• Compression techniques can make file sizes

smaller, but often at cost of loss of data• Small images don’t scale up well

Bitmapped: GIF

• Graphics Interchange Format

• .gif supports 256 colours

• .gif 89a format supports transparency– Good for buttons and other non-rectangular

shapes

• Supports compression

• Not very realistic for photos with thousands of colours

GIF images

Small images don’t scale up well

Bitmapped: JPG or JPEG

• Joint Photographic Experts Group

• Supports millions of colours

• Excellent for photographic reproduction– Realistic colour owing to wide range

• Good compression, but algorithm discards data (lossy)– So always keep a high quality version

separately from the web version

JPG images

Bitmapped: PNG

• Portable Network Graphics• Fireworks’ native format• Supports millions of colours• Supports transparency• Reasonable compression

– But can make larger files than .gif or .jpg

• Increasing browser support– Not all features work correctly in older browsers

PNG images

Optimising

• Many Internet users still have low bandwidth access

• Images are useful, but have disadvantages

• Most browsers only support GIF, JPG and PNG– only Internet Explorer supports .bmp

Optimising – a practical example

• Define your expected screen minimum (eg 800 x 600px)

• Deduct 40px for scrollbars = 760px• Define any menu width, eg 1/5 of screen width =

~150px• Remainder (610px) is available for content• Decide site policy, eg “Always leave half the

space for text” – 610 / 2 = 305• Therefore images should be less than 305 px

wide

Optimising• Resize your chosen image to 305 px wide (in this case)

– Most photo editor programs link proportions, so the height will adjust

• “Save As” (or “export” or “save for web”) a new copy– using a web friendly format (.jpg, .gif, .png)

• Apply compression – High compression = lower quality = smaller file size = faster

up/download– Low compression = higher quality = larger file size = slower

up/download• Save to image folder with suitable name eg

“house_sml.png”– Try to avoid spaces in filenames as some servers won’t handle

them• KEEP the original safely among source materials for the

site