Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Let’s Talk About
Images!
@jennlukas
#talkimages
http://i.imgur.com/jR6CrMx.jpg
AS DEVICE
NUMBERS GROW,
OUR SITE SIZES
NEED TO SHRINK
http://bradfrost.com/wp-content/uploads/2013/11/devices-copy.jpg
100 MILLISECONDS
is how long you have for the user to feel like the task was
instantaneous
http://www.nngroup.com/articles...
To keep an uninterrupted flow,
we want to aim for a first
render time of
1 SECOND
40%
of people abandon a website
that takes more than 3 seconds
to load
blog.kissmetrics.com/loading-time/
AKAMAI has reported that 75%
of online shoppers who
experience an issue such as a site
freezing, crashing, taking too long...
WALMART.COM found that for every
second of load time improvement,
conversions increased by up to 2%
radware.com/fall-sotu2...
Over the last 2 years, the average web
page size has grown from:
828KB (2012)
1687KB (2013)
1931KB (2014)
Images on the web can
account for up to 75% of
our total page loading time!
Image use is now averaging
a whopping 1243KB o...
IMAGE STRATEGY needs to
be a top priority for enhancing
our websites
ECOMMERCE
http://www.poorgirleatswell.com/site/wp-content/uploads/2014/10/cat-shop.jpg
The top 100 Ecommerce
home pages take
6.5 SECONDS
to render and
11.4 SECONDS
to fully load
llbean.com 0.67MB
forever21.com 0.88MB
ae.com 1.21MB
zappos.com 1.36MB
abercrombie.com 2.37MB
modcloth 14.18MB
bananarepublic.com
3.505MB
Identify areas to use
browser text and CSS
effects for enhancing your
site and avoid extra server
calls and page weight
Content strategy
must be a part of your
image strategy
ralphlauren.com
3.21MB
PERFORMANCE
BUDGET
http://www.poorgirleatswell.com/site/wp-content/uploads/2014/10/cat-shop.jpg
clearleft.com/thinks/responsivedesignonabudget/
timkadlec.com/2013/01/setting-a-performance-budget/
The Speed Index metric measures how
page loading is perceived by users than
load time is.
The industry goal is a speed ind...
We want our pages to load in 3
seconds or under on a cable
connection.
40% of people abandon a website that
takes more tha...
20% Rule
The 20% rule from Steven Seow states that
people perceive tasks slower or faster when
there is a difference of at...
CHOOSE IMAGES
WISELY
http://www.poorgirleatswell.com/site/wp-content/uploads/2014/10/cat-shop.jpg
1920x1080
281KB
500x281
10KB96% SAVINGS
SRCSET
&
SIZES
http://i.imgur.com/QTpl1.jpg
<img
src="images/cat-1920.jpg"
alt="Cattoween Mascot"
/>
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
http://caniuse.com/#feat=srcset
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
<img
src="images/cat-1920.jpg"
srcset="images/cat-1920.jpg 1920w,
images/cat-1400.jpg 1400w,
images/cat-1000.jpg 1000w,
im...
RETINA
IMAGES
http://tercerahkan.com/wp-content/uploads/2014/05/70191-b460ba-500-333.jpg
<img
src="images/cat1x.jpg"
srcset="images/cat2x.jpg 2x,
images/cat2.6x.jpg 2.6x,
images/cat3x.jpg 3x"
alt="Cattoween Masc...
THE
PICTURE
ELEMENT
http://i.imgur.com/QTpl1.jpg
NASTYGAL.COM
landsend.com
Use the picture element
to enhance art direction
<picture>
<source media="(min-width: 767px)"
srcset="/images/feature-large.jpg">
<img src="/images/feature-small.jpg"
alt=...
<picture>
<source media="(min-width: 767px)"
srcset="/images/feature-large.jpg">
<img src="/images/feature-small.jpg"
alt=...
<picture>
<source media="(min-width: 767px)"
srcset="/images/feature-large.jpg">
<img src="/images/feature-small.jpg"
alt=...
codepen.io/Jenn/pen/ef916555aa228574247599d7948b578c
caniuse.com/#feat=picture
<picture>
<source media="(min-width: 60em)"
srcset="/images/feature-xl.jpg">
<source media="(min-width: 40em)"
srcset="/im...
<picture>
<source media="(min-width: 60em)"
srcset="/images/feature.jpg,
/images/feature@1.5x.jpg 1.5x,
/images/feature@2x...
TYPE
ATTRIBUTE
http://www.cat-breed-info.com/images/grouphomepage.jpg
sarasoueidan.com/blog/svg-picture
caniuse.com/#search=svg
<picture>
<source type=“image/webp”
srcset=“feature.webp”>
<img src="/images/feature.jpg"
alt="Buttons and beyond: save 30...
CHOOSE THE
BEST
SOLUTION FOR
YOU
http://www.cat-breed-info.com/images/grouphomepage.jpg
BURTON.COM
Enhance images with
SVG
NEIMANMARCUS.COM
GAP.COM
SIERRATRADINGPOST.COM
Be clever about
IMAGE QUALITY
ABERCROMBIE.COM
Explore
LOGO enhancements
DANNIJO.COM
CUTEANDBROKE.COM
URBANOUTFITTERS.COM
THANKS!!
@jennlukas
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Let's Talk About Responsive Images and Performance
Upcoming SlideShare
Loading in …5
×

