Image Optimization:
         9 best practices
         (and some tools)

         Stoyan Stefanov, Yahoo!
         php|wor...
About the presenter
         •   Exceptional Performance
         •   http://developer.yahoo.com
         •   YSlow 2.0: a...
Best practices
         –   Choose PNG over GIF
         –   Crush PNGs
         –   Strip JPEG metadata
         –   Opti...
Hmm, images?
Q: Is this really
   important?
A: Let’s survey
   the global
   top 10 sites.
What % of page weight is images?
         1    Yahoo!      29%
         2    Google      75%
                             ...
LOS
                                   SLE
                                      SS!


         #1: Choose PNG over GIF


...
GIF vs. PNG
                              GIF         Palette PNG    Truecolor
                                           ...
PNG transparency and IE
           Truecolor PNG
       IE 7 and up   IE 6 and earlier




                 PNG8
       IE...
GIF vs. PNG
         • Verdict: IE7+ is OK; IE6 supports GIF-like
           transparency
         • PNG8 can do everythin...
GIF-to-PNG
      1     Yahoo!         9.55%
      2     Google        22.95%
                                   • Average
...
LOS
                                   SLE
                                      SS!


          #2: Crush your PNGs




P...
About the PNG chunks
          •   PNGs store information in quot;chunksquot;
          •   Most chunks can safely be dele...
Crush top 10 and check for savings
      1     Yahoo!           15.52%
      2     Google Reader    22.60%
               ...
LOS
                                    SLE
                                       SS!


          #3: Strip JPEG metadata...
JPEG metadata
          • Comments
          • EXIF
             –   camera information
             –   thumbnail!
      ...
