Image Optimization for the Web at php|works

  • 25,176 views
Uploaded 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 …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • exceptional demonstration..convinced me to have a hardlook at my company model..great
    Sharika
    http://financeadded.com http://traveltreble.com
    Are you sure you want to
    Your message goes here
  • Muy completo, muy bien explicado y bastante útil.
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
  • like it.. its very useful

    http://artsrajesh.blogspot.com
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
25,176
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
476
Comments
4
Likes
45

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Image Optimization: 9 best practices (and some tools) Stoyan Stefanov, Yahoo! php|works + PyWorks, Atlanta, 2008 Page 1
  • 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. 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. Hmm, images? Q: Is this really important? A: Let’s survey the global top 10 sites.
  • 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. LOS SLE SS! #1: Choose PNG over GIF Page 6
  • 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. PNG transparency and IE Truecolor PNG IE 7 and up IE 6 and earlier PNG8 IE 7 and up IE 6 and earlier
  • 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. 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. LOS SLE SS! #2: Crush your PNGs Page 11
  • 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. 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. LOS SLE SS! #3: Strip JPEG metadata Page 14
  • 15. JPEG metadata • Comments • EXIF – camera information – thumbnail! – audio!?! – … • Application specific (e.g. Photoshop) Page 15
  • 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. “baseline” JPEG - 1 Page 17
  • 18. “baseline” JPEG - 2 Page 18
  • 19. “baseline” JPEG - 3 Page 19
  • 20. Progressive loading - 1 Page 20
  • 21. Progressive loading - 2 Page 21
  • 22. Progressive loading - 3 Page 22
  • 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. 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. Progressive vs. optimized baseline 8000 7000 6000 5000 4000 3000 2000 1000 0 -1000 -2000 0 50000 100000 -3000 Page 25
  • 26. Progressive vs. optimized baseline 2000 1500 1000 500 0 -500 0 10000 20000 30000 -1000 Page 26
  • 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. In any event… • You can strip out ~10% of your JPEGs • with no quality loss Page 28
  • 29. LOS SLE SS! #4: Optimize GIF animations Page 29
  • 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. 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. #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. 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. 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. 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. #6: Avoid AlphaImageLoader Page 36
  • 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. 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. 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. LOS SLE SS! #7: Crush dynamic images Page 40
  • 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. Recipe for generated images 1st request: • generate • Estimate 5-30% • write to disk • pngcrush • serve 2nd request: • serve cached savings Page 42
  • 43. Case study: Google charts API Original (707 colors) Crushed (707 colors) PNG8 (256 colors) 12% saving 38% saving Page 43
  • 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. #8: Make favicon smaller Page 45
  • 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. favicon.ico • Tools: imagemagick, png2ico • Case study: Yahoo! Search - favicon.ico is 9% of all page views Page 47
  • 48. #9: Use CSS sprites Page 48
  • 49. CSS Sprites CSS: … HTML: Page 49
  • 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. Optimizing sprites Page 51
  • 52. Optimize CSS sprites • Avoid gaps • Stay within the 256 colors of PNG8 Page 52
  • 53. CSS sprites • Creating… • Maintaining… • … is a pain But there are tools: - http://csssprites.com - http://spritegen.website-performance.org Page 53
  • 54. Wrapping up You can save 10-30% in unnecessary image size! Page 54
  • 55. Thank you! slides… Page 55
  • 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. 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