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
×

Let's Talk About Responsive Images and Performance

6,147 views

Published on

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.

Published in: Technology, Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • the cat is so adorable
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×