www.hope.ac.uk faculty of sciences and social sciences hope website development graphics stewart...
TRANSCRIPT
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
Website DevelopmentGraphics
Stewart Blakeway
FML 213
[email protected]://hopelive.hope.ac.uk/computing/
0151 291 3113
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
Session Objectives
• 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
HO
PE
RGB Colour Model
• 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
HO
PE
Colours on the Web
• 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
HO
PE
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
HO
PE
Web graphics
• Web graphics– Different to preparing a image for print
• 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
HO
PE
Computer images
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
HO
PE
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
HO
PE
Raster or Bitmap images
• Coloured pixels• Arranged on a grid– Like a mosaic
• A bitmap can be reduced in size• Can be enlarged...but– Degradation of quality
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
Image file types
Many available• BMP• GIF• JPG• PNG• PSD• PSP • TIFF………………plus many more
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
File types used by Web Browsers
• Web Browsers - image file types– GIF– JPG– PNG
Supported by browsers because of compression capabilities
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
Images on the Web
• Images should be – 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
HO
PE
Download Times
• 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
HO
PE
Obtaining an Image
• Use someone else’s– Scanners– Web– Disk
• Make your own– Digital Camera– Draw it
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
JPEG or JPG format
• 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
HO
PE
JPEG - Colours
• 24 bits per pixel - 16 million colours– 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
HO
PE
JPEG Compression
• Lossy process – Information is lost in the compression
• 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
HO
PE
JPG Lossy Compression Method
• 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
HO
PE
JPEG Optimisation
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
HO
PE
GIF Format
• 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
HO
PE
Interlacing
• 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
HO
PE
GIF Colours
• 8 bits per pixel– 256 colours– Colour indexing
• Mac and PCs handle 40 colours differently• Browser Safe Palettes – Palette of 216 colours
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
Palettes
• Adaptive• WebSnap Adaptive• Web216• Exact• System• Grayscale• Black and White• Uniform
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
Transparency
• 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
HO
PE
Example
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
HO
PE
GIF Compression• Average compression ratio of
4:1 (depends on number of repeated colours)
• Uses pattern-recognition– Looks for patterns of same
coloured pixels – Represents the pattern with a
number (colour indexing)
1.6 KB
1.8 KB
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
GIF files
• 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
HO
PE
Animated Gif Images
• 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
HO
PE
Anti-aliasing
• 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
HO
PE
GIF optimisation
• 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
HO
PE
PNG
• Portable Network Graphicsfilename.png
• 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
HO
PE
PNG optimisation
• 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
HO
PE
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
HO
PE
Thumbnail code
<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
HO
PE
Examples of an Optimised image
• The next set of slides demonstrate download times for a jpg image.
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
Original101 Seconds loading time621 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
20% Compression81 Seconds loading time460 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
40% Compression50 Seconds loading time229 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
60% Compression34 Seconds loading time143 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
70% Compression18 Seconds loading time72 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
80% Compression13 Seconds loading time50 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
90% Compression10 Seconds loading time40 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
99% Compression5 Seconds loading time35 KB1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
• Reducing the quality of the picture will reduce the file size
• The picture you have just seen is– 1600 x 1200
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
50% Compression4 Seconds loading time30 KB640 x 480
www.hope.ac.uk Faculty of Sciences and Social
Sciences
HO
PE
• 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
HO
PE
Fireworks Demonstration
• 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