1 / 27

Images in web pages

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

knoton
Download Presentation

Images in web pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Images in web pages

  2. 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

  3. 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.

  4. 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

  5. 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

  6. 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

  7. 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.

  8. 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”

  9. 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>

  10. Image controlled using CSS

  11. Image Maps • Areas of an image can be defined as hot spots • These enable the browser to hyperlink to other pages or areas

  12. 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

  13. Image Map example These are set up as hot spots

  14. Image Map example  Clicking on the mapped hot spot activates the hyperlink and loads a new page

  15. Image types • Characteristics, advantages and disadvantages • Vector images • “Line” drawings, computer graphics • Bit-mapped or raster images • Photographs, “painted” images

  16. 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

  17. Vector image examples Clip art file, .wmf format Clip art file, .cgm format Scalable without loss of definition

  18. 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

  19. 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

  20. GIF images Small images don’t scale up well

  21. 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

  22. JPG images

  23. 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

  24. PNG images

  25. 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

  26. 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

  27. 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

More Related