of

Let's Talk About Responsive Images and Performance Slide 1 Let's Talk About Responsive Images and Performance Slide 2 Let's Talk About Responsive Images and Performance Slide 3 Let's Talk About Responsive Images and Performance Slide 4 Let's Talk About Responsive Images and Performance Slide 5 Let's Talk About Responsive Images and Performance Slide 6 Let's Talk About Responsive Images and Performance Slide 7 Let's Talk About Responsive Images and Performance Slide 8 Let's Talk About Responsive Images and Performance Slide 9 Let's Talk About Responsive Images and Performance Slide 10 Let's Talk About Responsive Images and Performance Slide 11 Let's Talk About Responsive Images and Performance Slide 12 Let's Talk About Responsive Images and Performance Slide 13 Let's Talk About Responsive Images and Performance Slide 14 Let's Talk About Responsive Images and Performance Slide 15 Let's Talk About Responsive Images and Performance Slide 16 Let's Talk About Responsive Images and Performance Slide 17 Let's Talk About Responsive Images and Performance Slide 18 Let's Talk About Responsive Images and Performance Slide 19 Let's Talk About Responsive Images and Performance Slide 20 Let's Talk About Responsive Images and Performance Slide 21 Let's Talk About Responsive Images and Performance Slide 22 Let's Talk About Responsive Images and Performance Slide 23 Let's Talk About Responsive Images and Performance Slide 24 Let's Talk About Responsive Images and Performance Slide 25 Let's Talk About Responsive Images and Performance Slide 26 Let's Talk About Responsive Images and Performance Slide 27 Let's Talk About Responsive Images and Performance Slide 28 Let's Talk About Responsive Images and Performance Slide 29 Let's Talk About Responsive Images and Performance Slide 30 Let's Talk About Responsive Images and Performance Slide 31 Let's Talk About Responsive Images and Performance Slide 32 Let's Talk About Responsive Images and Performance Slide 33 Let's Talk About Responsive Images and Performance Slide 34 Let's Talk About Responsive Images and Performance Slide 35 Let's Talk About Responsive Images and Performance Slide 36 Let's Talk About Responsive Images and Performance Slide 37 Let's Talk About Responsive Images and Performance Slide 38 Let's Talk About Responsive Images and Performance Slide 39 Let's Talk About Responsive Images and Performance Slide 40 Let's Talk About Responsive Images and Performance Slide 41 Let's Talk About Responsive Images and Performance Slide 42 Let's Talk About Responsive Images and Performance Slide 43 Let's Talk About Responsive Images and Performance Slide 44 Let's Talk About Responsive Images and Performance Slide 45 Let's Talk About Responsive Images and Performance Slide 46 Let's Talk About Responsive Images and Performance Slide 47 Let's Talk About Responsive Images and Performance Slide 48 Let's Talk About Responsive Images and Performance Slide 49 Let's Talk About Responsive Images and Performance Slide 50 Let's Talk About Responsive Images and Performance Slide 51 Let's Talk About Responsive Images and Performance Slide 52 Let's Talk About Responsive Images and Performance Slide 53 Let's Talk About Responsive Images and Performance Slide 54 Let's Talk About Responsive Images and Performance Slide 55 Let's Talk About Responsive Images and Performance Slide 56 Let's Talk About Responsive Images and Performance Slide 57 Let's Talk About Responsive Images and Performance Slide 58 Let's Talk About Responsive Images and Performance Slide 59 Let's Talk About Responsive Images and Performance Slide 60 Let's Talk About Responsive Images and Performance Slide 61 Let's Talk About Responsive Images and Performance Slide 62 Let's Talk About Responsive Images and Performance Slide 63 Let's Talk About Responsive Images and Performance Slide 64 Let's Talk About Responsive Images and Performance Slide 65 Let's Talk About Responsive Images and Performance Slide 66 Let's Talk About Responsive Images and Performance Slide 67 Let's Talk About Responsive Images and Performance Slide 68 Let's Talk About Responsive Images and Performance Slide 69 Let's Talk About Responsive Images and Performance Slide 70 Let's Talk About Responsive Images and Performance Slide 71 Let's Talk About Responsive Images and Performance Slide 72 Let's Talk About Responsive Images and Performance Slide 73 Let's Talk About Responsive Images and Performance Slide 74 Let's Talk About Responsive Images and Performance Slide 75 Let's Talk About Responsive Images and Performance Slide 76 Let's Talk About Responsive Images and Performance Slide 77 Let's Talk About Responsive Images and Performance Slide 78 Let's Talk About Responsive Images and Performance Slide 79 Let's Talk About Responsive Images and Performance Slide 80 Let's Talk About Responsive Images and Performance Slide 81 Let's Talk About Responsive Images and Performance Slide 82 Let's Talk About Responsive Images and Performance Slide 83 Let's Talk About Responsive Images and Performance Slide 84 Let's Talk About Responsive Images and Performance Slide 85 Let's Talk About Responsive Images and Performance Slide 86 Let's Talk About Responsive Images and Performance Slide 87 Let's Talk About Responsive Images and Performance Slide 88
Upcoming SlideShare
Comunicato attività giovanile - Minivolley
Next