Lossless JPEG operations
          •   jpegtran (http://jpegclub.org/)
          •   Free command-line tool
          •   ...
“baseline” JPEG - 1




Page 17
“baseline” JPEG - 2




Page 18
“baseline” JPEG - 3




Page 19
Progressive loading - 1




Page 20
Progressive loading - 2




Page 21
Progressive loading - 3




Page 22
Experiment: jpegtran and 10360 images

          • Using Yahoo Image Search API
          • Download 12000 images – query:...
Running jpegtran on 10360 images
          • Stats:
             – The average JPEG on the web today is 52.07K
           ...
Progressive vs. optimized baseline
            8000

            7000

            6000

            5000

            400...
Progressive vs. optimized baseline
           2000



           1500



           1000



            500



           ...
Progressive vs. optimized baseline
          • Progressive is usually* better for bigger** images
          • Baseline is ...
In any event…

          •
              You can strip out   ~10%   of your JPEGs
          • with no quality loss




Pag...
LOS
                                  SLE
                                        SS!


          #4: Optimize GIF animati...
Animated GIFs
          • Some pixels don’t change from one frame to the
            other
          • Make them transpare...
Review
          1. Convert GIFs to PNG
          2. Crush PNGs
                                     a.k.a….
          3. ...
#5: Make all PNGs palette PNGs *

      * but visually check the result
        (or wait for someone to complain, chances ...
Truecolor vs. palette PNGs
          • Palette PNGs (PNG8) have 256 colors
          • Truecolor PNGs could have millions
...
Truecolor vs. palette PNGs
          • Convert truecolor to palette
          • How about 50% savings?
          • Solves ...
Truecolor vs. palette PNGs
          Command-line tools:
          • pngquant (http://www.libpng.org/pub/png/apps/pngquant...
#6: Avoid AlphaImageLoader




Page 36
CSS filters
          • Back to the problem with truecolor PNG alpha
            transparency in earlier IEs
          • A...
CSS filters problems
          •   IE proprietary
          •   Blocks rendering, freezes the browser
          •   Increa...
Avoid filters
          • Best: Avoid completely, use gracefully degrading
            PNG8
          • Fallback: use unde...
LOS
                                 SLE
                                     SS!


          #7: Crush dynamic images



...
Dynamically generated images
          • GD library doesn't do what pngcrush does
          • Generated images are bigger
...
Recipe for generated images
          1st request:
          • generate        • Estimate

                              5...
Case study: Google charts API


          Original (707 colors) Crushed (707 colors) PNG8 (256 colors)




               ...
Case study: Google charts API

          Original (1408 colors) Crushed (1408 colors) PNG8 (256 colors)




              ...
#8: Make favicon smaller




Page 45
favicon.ico
          • www.example.org/favicon.ico
             – The browser will request it
             – Better not r...
favicon.ico
          • Tools: imagemagick, png2ico
          • Case study: Yahoo! Search - favicon.ico is 9% of all page
...
#9: Use CSS sprites




Page 48
CSS Sprites




          CSS:



                        …

      HTML:




Page 49
CSS Sprites
          • Size of the combined image is usually less
          • You save HTTP requests
          • Articles...
Optimizing sprites




Page 51
Optimize CSS sprites
          • Avoid gaps
          • Stay within the 256 colors of PNG8




Page 52
CSS sprites
          • Creating…
          • Maintaining…
          • … is a pain



          But there are tools:
     ...
Wrapping up




          You can save 10-30% in
            unnecessary image size!




Page 54
Thank you!




               slides…


Page 55
Slides and other URLs
          •   Slides: http://slideshare.net/stoyan
          •   Blog: http://phpied.com
          •...
Credits
          •   http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photograph
          •   h...
Upcoming SlideShare
Loading in...5
×

Image Optimization for the Web at php|works

26,958

Published on

This talk is about easy ways to reduce image sizes without compromising quality using open-source command-line tools you can easily automate. About 50% of the average web page is images, so by focusing on images, you have an excellent opportunity to improve page performance and user experience. You can save 20-30% of your bandwidth bill and improve response time with little or no code changes and your site will still look just as good.

Topics discussed:
* GIF vs PNG
* PNG8
* Truecolor PNG
* IE6 and transparency
* AlphaImageLoader and performance
* Optimizing PHP/GD-generated images, favicons, CSS sprites

Published in: Technology, Art & Photos
4 Comments
47 Likes
Statistics
Notes
  • exceptional demonstration..convinced me to have a hardlook at my company model..great
    Sharika
    http://financeadded.com http://traveltreble.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Muy completo, muy bien explicado y bastante útil.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Check out ultimate guide How to Optimize Images for Web
    http://garmahis.com/tutorials/how-to-optimize-images-for-web/
    with all tools and techniques for PNG, JPEG and GIF optimization in one place. Free Photoshop action for download is included.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • like it.. its very useful

    http://artsrajesh.blogspot.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
26,958
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
497
Comments
4
Likes
47
Embeds 0
No embeds

No notes for slide

Image Optimization for the Web at php|works

  1. 1. Image Optimization: 9 best practices (and some tools) Stoyan Stefanov, Yahoo! php|works + PyWorks, Atlanta, 2008 Page 1
  2. 2. About the presenter • Exceptional Performance • http://developer.yahoo.com • YSlow 2.0: architect, dev • Smush.it: http://smush.it • Blog: http://phpied.com Page 2
  3. 3. Best practices – Choose PNG over GIF – Crush PNGs – Strip JPEG metadata – Optimize GIF animations – Try PNG8 – Avoid AlphaImageLoader – Crush dynamic images – Make favicons small and cacheable – Use CSS sprites Page 3
  4. 4. Hmm, images? Q: Is this really important? A: Let’s survey the global top 10 sites.
  5. 5. What % of page weight is images? 1 Yahoo! 29% 2 Google 75% • Average 45.6% 3 YouTube 62% 4 Live.com 64% 5 MSN 41% • Not exactly half, but 6 MySpace 48% pretty close 7 Wikipedia 39% • Your site may be 8 Facebook 35% different, amazon.com 9 Blogger 27% for example is 71% 10 Yahoo! JP 36% images • huge potential Page 5
  6. 6. LOS SLE SS! #1: Choose PNG over GIF Page 6
  7. 7. GIF vs. PNG GIF Palette PNG Truecolor (aka PNG8, PNG aka indexed) Number of 256 256 Up to 48bit colors Transparency Boolean Alpha Alpha (on/off) (variable) * (variable) * Browser Nearly all All A-grade All A-grade support (96%+) (96%+) Animation Yes No No (future) (future) * some IE < v.7 issues Page 7
  8. 8. PNG transparency and IE Truecolor PNG IE 7 and up IE 6 and earlier PNG8 IE 7 and up IE 6 and earlier
  9. 9. GIF vs. PNG • Verdict: IE7+ is OK; IE6 supports GIF-like transparency • PNG8 can do everything a GIF can do, and more (sans cheesy Web 1.0 animations) • PNG8 works across all A-Grade browsers Q: And what about the size? A: Let’s survey the top 10 sites and convert all GIFs to PNGs to check if there are savings Page 9
  10. 10. GIF-to-PNG 1 Yahoo! 9.55% 2 Google 22.95% • Average 3 YouTube 33.82% 4 5 Live.com MSN 19.93% 13.53% 20.42% 6 7 MySpace Wikipedia 17.65% No GIFs! savings 8 Facebook 17.47% 9 Blogger 24.27% 10 Yahoo! JP 24.58% Page 10
  11. 11. LOS SLE SS! #2: Crush your PNGs Page 11
  12. 12. About the PNG chunks • PNGs store information in quot;chunksquot; • Most chunks can safely be deleted • Most image programs DO NOT optimize • Command line tools: – pngcrush http://pmt.sourceforge.net/pngcrush/ – pngrewrite http://www.pobox.com/~jason1/pngrewrite/ – OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ – PNGOut http://advsys.net/ken/utils.htm • Example: > pngcrush -rem alla -brute -reduce src.png dest.png Page 12
  13. 13. Crush top 10 and check for savings 1 Yahoo! 15.52% 2 Google Reader 22.60% • Average 3 YouTube 17.32% 4 5 Live.com MSN No PNGs No PNGs 16.05% 6 7 MySpace Wikipedia 25.44% 21.32% savings 8 Facebook 9.08% 9 Blogger 1.07% 10 Yahoo! JP No PNGs Page 13
  14. 14. LOS SLE SS! #3: Strip JPEG metadata Page 14
  15. 15. JPEG metadata • Comments • EXIF – camera information – thumbnail! – audio!?! – … • Application specific (e.g. Photoshop) Page 15
  16. 16. Lossless JPEG operations • jpegtran (http://jpegclub.org/) • Free command-line tool • Loseless operations such as crop, rotate • You probably have it installed already Example: > jpegtran -copy none -optimize src.jpg dest.jpg -progressive? Page 16
  17. 17. “baseline” JPEG - 1 Page 17
  18. 18. “baseline” JPEG - 2 Page 18
  19. 19. “baseline” JPEG - 3 Page 19
  20. 20. Progressive loading - 1 Page 20
  21. 21. Progressive loading - 2 Page 21
  22. 22. Progressive loading - 3 Page 22
  23. 23. Experiment: jpegtran and 10360 images • Using Yahoo Image Search API • Download 12000 images – query: “monkeys”, “babies”, “flowers”, “kittens”… • Cleanup 4xx responses and incorrect file types • Run jpegtran – with –optimize flag – with –progressive flag Page 23
  24. 24. Running jpegtran on 10360 images • Stats: – The average JPEG on the web today is 52.07K (median size) – Can be optimized to 47.36K or 9.04% – Converted to progressive is 46.11K or 11.45% Page 24
  25. 25. Progressive vs. optimized baseline 8000 7000 6000 5000 4000 3000 2000 1000 0 -1000 -2000 0 50000 100000 -3000 Page 25
  26. 26. Progressive vs. optimized baseline 2000 1500 1000 500 0 -500 0 10000 20000 30000 -1000 Page 26
  27. 27. Progressive vs. optimized baseline • Progressive is usually* better for bigger** images • Baseline is better for thumbs • * usually = 84% • ** bigger = 10K and over • This is just the trendline • If offline and don’t care about consistency, try both (“bruteforce”) Page 27
  28. 28. In any event… • You can strip out ~10% of your JPEGs • with no quality loss Page 28
  29. 29. LOS SLE SS! #4: Optimize GIF animations Page 29
  30. 30. Animated GIFs • Some pixels don’t change from one frame to the other • Make them transparent • gifsicle – http://www.lcdf.org/gifsicle > gifsicle o2 source.gif > dest.gif Page 30
  31. 31. Review 1. Convert GIFs to PNG 2. Crush PNGs a.k.a…. 3. Strip JPEG metadata Try progressive JPEG • Optimize animated GIFs Page 31
  32. 32. #5: Make all PNGs palette PNGs * * but visually check the result (or wait for someone to complain, chances are you'll be waiting in vain ;) Page 32
  33. 33. Truecolor vs. palette PNGs • Palette PNGs (PNG8) have 256 colors • Truecolor PNGs could have millions • In practice, truecolor PNGs often have less than 1000 colors • Otherwise it would mean they are photos and should be JPEGs • Human eye is not that sensitive Page 33
  34. 34. Truecolor vs. palette PNGs • Convert truecolor to palette • How about 50% savings? • Solves IE<7’s little alpha transparency problem • Warning 1: LOSSY – But no one will ever know • Warning 2: automation is hard when there’s alpha Page 34
  35. 35. Truecolor vs. palette PNGs Command-line tools: • pngquant (http://www.libpng.org/pub/png/apps/pngquant.html) • pngnq (http://pngnq.sourceforge.net/) Example: > pngquant 256 src.png Page 35
  36. 36. #6: Avoid AlphaImageLoader Page 36
  37. 37. CSS filters • Back to the problem with truecolor PNG alpha transparency in earlier IEs • AlphaImageLoader CSS filter to fix the issue #mydiv { background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='crop'); } Page 37
  38. 38. CSS filters problems • IE proprietary • Blocks rendering, freezes the browser • Increased memory consumption • Per element, not per image! • CSS code for sprites becomes messy Page 38
  39. 39. Avoid filters • Best: Avoid completely, use gracefully degrading PNG8 • Fallback: use underscore hack _filter not to penalize IE7+ users • Yahoo! Search saved 50-100ms for users of IE5&6 Page 39
  40. 40. LOS SLE SS! #7: Crush dynamic images Page 40
  41. 41. Dynamically generated images • GD library doesn't do what pngcrush does • Generated images are bigger • From big to small: generated GIF > generated PNG > crushed PNG • Server resources on every request Page 41
  42. 42. Recipe for generated images 1st request: • generate • Estimate 5-30% • write to disk • pngcrush • serve 2nd request: • serve cached savings Page 42
  43. 43. Case study: Google charts API Original (707 colors) Crushed (707 colors) PNG8 (256 colors) 12% saving 38% saving Page 43
  44. 44. Case study: Google charts API Original (1408 colors) Crushed (1408 colors) PNG8 (256 colors) 25% saving 55% saving (1000+ colors are lost but who can tell?) Page 44
  45. 45. #8: Make favicon smaller Page 45
  46. 46. favicon.ico • www.example.org/favicon.ico – The browser will request it – Better not respond with a 404 – Cookies are sent – Cannot be on CDN – Interferes with the download sequence • Make it small (<= 1K) • Set Expires header (but not “forever”) <link rel=quot;shortcut iconquot;…> ??? Page 46
  47. 47. favicon.ico • Tools: imagemagick, png2ico • Case study: Yahoo! Search - favicon.ico is 9% of all page views Page 47
  48. 48. #9: Use CSS sprites Page 48
  49. 49. CSS Sprites CSS: … HTML: Page 49
  50. 50. CSS Sprites • Size of the combined image is usually less • You save HTTP requests • Articles: http://alistapart.com/articles/sprites http ://css-tricks.com/css-sprites-what-they-are-why-theyre Page 50
  51. 51. Optimizing sprites Page 51
  52. 52. Optimize CSS sprites • Avoid gaps • Stay within the 256 colors of PNG8 Page 52
  53. 53. CSS sprites • Creating… • Maintaining… • … is a pain But there are tools: - http://csssprites.com - http://spritegen.website-performance.org Page 53
  54. 54. Wrapping up You can save 10-30% in unnecessary image size! Page 54
  55. 55. Thank you! slides… Page 55
  56. 56. Slides and other URLs • Slides: http://slideshare.net/stoyan • Blog: http://phpied.com • Img opt series: http://www.yuiblog.com/ • Tool: http://smush.it • Yahoo! http://developer.yahoo.com/performance Page 56
  57. 57. Credits • http://svs.gsfc.nasa.gov/vis/a000000/a002600/a002680/ Apolo 17 Full-Earth Photograph • http://www.w3.org/Graphics/PNG/inline-alpha.html W3C PNG Alpha Test • http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ PNG8 - The Clear Winner Page 57
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×