Transcript Graphics for the Web - Welcome to the Department of Mathematics

HOPE
Website Development
Graphics
Stewart Blakeway
FML 213
[email protected]
http://hopelive.hope.ac.uk/computing/
0151 291 3113
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Session Objectives
HOPE
• Describe the different file types used in Web
pages
• Demonstrate the correct use of file types in
Web pages
• Demonstrate graphics optimisation
• Describe the importance of the image file
size
www.hope.ac.uk
Faculty of Sciences and Social Sciences
RGB Colour Model
HOPE
• Known as the additive model
• Cathode Ray tubes use RGB Model
• All colours are made up of proportions of red,
green and blue.
• Pure red, green and blue = white
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Colours on the Web
HOPE
• RGB Colours
–
–
–
–
Numerical colour specification
Hexadecimal values from #00 to #FF
RGB code = #000000
Each pair of digits represent combinations of of
red, green and blue
• #0000FF = represents pure blue
• #CCCCFF = represents a lighter shade of blue
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
Display Definitions
• Display is organised into a grid
– Pixels
• Resolution is defined in terms of pixels
• Monitors display pixels per inch according to
their resolutions
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Web graphics
• Web graphics
– Different to preparing a image for print
HOPE
• Consider how the other person will receive
the image
– Download time
• File type
• Compression
– The monitor they will use
• Colours
• Resolution
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Computer images
HOPE
Two types of Computer images:
• Vector
– Mathematical description
– Lineart – blueprint
• Raster or Bitmap
– Pixels - individual dots
– Screenart – photograph
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
Vector images
• Drawing
• Graphic described in terms of lines and curves
– Vectors
• Vector information
– Position
– Colour
– Line thickness
• Resolution independent
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Raster or Bitmap images
• Coloured pixels
• Arranged on a grid
– Like a mosaic
HOPE
• A bitmap can be reduced in size
• Can be enlarged...but
– Degradation of quality
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Image file types
HOPE
Many available
• BMP
• GIF
• JPG
• PNG
• PSD
• PSP
• TIFF………………plus many more
www.hope.ac.uk
Faculty of Sciences and Social Sciences
File types used by Web Browsers
• Web Browsers - image file types
HOPE
– GIF
– JPG
– PNG
Supported by browsers because of
compression capabilities
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Images on the Web
• Images should be
HOPE
– Small
– or
– Worth seeing
• They may have a much larger file size than
the Web page itself!
• Longer download time
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Download Times
HOPE
• Vary according to the connection
• Use images selectively
• Not too many per page
• Typical guidance
– total of 20 KB per page
– no more than 6 images
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Obtaining an Image
• Use someone else’s
HOPE
– Scanners
– Web
– Disk
• Make your own
– Digital Camera
– Draw it
www.hope.ac.uk
Faculty of Sciences and Social Sciences
JPEG or JPG format
HOPE
• Raster images
• Joint Photographic Experts Group
• Most Common file type for photographs on
the Web
– .jpg or .jpeg
• Progressive encoding
– Image is brought into focus as it is loaded
– Slight increase in file size
www.hope.ac.uk
Faculty of Sciences and Social Sciences
JPEG - Colours
• 24 bits per pixel - 16 million colours
HOPE
– Smooth colour quality
– Subtle tone and colour changes
• Separates the brightness information from
colour hues
www.hope.ac.uk
Faculty of Sciences and Social Sciences
JPEG Compression
• Lossy process
– Information is lost in the compression
HOPE
• Compression Ratios
–
–
–
–
Typically 10:1 down to 100:1
Greater the compression the smaller the file size
There is no ‘right’ compression ratio
Experiment, starting with the highest compression
ratio and smallest file size
www.hope.ac.uk
Faculty of Sciences and Social Sciences
JPG Lossy Compression Method
HOPE
• Algorithm divides the image into squares
• Mathematics called Discrete Cosine
Transformation
– Divides the squares into curves
– Depending on the compression level, discards
some of the smaller (less significant) curves
• If over compressed ‘blockiness’ occurs
www.hope.ac.uk
Faculty of Sciences and Social Sciences
JPEG Optimisation
HOPE
Reduce the size of the image
• Reduce the resolution to 70-75 pixels per
inch
• Increase the compression as much as the
image can allow
www.hope.ac.uk
Faculty of Sciences and Social Sciences
GIF Format
HOPE
•
•
•
•
Raster (bit-mapped) Images
Graphics Interchange Format
Most Common file type on the Web
Lossless compression
filename.gif
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Interlacing
HOPE
• Means of storing a image file
• As the image loads more and more detail
appears
• Full resolution once downloaded completely
• Users with slow connections need not wait
for full resolution to download
www.hope.ac.uk
Faculty of Sciences and Social Sciences
GIF Colours
• 8 bits per pixel
– 256 colours
– Colour indexing
HOPE
• Mac and PCs handle 40 colours differently
• Browser Safe Palettes
– Palette of 216 colours
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Palettes
HOPE
•
•
•
•
•
•
•
•
Adaptive
WebSnap Adaptive
Web216
Exact
System
Grayscale
Black and White
Uniform
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Transparency
HOPE
• One colour of the palette is designated as
transparent
• Image file sizes are slightly larger
• Avoid a halo effect
– make sure that the background of the images is
close to the background colour used in the web
page (before making the background
transparent)
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Example
HOPE
Transparent GIFs blend very nicely into a web
page,
rather than appearing with a surrounding box.
www.hope.ac.uk
Faculty of Sciences and Social Sciences
GIF Compression
HOPE
• Average compression ratio of
4:1 (depends on number of
repeated colours)
1.6 KB
• Uses pattern-recognition
– Looks for patterns of same
coloured pixels
– Represents the pattern with a
number (colour indexing)
www.hope.ac.uk
1.8 KB
Faculty of Sciences and Social Sciences
GIF files
HOPE
• File size after compression
– Complex images
• Many of different colours
• Around 80% of the original file size
– Simple images
• Few colours
• Around 10% of the original file size
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Animated Gif Images
HOPE
• Animated gif file
–
–
–
–
Single file stored in .gif format
Contains series of images / frames
User defined delay sequence
Animation can be
• Looped (Forever)
• Finite (once, twice etc.)
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Anti-aliasing
HOPE
• Adds intermediate colours to
smooth edges (by mixing the
colours of the image’s edges and
the background’s colour)
• Increases the file size
• Curves need it more than
rectangular shapes
www.hope.ac.uk
Faculty of Sciences and Social Sciences
GIF optimisation
HOPE
• Make the image as small as possible
• Use as few as possible colours
• Avoid anti-aliasing
– But not at the cost of spoiling your image
• Reduce the number of colours in the palette
www.hope.ac.uk
Faculty of Sciences and Social Sciences
PNG
• Portable Network Graphics
filename.png
HOPE
• Used to replace GIFs
– Less common and not supported by older
browsers
• 48 bits per pixel
• Good compression without loss of quality
• Transparency and interlacing supported
www.hope.ac.uk
Faculty of Sciences and Social Sciences
PNG optimisation
HOPE
• Make the image a small as possible
• Use as few colours as possible
• Avoid anti-aliasing
– But not at the cost of spoiling your image
• Reduce the number of colours in the palette
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
Thumbnail images
• Smaller image linking to a larger image
• Need two versions of the image
– Small
– Larger
• Fireworks has a Batch Process (File
Batch Process..) to create the smaller
images (thumbnails)
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Thumbnail code
HOPE
<a href=“large_image.jpg”>
<img src=“small_image.jpg” alt=“click here to
see a larger picture” height=“” width=“”>
</a>
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Examples of an Optimised
image
HOPE
• The next set of slides demonstrate download
times for a jpg image.
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
Original
101 Seconds loading time
621 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
20% Compression
81 Seconds loading time
460 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
40% Compression
50 Seconds loading time
229 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
60% Compression
34 Seconds loading time
143 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
70% Compression
18 Seconds loading time
72 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
80% Compression
13 Seconds loading time
50 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
90% Compression
10 Seconds loading time
40 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
99% Compression
5 Seconds loading time
35 KB
1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
• Reducing the quality of the picture will
reduce the file size
• The picture you have just seen is
HOPE
– 1600 x 1200
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
50% Compression
4 Seconds loading time
30 KB
640 x 480
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
• Reduce the size of the image to the minimum
you can get away with
• Apply the maximum compression you can
get away with
– More compression, less quality
– Easy to reduce an image, not so easy to enlarge
www.hope.ac.uk
Faculty of Sciences and Social Sciences
Fireworks Demonstration
HOPE
•
•
•
•
•
How to set transparency
How to reduce the size of the image
How to change the palette
How to reduce the quality
How to create a thumbnail
www.hope.ac.uk
Faculty of Sciences and Social Sciences
HOPE
Questions?
www.hope.ac.uk
Faculty of Sciences and Social Sciences