103 Likes

Share

Let's Talk About Responsive Images and Performance

In this world of mobile growth, the time it takes for content to reach our visitors is a number we want to be as small as possible. Images have a huge impact on our page weight and load times, so let's examine how to choose and serve our images wisely.

Related Books

Free with a 30 day trial from Scribd

See all

Let's Talk About Responsive Images and Performance

  1. 1. Let’s Talk About Images! @jennlukas #talkimages http://i.imgur.com/jR6CrMx.jpg
  2. 2. AS DEVICE NUMBERS GROW, OUR SITE SIZES NEED TO SHRINK http://bradfrost.com/wp-content/uploads/2013/11/devices-copy.jpg
  3. 3. 100 MILLISECONDS is how long you have for the user to feel like the task was instantaneous http://www.nngroup.com/articles/response-times-3-important-limits/ 1 SECOND is how long you have for the user’s state of flow to remain uninterrupted (though the delay will still be noticeable) 10 SECONDS is how long you have before the user loses interest entirely and will want to multitask while the task is completing
  4. 4. To keep an uninterrupted flow, we want to aim for a first render time of 1 SECOND
  5. 5. 40% of people abandon a website that takes more than 3 seconds to load blog.kissmetrics.com/loading-time/
  6. 6. AKAMAI has reported that 75% of online shoppers who experience an issue such as a site freezing, crashing, taking too long to load, or having a convoluted checkout process will not buy from that site http://calendar.perfplanet.com/2014/changing-culture-at-your-organization/
  7. 7. WALMART.COM found that for every second of load time improvement, conversions increased by up to 2% radware.com/fall-sotu2014/ STAPLES.COM found that for every one second of improvement conversions increased by 10%
  8. 8. Over the last 2 years, the average web page size has grown from: 828KB (2012) 1687KB (2013) 1931KB (2014)
  9. 9. Images on the web can account for up to 75% of our total page loading time! Image use is now averaging a whopping 1243KB on websites. 
  10. 10. IMAGE STRATEGY needs to be a top priority for enhancing our websites
  11. 11. ECOMMERCE http://www.poorgirleatswell.com/site/wp-content/uploads/2014/10/cat-shop.jpg
  12. 12. The top 100 Ecommerce home pages take 6.5 SECONDS to render and 11.4 SECONDS to fully load
  13. 13. llbean.com 0.67MB forever21.com 0.88MB ae.com 1.21MB zappos.com 1.36MB abercrombie.com 2.37MB modcloth 14.18MB
  14. 14. bananarepublic.com 3.505MB
  15. 15. Identify areas to use browser text and CSS effects for enhancing your site and avoid extra server calls and page weight
  16. 16. Content strategy must be a part of your image strategy
  17. 17. ralphlauren.com 3.21MB
  18. 18. PERFORMANCE BUDGET http://www.poorgirleatswell.com/site/wp-content/uploads/2014/10/cat-shop.jpg
  19. 19. clearleft.com/thinks/responsivedesignonabudget/ timkadlec.com/2013/01/setting-a-performance-budget/
  20. 20. The Speed Index metric measures how page loading is perceived by users than load time is. The industry goal is a speed index of 1000.
  21. 21. We want our pages to load in 3 seconds or under on a cable connection. 40% of people abandon a website that takes more than 3 seconds to load.
  22. 22. 20% Rule The 20% rule from Steven Seow states that people perceive tasks slower or faster when there is a difference of at least 20% from the current speed. We need to make our site 20% faster than our own site and/or top competitors.
  23. 23. CHOOSE IMAGES WISELY http://www.poorgirleatswell.com/site/wp-content/uploads/2014/10/cat-shop.jpg
  24. 24. 1920x1080 281KB 500x281 10KB96% SAVINGS
  25. 25. SRCSET & SIZES http://i.imgur.com/QTpl1.jpg
  26. 26. <img src="images/cat-1920.jpg" alt="Cattoween Mascot" />
  27. 27. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="100vw" alt="Cattoween Mascot" />
  28. 28. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="100vw" alt="Cattoween Mascot" />
  29. 29. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="100vw" alt="Cattoween Mascot" />
  30. 30. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="100vw" alt="Cattoween Mascot" />
  31. 31. http://caniuse.com/#feat=srcset
  32. 32. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="100vw" alt="Cattoween Mascot" />
  33. 33. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="100vw" alt="Cattoween Mascot" />
  34. 34. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="(min-width: 700px) 50vw, 100vw" alt="Cattoween Mascot" />
  35. 35. <img src="images/cat-1920.jpg" srcset="images/cat-1920.jpg 1920w, images/cat-1400.jpg 1400w, images/cat-1000.jpg 1000w, images/cat-700.jpg 700w, images/cat-400.jpg 400w" sizes="(min-width: 700px) 50vw, 100vw" alt="Cattoween Mascot" />
  36. 36. RETINA IMAGES http://tercerahkan.com/wp-content/uploads/2014/05/70191-b460ba-500-333.jpg
  37. 37. <img src="images/cat1x.jpg" srcset="images/cat2x.jpg 2x, images/cat2.6x.jpg 2.6x, images/cat3x.jpg 3x" alt="Cattoween Mascot" />
  38. 38. THE PICTURE ELEMENT http://i.imgur.com/QTpl1.jpg
  39. 39. NASTYGAL.COM
  40. 40. landsend.com
  41. 41. Use the picture element to enhance art direction
  42. 42. <picture> <source media="(min-width: 767px)" srcset="/images/feature-large.jpg"> <img src="/images/feature-small.jpg" alt="Buttons and beyond: save 30%"> </picture>
  43. 43. <picture> <source media="(min-width: 767px)" srcset="/images/feature-large.jpg"> <img src="/images/feature-small.jpg" alt="Buttons and beyond: save 30%"> </picture>
  44. 44. <picture> <source media="(min-width: 767px)" srcset="/images/feature-large.jpg"> <img src="/images/feature-small.jpg" alt="Buttons and beyond: save 30%"> </picture>
  45. 45. codepen.io/Jenn/pen/ef916555aa228574247599d7948b578c
  46. 46. caniuse.com/#feat=picture
  47. 47. <picture> <source media="(min-width: 60em)" srcset="/images/feature-xl.jpg"> <source media="(min-width: 40em)" srcset="/images/feature-large.jpg"> <img src="/images/feature-small.jpg" alt="Buttons and beyond: save 30%"> </picture>
  48. 48. <picture> <source media="(min-width: 60em)" srcset="/images/feature.jpg, /images/feature@1.5x.jpg 1.5x, /images/feature@2x.jpg 2x"> <img src="/images/feature-small.jpg" alt="Buttons and beyond: save 30%"> </picture>
  49. 49. TYPE ATTRIBUTE http://www.cat-breed-info.com/images/grouphomepage.jpg
  50. 50. sarasoueidan.com/blog/svg-picture
  51. 51. caniuse.com/#search=svg
  52. 52. <picture> <source type=“image/webp” srcset=“feature.webp”> <img src="/images/feature.jpg" alt="Buttons and beyond: save 30%"> </picture>
  53. 53. CHOOSE THE BEST SOLUTION FOR YOU http://www.cat-breed-info.com/images/grouphomepage.jpg
  54. 54. BURTON.COM
  55. 55. Enhance images with SVG
  56. 56. NEIMANMARCUS.COM
  57. 57. GAP.COM
  58. 58. SIERRATRADINGPOST.COM
  59. 59. Be clever about IMAGE QUALITY
  60. 60. ABERCROMBIE.COM
  61. 61. Explore LOGO enhancements
  62. 62. DANNIJO.COM
  63. 63. CUTEANDBROKE.COM
  64. 64. URBANOUTFITTERS.COM
  65. 65. THANKS!! @jennlukas
  • charlydandy

    Sep. 10, 2018
  • c1b2

    Aug. 30, 2018
  • ThomasMurphy32

    Mar. 21, 2017
  • CarlosERojasJ

    Oct. 28, 2016
  • RoyceHsu

    Oct. 10, 2016
  • InformationData

    Jun. 20, 2016
  • YassinMohamed7

    Apr. 30, 2016
  • TOMTOGGAS

    Nov. 20, 2015
  • XDAWhizz

    Nov. 16, 2015
  • vohungvi

    Oct. 12, 2015
  • ssusera51813

    Sep. 22, 2015
  • jd132

    Aug. 22, 2015
  • arialvarez

    Aug. 19, 2015
  • cesartarazona2

    Aug. 16, 2015
  • nuruljanati

    Aug. 14, 2015
  • amandath67

    Aug. 8, 2015
  • crownvinod

    Aug. 1, 2015
  • JohnKaweske

    Jul. 28, 2015
  • dvdpolk

    Jul. 27, 2015
  • Gldengrl70

    Jul. 27, 2015

In this world of mobile growth, the time it takes for content to reach our visitors is a number we want to be as small as possible. Images have a huge impact on our page weight and load times, so let's examine how to choose and serve our images wisely.

Views

Total views

6,758

On Slideshare

0

From embeds

0

Number of embeds

265

Actions

Downloads

0

Shares

0

Comments

0

Likes

103

×