Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Speed Matters: Mobile-Friendly Image Options

Speed Matters: Mobile-Friendly Image Options

Speed has always mattered, and it matters even more in mobile, where connection speed and reliability can vary wildly. A common bottleneck? Images.

How to serve up images lies squarely at the intersection of design and code, as we work to tune our sites for performance while maintaining maximum visual UI polish, especially for newer, pixel-dense displays. This presentation gives an overview of common (and less common) techniques, along with heuristics we can use to evaluate the suitability of each for differing applications.

3b1009119de6c617ad774102b38c2b53?s=128

Jen Matson

May 22, 2012
Tweet

Transcript

  1. Speed Matters: MobileUXCamp Seattle May 19, 2012 JEN MATSON @nstop

    Mobile-Friendly Image Options
  2. PERFORMANCE IS A USER EXPERIENCE ISSUE

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. - Tenni Theurer, from “Best Practices for Speeding Up Your

    Web Site,” Yahoo! User Interface Blog Source: http://developer.yahoo.com/performance/rules.html “Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.”
  12. Tuning for Performance AND Design

  13. • Quality • Reusability • Maintainability • Creation Ease •

    File Size • Connection Impact Image Optimization Heuristics
  14. None
  15. Plain Ol’ Images APPROACH #1

  16. None
  17. None
  18. None
  19. Plain Ol’ Images Quality Reusability Maintainability Creation Ease File Size

    Connection Impact
  20. CSS Sprites APPROACH #2

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. CSS Sprites Quality Reusability Maintainability Creation Ease File Size Connection

    Impact
  28. HTML Character Entity References APPROACH #3

  29. None
  30. this icon ← (that’s it) Put this in your HTML:

  31. HTML Character Entity References Quality Reusability Maintainability Creation Ease File

    Size Connection Impact ←
  32. Fonts APPROACH #4

  33. None
  34. Reduce HTTP Requests Font Image Replacement http://entypo.com

  35. Fonts Quality Reusability Maintainability Creation Ease File Size Connection Impact

  36. CSS Image Replacement APPROACH #5

  37. this icon Plus CSS...

  38. this icon

  39. this icon

  40. CSS Image Replacement Quality Reusability Maintainability Creation Ease File Size

    Connection Impact
  41. SVG Image Replacement APPROACH #6

  42. SVG = Scalable Vector Graphics

  43. None
  44. Actual Size

  45. None
  46. None
  47. None
  48. this icon

  49. (scaled up)

  50. SVG Image Replacement Quality Reusability Maintainability Creation Ease File Size

    Connection Impact
  51. Data URIs Bonus

  52. “...a way to include data in-line in web pages as

    if they were external resources [allowing] normally separate elements such as images and style sheets to be fetched in a single HTTP request rather than multiple HTTP requests, which can be more efficient.” What are Data URIs? Source: http://en.wikipedia.org/wiki/Data_URI_scheme
  53. Source: http://css-tricks.com/data-uris/

  54. None
  55. None
  56. None
  57. Data URIs Quality Reusability Maintainability Creation Ease File Size Connection

    Impact N/A
  58. Also Important...

  59. Reduce File Sizes

  60. Use gzip Compression Source: https://developers.google.com/speed/articles/gzip

  61. Load Resources Conditionally Robot-to-human translation: Check to see if the

    browser cookie is set to “large,” and if so, serve up a large version of the image. Source: https://github.com/filamentgroup/Responsive-Images/tree/cookie-driven
  62. display: none ≠ “Do not load this content” Avoid display:none

  63. None
  64. None
  65. DESIGN USER EXPERIENCE BUSINESS ENGINEERING ISSUE PERFORMANCE IS A

  66. THANK YOU JEN MATSON | jenmatson.com @nstop