Preparing Images
for the Web
Advanced CSS Stephen Ireland

Image Optimization
Why do I need to know about this?
Because it can affect;
• Download speeds (don’t forget dial-up or mobile users)
• Quality (you want your images to be high quality)
• Colour (different screens, different browsers)
• Accessibility (colour blindness considerations)
Advanced CSS Stephen Ireland

Considerations
What options / tools do we have?
• Image size (physical dimensions)
• File type (GIF, JPEG or PNG - which is best?)
• Compression (size versus quality issues)
• Save for Web (option in Adobe Photoshop 6.5+)
Advanced CSS Stephen Ireland

Image Size
• Web images should be measured in pixels (px)
• Adjust Photoshop: Preferences > Units & Rulers...
• Resolution should be 72dpi (for screen use)
• Crop images to minimum physical size;
Advanced CSS Stephen Ireland

File Types
The big three:
• GIF
• JPEG
• PNG
Each type has its uses. We need to know which is best
depending on the image and its use.
Advanced CSS Stephen Ireland

GIF (.gif)
• Best for graphic artwork
• Images made up of blocks of colour
• Text, line art, patterns etc (not gradients or photos)
• Can use lossless compression
• Can have transparent background, although not perfect
Advanced CSS Stephen Ireland

JPEG (.jpg)
• Best for images with continuous tones
• Images with subtle changes in colour
• Photographic images and gradients are ideal
• Use of ‘lossy’ compression to reduce file size
• Watch out for ‘artefacts’ when compression is high
Advanced CSS Stephen Ireland

PNG (.png)
• Good for images requiring complete transparency
• Not well supported, browser compatibility iffy
• IE can be ‘hacked’ to support transparency in PNGs
• You may find a use for PNG files but its probably worth
finding a workaround to avoid the browser inconsistencies
Advanced CSS Stephen Ireland

Optimization & Compression
• Reduce the file size,
reduce the download time
• Use ‘Save for Web’ in
Photoshop
• Learn the keyboard
shortcut!
• Each option is a
compromise between
reproduction quality and
download time
Advanced CSS Stephen Ireland

Photoshop: Save for Web
• Choose from the presets
• Compare quality against file size
• Override preset if necessary
Advanced CSS Stephen Ireland

Save for Web: Typical Presets
JPEG images
• Try not to go below 60% quality - artefacts obvious,
reduce physical size of image instead
• Don’t save image with ICC profile - this will cause colour
match problems in Safari on the Mac
GIF images
• Try 64 or 128bit Dithered - This should work fine
• Using transparency? - test on background and edit pixel
edges manually if necessary!
Advanced CSS Stephen Ireland

Final Notes
• Remember; compression is a compromise between file size
and download time. Not everyone has fast internet access.
• Cut out wasted pixels from your images, this will reduce
your file size, and therefore download time.
• Consider the colours used in your images carefully, check
they won’t cause problems for those with colour blindness.
• http://www.websiteoptimization.com/ offers free speed
tests. Part of these tests will tell you how long your images
will take to download.
Advanced CSS Stephen Ireland