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 is an empty tag (similar to the tag). We simply insert an image, and don’t need to tell the browser where the image ends.

IMG 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 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 <!-- img { padding: 10px; float: left; position: static; } -->

Image controlled using CSS

Image Maps hot spotsAreas of an image can be defined as hot 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