Preparing images for the Web


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Preparing images for the Web

  1. 1. Preparing Images for the Web Advanced CSS Stephen Ireland
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10. Photoshop: Save for Web • Choose from the presets • Compare quality against file size • Override preset if necessary Advanced CSS Stephen Ireland
  11. 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. 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. • offers free speed tests. Part of these tests will tell you how long your images will take to download. Advanced CSS Stephen Ireland