eScience Lectures Notes : COMP1710
Slide 1 : 1/19: From New Media to The Web
COMP1710 Tools for New Media and Web
Images on the Web
then 'n'ext or 'b'ack
Slide 2 : ToC : COMP1710
Table of Contents (19 slides) for the presentation :
COMP1710
Slide 3 : 3/19: New Media and Web
In this session : Images on the Web
-
Why?
-
What sorts of image?
-
What formats should we use?
-
How to optimise images for the web?
Slide 4 : 4/19: Many Different forms
Images : Many Different forms
-
Photographs : events, people, situations, moods, landscapes,
architecture
-
Sketches : outlines of motion, shadow, expression and form
-
Paintings
-
Symbols : ideas, social movements, organization
-
Corporate logo : company's name, products
-
Flags : official image
-
Maps
-
Diagrams : process or set of relationships
-
Graphs : quantitative relationships, explain numbers
Slide 5 : 5/19: What for ... different usages
Images : What for ... different usages
Provide facts (map, graph, photographs as visual evidence)
Explain a process (diagram, detailed drawings ...)
Set the mood
Evoke an idea
Pinpoint a location
Illustrate relationships, organisation
Tell stories
Compare
Identify
A universal language?
Slide 6 : 6/19: What for ... different usages
Two Main categories
Vector Graphics
Defined by the set of primitives that define the drawing
E.g., lines from 1 point to another, a box of a certain size
Are converted into pixels for display but not stored as pixels
Graphs, animation, mix of drawing and texts
Bitmap images
Defined by the set of points of the image surface : the set of pixels
Photographs : rich in colours, more tolerant to compression
Graph like, icons : limited number of colours, mainly flat tint
Slide 7 : 7/19: Image Characteristics
Image Characteristics
A pixel is the smallest controllable element on a graphic screen
Resolution : More pixels in a display/image
(high resolution) mean more information and details can be shown
The relationship between the image on the screen and
the bits in memory (VRAM) is called bit mapping.
Bit depth (colour depth or pixel depth) for
images is the number of bits per pixel
A 640 * 800 screen has 512,000 pixels
Each pixel is controlled by data stored in "Video
RAM" or "Frame Buffer"
Slide 8 : 8/19: Bit Depth
Bit Depth
| Bit Depth (bits per pixel) |
Number of colours or tones |
| 1 |
2 |
| 2 |
4 |
| 3 |
8 |
| 4 |
16 |
| 6 |
64 |
| 8 |
256 |
| 16 |
65,536 |
| 24 (3 x 8 ) |
16,777,216 |
| 32 |
4,294,967,296 |
Colour Lookup Tables (LUTs) give you a choice of more colours
One stores only the index to a set of colours chosen amongst a
larger set
E.g. : 16 bit pictures, choosing amongst millions of colours
instead of thousands
a 300x200 image could anyway need up to 60,000 colours!
Slide 9 : 9/19: Image Size in kBytes
Image Size in kBytes
To compute an estimate of the size of an image, without taking
into account the compression
File Size = (Horizontal pixels * Vertical pixels * Bit Depth) / (8 * 1024
bits)
E.g. : 640 x 400 Black and White Image
File Size = (640 * 400 * 1) / (8 * 1024) = 31.25 kB
Slide 10 : 10/19: Image Size in kBytes
Choosing an Image File Format
Raw bitmap format: TIFF, PICT, BMP, RAW ... needs to be
compressed to be put on the web, into ...
| Image Type |
Gif |
Jpeg |
PNG |
| Pronunciation |
Either"Jiff" or with a hard G, like "Give" |
Jay-peg |
Ping! |
| What it stands for |
Graphics Interchange Format |
Joint Photographics Expert Group |
Portable Network Graphics |
| What it's good for |
Images with a few distinct colours, including line art
and simple colours. Supports animation. |
Images with lots of colours and or shades, such as photos
and lifelike images. No animation. |
Upcoming format. Combines best features of GIF and JPG.
|
| What it's not good for |
Photo-realistic images with colours that blend: They'll appear broken
and jagged |
Pictures - either graphics or photos - with large areas of a single colour |
Photographs (size issue only) |
| Colours |
1-bit to 8-bit (256 colours) |
24-bit only (millions of colours |
8-bit, 24-bit or 32 bit |
| Animation |
Yes |
No |
Yes, with MNG |
| Transparency |
Yes, a single colour can be transparent |
No |
Yes. Plus 256 levels of partial transparency |
| Compression |
Lossless ( ! ) |
Lossy |
Lossless ( ! ) |
| File Size |
Images can be reduced to truly tiny file sizes, but compression isn't
as good as it could be |
File size tends to be larger than GIFs, but the target is not the same
anyway |
Compression is excellent (better than GIF) |
| Advantages |
+ Tiny Images
+ Animation (Gif 89a)
+ Transparency
+ Well supported
+ Interlacing
|
+ Excellent colour retention
+ Excellent compression
+ Simple compression process
|
+ Excellent compression, with no loss of quality
+ Suitable for a wide range of images
+ Excellent cross-platform viewing
+ To be used for
alpha
channel and transparency with photographs
|
| Disadvantages |
- Complicated optimisation process
- Certain visual effects (glowing light, feathered edges, vertical stripes
... compresses poorly)
- Not patent free |
- Not much control over compression process
- No transparency
- No Animation |
- Not yet widely supported |
Source: The Unusually Useful Web Book / Everything we've
learned about why sites succeed! by June Cohen / New Riders
A must read: Compression
/ Optimizing Web Graphics from Webreference.com
Slide 11 : 11/19: Image Sources
Image Sources : Scan, Snap, Sketch, Steal ...
You should always ask permission to use images that are not yours
if you want to make them public. In the context of labs and
assignments, also specify the source of the image, and what you
have done to it
Scan : Scanner (from 300 dpi to 72 dpi)
Snap
: Digital Camera (any digital camera is enough for the web : 72dpi target)
If you want to print your pictures, simple estimate
(
2000 x 3000 pixels ... 20 x 30 cm)
Sketch : Draw from Scratch
From photoshop to icon drawing software
Modify : Images from Web Sites
Buy : CD-Rom Collections
Stills from video
Slide 12 : 12/19: Images on Web Sites
Images on Web Sites
Inline Images
"Button"
Background images
Full screen, tiled, under any block element
(block: p, ul, ol, dl, pre, div, center, blockquote, form, isindex, hr, table)
Linked Images
Slide 13 : 13/19: Inline Image
Inline Image
<img src="image/building.jpg"
alt="Centre for Arab and Islamic Studies"
width="600" height="399"
longdesc="http://arts.anu.edu.au/cais/"
title="Islamic Studies" >
And other possible attributes, e.g. to create a link towards the
full resolution of the image, or another document if the image is a
button/icon :
href="image/buildingBig.jpg"
Slide 14 : 14/19: Inline Image with Style
Inline Image with Style
but this line is not in figure caption
-
used .png instead of
.jpg
The HTML:
<div class="figure">
<p><img src="building.png" alt="Islamic Studies"
class="scaled"></p>
<p>more text here</p>
</div>
<p>but this is not in figure caption</p>
And this is the style sheet:
div.figure {
float: right;
width: 40%;
border: thin black solid;
margin: 0.5em;
padding: 0.5em;
min-width: 150px;
}
div.figure p {
text-align: center
font-style: italic;
font-size: smaller;
text-indent: 0;
}
img.scaled {
width: 100%;
}
Source: http://www.w3.org/Style/Examples/007/figures.html
Slide 15 : 15/19: Image Map
Image Map
Centre for Arab and Islamic Studies
<img src="building.jpg"
alt="Islamic Studies" border="0"
usemap="#Map">
<map name="Map">
<area shape="rect"
coords="209,228,302,325"
href="http://arts.anu.edu.au/cais/"
alt="Entry Door"
title="Entry Door">
<area shape="circle"
coords="450,96,42"
href="http://www.canberratourism.com.au/frame1.cfm?pageid=90"
alt="Black Mountain Tower"
title="Black Mountain Tower">
<area shape="rect"
coords="13,264,63,325"
href="building.jpg"
alt="Load The Image"
title="Load The Image">
</map>
Slide 16 : 16/19: Background Image to anything
Background Image to anything with CSS
A Side Panel
body { background-attachment: fixed;
background-image: URL(panel.gif);
background-repeat: repeat-y;
margin-left: 60;
}
Chose your background image appropriately
Slide 17 : 17/19: EXIF, IPTC and other Metada
EXIF, IPTC and other Metada
Information stored within image files
EXIF : Techinal data from the producer of the image (Digital Camera, on shooting
conditions)
IPTC : Edited by the user (Title, keywords, copyright ...)
Used by photo galerie generators like ... "Galerie"
Photoshop allows you to store text metadata within your
image files, by using the File / File Info command. That set of fields is IPTC/NAA
compatible, and it has become a standard for the handling and storing of image
metadata, specially by news agencies. On the other hand, EXIF data is information
that digital cameras store in the image file, about the camera itself and its
shooting values.
Next ? Extensible Metadata Platform (XMP)
-
Created and open sourced by Adobe in 2001
-
-
Aims to standardize the definition and creation of metadata
-
Built using existing web standards
-
Designed to be extensible
Slide 18 : 18/19: Editing: Enhance and Crop
Editing: Enhance, Crop And Resize and eventually Compress
With Adobe Photoshop, Photoshop Element, Image Ready, Macromedia Fireworks,
Paint Shop Pro (PC), GraphicConverter (Mac) iPhoto (Mac)...
-
Selection tools
-
Painting tools
-
Text Tools
-
Modification tools (Filters ...)
-
Resizing tools
-
Viewing Tools
Simple editing: iPhoto
Visual Comparison of the compression: Image Ready
Everything you want: Photoshop
Slide 19 : ToC : COMP1710
Table of Contents (19 slides) for the presentation :
COMP1710
