Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 dia...
Considerations

    What options / tools do we have?
• Image size (physical dimensions)
• File type (GIF, JPEG or PNG - wh...
Image Size
• Web images should be measured in pixels (px)
• Adjust Photoshop: Preferences > Units & Rulers...
• Resolution...
File Types

    The big three:
• GIF
• JPEG
• PNG

    Each type has its uses. We need to know which is best
    depending...
GIF       (.gif)

• Best for graphic artwork
• Images made up of blocks of colour
• Text, line art, patterns etc (not grad...
JPEG           (.jpg)

• Best for images with continuous tones
• Images with subtle changes in colour
• Photographic image...
PNG            (.png)

• Good for images requiring complete transparency
• Not well supported, browser compatibility iffy
...
Optimization & Compression
• Reduce the file size,
    reduce the download time

• Use ‘Save for Web’ in
    Photoshop

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




A...
Save for Web: Typical Presets

    JPEG images
• Try not to go below 60% quality - artefacts obvious,
    reduce physical ...
Final Notes
• Remember; compression is a compromise between file size
    and download time. Not everyone has fast interne...
Upcoming SlideShare
Loading in …5
×

Preparing images for the Web

21,349 views

Published on

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

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

×