Transcript 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
– 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 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
Clip art
file, .wmf
format
Clip art file,
.cgm
format
Scalable without loss of
definition
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 download 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