This document discusses optimizing images for use on the web. It covers choosing the appropriate file type based on the image content, reducing file size through compression and trimming unnecessary pixels, and using tools like Photoshop's "Save for Web" feature to balance image quality and download speed. The key considerations are file type (GIF, JPEG, PNG), size, compression level, and ensuring accessibility.

1. Preparing Images
for the Web
Advanced CSS Stephen Ireland

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

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

11. 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

12. 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