Speed Matters: Mobile-Friendly Image Options

Slide 1

Slide 1 text

Speed Matters: MobileUXCamp Seattle May 19, 2012 JEN MATSON @nstop Mobile-Friendly Image Options

Slide 2

Slide 2 text

PERFORMANCE IS A USER EXPERIENCE ISSUE

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Tuning for Performance AND Design

Slide 13

Slide 13 text

• Quality • Reusability • Maintainability • Creation Ease • File Size • Connection Impact Image Optimization Heuristics

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Plain Ol’ Images APPROACH #1

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Plain Ol’ Images Quality Reusability Maintainability Creation Ease File Size Connection Impact

Slide 20

Slide 20 text

CSS Sprites APPROACH #2

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

CSS Sprites Quality Reusability Maintainability Creation Ease File Size Connection Impact

Slide 28

Slide 28 text

HTML Character Entity References APPROACH #3

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

this icon ← (that’s it) Put this in your HTML:

Slide 31

Slide 31 text

HTML Character Entity References Quality Reusability Maintainability Creation Ease File Size Connection Impact ←

Slide 32

Slide 32 text

Fonts APPROACH #4

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Fonts Quality Reusability Maintainability Creation Ease File Size Connection Impact

Slide 36

Slide 36 text

CSS Image Replacement APPROACH #5

Slide 37

Slide 37 text

this icon Plus CSS...

Slide 38

Slide 38 text

this icon

Slide 39

Slide 39 text

this icon

Slide 40

Slide 40 text

CSS Image Replacement Quality Reusability Maintainability Creation Ease File Size Connection Impact

Slide 41

Slide 41 text

SVG Image Replacement APPROACH #6

Slide 42

Slide 42 text

SVG = Scalable Vector Graphics

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Actual Size

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

this icon

Slide 49

Slide 49 text

(scaled up)

Slide 50

Slide 50 text

SVG Image Replacement Quality Reusability Maintainability Creation Ease File Size Connection Impact

Slide 51

Slide 51 text

Data URIs Bonus

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Source: http://css-tricks.com/data-uris/

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Data URIs Quality Reusability Maintainability Creation Ease File Size Connection Impact N/A

Slide 58

Slide 58 text

Also Important...

Slide 59

Slide 59 text

Reduce File Sizes

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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