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.

Transcript

1. Speed Matters: MobileUXCamp Seattle May 19, 2012 JEN MATSON @nstop Mobile-Friendly Image Options
2. PERFORMANCE IS A USER EXPERIENCE ISSUE
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
15. Plain Ol’ Images APPROACH #1
19. Plain Ol’ Images Quality Reusability Maintainability Creation Ease File Size Connection Impact
20. CSS Sprites APPROACH #2
27. CSS Sprites Quality Reusability Maintainability Creation Ease File Size Connection Impact
28. HTML Character Entity References APPROACH #3
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
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
44. Actual Size
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/
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
65. DESIGN USER EXPERIENCE BUSINESS ENGINEERING ISSUE PERFORMANCE IS A
66. THANK YOU JEN MATSON | jenmatson.com @nstop