Transcript slides

DECO1001: Optimising for the
Web
• Format
• Colour
• File Size
Format Options
• JPEG: preserves broad colour range and
brightness variations of continuous-tone images
(photographs or images with gradients)
• GIF: effective for solid colour images with areas
of repetitive colour, supports background
transparency (line art, logos, illustrations with
type)
• PNG: effective for solid colour images and
perserving sharp detail (line art, illustrations with
type)
Colour Reduction Algorithms
• Perceptual: priority to colours for which the
human eye has more sensitivity
• Selective: favours broad areas of colour and the
preservation of web colours
• Adaptive: samples colour that appear most
commonly
• Web: uses the standard 126-colour table common
to Windows and Mac palettes, uses no dither
• Custom: preserves the current colour table as a
fixed palette
• Windows or Mac: uses the default 8-bit colour
table, unused colours are discarded
Controlling Dither
• Dither: simulates the appearance of colours not in
the colour table, dots of other colours that may be
perceived as the missing colour
• Application dither: photoshop will use dither to
simulate colours in the original image that are not
in the colour table of the optimised image
• Browser dither: occurs when a web browser using
an 8-bit colour display simulates colours that are
in the optimised image that are not web-safe
Controlling file size
• Image size, dpi, 8, 16, 24-bit colour
• Controlling application dither: a lower
percentage of dither creates a smaller file
• JPEG: controlling quality of image
compression (high, medium, low)