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

Images Workshop 2016

Images Workshop 2016

97e38d2c6636968957c178ae61d86184?s=128

Michael Gooding

September 20, 2016
Tweet

Transcript

  1. ©2016 AKAMAI | FASTER FORWARDTM Fast images without compromise Image

    Workshop 2016
  2. ©2016 AKAMAI | FASTER FORWARDTM Schedule Morning session: • The

    image problem • Resizing • Break for coffee • Image formats • Image compression Afternoon Session: • Resizing/Formats Revisited • Image Resolution • Break for coffee • Art Direction • Designing an image strategy
  3. ©2016 AKAMAI | FASTER FORWARDTM Michael Gooding: Performance Evangelist 1.

    Why we need Images 2. The images problem 3. Implementing Images 4. Designing an image strategy
  4. ©2016 AKAMAI | FASTER FORWARDTM A picture speaks a thousand

    words
  5. ©2016 AKAMAI | FASTER FORWARDTM Boris Johnson’s relationship with the

    capital’s black cab trade has become further troubled after the Sun and Daily Mail newspapers released a video showing the mayor of London on his bicycle telling a taxi driver “to **** *** *** ***! and not in that order”.The exchange in Islington, north London, was caught on camera by a passerby. The driver, one of many black cab operators furious at the way Transport for London, overseen by the mayor, has allowed Uber drivers to undermine their trade shouted at Johnson: “You’re one of them mate. That’s what you are. One of them.” The footage shows Johnson replying: “Why don’t you **** *** *** ***! and not in that order.” The cabbie then drives away yelling: “Yeah ********, I hope you ***.” Johnson is easily identifiable wearing a distinctive yellow helmet with his trademark blonde hair poking out at the sides and a charcoal suit. A source close to the mayor said: “Boris has dozens of chance conversations with Londoners every week. Many are productive and friendly, some are colourful, I know most end happily. I believe this particular cabbie however is a serial heckler.” It is difficult to know if the exchange will confirm Johnson’s admired status as someone apart from mainstream politics or instead the sight of him hurling abuse in public will make voters think he lacks the gravitas and restraint to be prime minister. Johnson, now an MP, is clearly waiting to challenge for the leadership against the chancellor, George Osborne, when David Cameron resigns. The general secretary of LTDA (Licenced Taxi Drivers Association) laughed off news of the heated exchange that took place as Johnson was cycling down St John Street in Islington, north London, at just after 12.20am on Friday 5 June. Behind the row is a serious dispute between the black cabs and the Conservative party over the extent to which they are willing to let Uber take over the business of black cabs by undercutting their fares. The black cab trade claims Uber does not pay taxes and uses unlicensed drivers who come to London from outside the capital for three days and lack any knowledge of London’s streets, relying instead on satnavs to get them around the city. By contrast the black cab drivers say they have learned the knowledge over four years and provide a superior service. The black cab trade also says that the strategy of Uber is to undercut the prices of the licensed trade and then after destroying that trade raise its prices, with a monopoly and a lower level of service. The mayor was told last month that London’s black cab trade would die “on his watch” if he didn’t change the laws to block the smartphone app. At recent industry meeting he was accused of lacking “the guts” to stand up to Uber, which is blamed for putting hundreds of cabbies out of work in recent months. Boris Johnson’s relationship with the capital’s black cab trade has become further troubled after the Sun and Daily Mail newspapers released a video showing the mayor of London on his bicycle telling a taxi driver “to **** *** *** ***! and not in that order”.The exchange in Islington, north London, was caught on camera by a passerby. The driver, one of many black cab operators furious at the way Transport for London, overseen by the mayor, has allowed Uber drivers to undermine their trade shouted at Johnson: “You’re one of them mate. That’s what you are. One of them.” The footage shows Johnson replying: “Why don’t you **** *** *** ***! and not in that order.” The cabbie then drives away yelling: “Yeah ********, I hope you ***.” Johnson is easily identifiable wearing a distinctive yellow helmet with his trademark blonde hair poking out at the sides and a charcoal suit. A source close to the mayor said: “Boris has dozens of chance conversations with Londoners every week. Many are productive and friendly, some are colourful, I know most end happily. I believe this particular cabbie however is a serial heckler.” It is difficult to know if the exchange will confirm Johnson’s admired status as someone apart from mainstream politics or instead the sight of him hurling abuse in public will make voters think he lacks the gravitas and restraint to be prime minister. Johnson, now an MP, is clearly waiting to challenge for the leadership against the chancellor, George Osborne, when David Cameron resigns. The general secretary of LTDA (Licenced Taxi Drivers Association) laughed off news of the heated exchange that took place as Johnson was cycling down St John Street in Islington, north London, at just after 12.20am on Friday 5 June. Behind the row is a serious dispute between the black cabs and the Conservative party over the extent to which they are willing to let Uber take over the business of black cabs by undercutting their fares. The black cab trade claims Uber does not pay taxes and uses unlicensed drivers who come to London from outside the capital for three days and lack any knowledge of London’s streets, relying instead on satnavs to get them around the city. By contrast the black cab drivers say they have learned the knowledge over four years and provide a superior service. The black cab trade also says that the strategy of Uber is to undercut the prices of the licensed trade and then after destroying that trade raise its prices, with a monopoly and a lower level of service. The mayor was told last month that London’s black cab trade would die “on his watch” if he didn’t change the laws to block the smartphone app. At recent industry meeting he was accused of lacking “the guts” to stand up to Uber, which is blamed for putting hundreds of cabbies out of work in recent months. Boris Johnson’s relationship with the capital’s black cab trade has become further troubled after the Sun and Daily Mail newspapers released a video showing the mayor of London on his bicycle telling a taxi driver “to **** *** *** ***! and not in that order”.The exchange in Islington, north London, was caught on camera by a passerby. The driver, one of many black cab operators furious at the way Transport for London, overseen by the mayor, has allowed Uber drivers to undermine their trade shouted at Johnson: “You’re one of them mate. That’s what you are. One of them.” The footage shows Johnson replying: “Why don’t you **** *** *** ***! and not in that order.” The cabbie then drives away yelling: “Yeah ********, I hope you ***.” A picture speaks a thousand words 116KB = 3.6M words OR Story repeated x 6866 A picture speaks 3.6 million words
  6. ©2016 AKAMAI | FASTER FORWARDTM 63% OF MOBILE & TABLET

    SHOPPERS RANK PRODUCT IMAGES FIRST OVER OTHER CONTENT ON THE PAGE 94% ARTICLES WITH IMAGES GET M O R E TOTAL VIEWS A picture is worth a thousand words… & better engagement
  7. ©2016 AKAMAI | FASTER FORWARDTM More Engagement = More Money

  8. ©2016 AKAMAI | FASTER FORWARDTM 1. Why we need images

    Summary: Images make our site more engaging
  9. ©2016 AKAMAI | FASTER FORWARDTM 1. Why we need Images

    2. The images problem 3. Implementing Images 4. Designing an image strategy
  10. ©2016 AKAMAI | FASTER FORWARDTM Fast websites make more money

    too!!!
  11. ©2016 AKAMAI | FASTER FORWARDTM High Quality Images Lead to

    Overweight Pages • Images makeup on average 53% of page weight • Avg. page weight surpassed 2MB in 2015 • Images alone in 2016 comprise 2.3 x more page weight than an entire page 2010!
  12. ©2016 AKAMAI | FASTER FORWARDTM The big images got bigger

    fast! ~3.5x Increase in JPG Size
  13. ©2016 AKAMAI | FASTER FORWARDTM 11mage problems!!!

  14. ©2016 AKAMAI | FASTER FORWARDTM #1 - Marketing team demand

    high quality
  15. ©2016 AKAMAI | FASTER FORWARDTM #2 - Popularity of Responsive

    Design RWD SOLVES THE CHALLENGE OF DELIVERING THE SITE TO DIFFERENT DEVICES BUT PERFORMANCE CAN SUFFER
  16. ©2016 AKAMAI | FASTER FORWARDTM #2a - RWD Download and

    Shrink
  17. ©2016 AKAMAI | FASTER FORWARDTM #2b - RWD Download &

    Hide
  18. ©2016 AKAMAI | FASTER FORWARDTM #3 - Explosion of devices

    Serve the correct sized image to stop over downloading
  19. ©2016 AKAMAI | FASTER FORWARDTM #4 - HD/Retina screens

  20. ©2016 AKAMAI | FASTER FORWARDTM #5 - Not all devices

    are created equal 1.0s 2.0s 2.6s 334ms 1003ms 1180ms 222ms 494ms Decode times 0.7s 103ms
  21. ©2016 AKAMAI | FASTER FORWARDTM #6 - Browsers helped on

    one hand Supported by: …but took away with the other!!!
  22. ©2016 AKAMAI | FASTER FORWARDTM #7 - Browsers helped again!

    <img src=“small.jpg” alt=“” srcset=“…” sizes=“…”/> AND <picture> <source media=“…” srcset=“…” sizes=“” /> <img src=“small.jpg” alt=“” /> </picture>
  23. ©2016 AKAMAI | FASTER FORWARDTM #7 - Browsers helped again!

    #7 COMPLEX CODING TO DETERMINE WHEN TO DELIVER THE RIGHT IMAGE, SIZE, VERSION, FORMAT, RESOLUTION TO EACH AND EVERY END USER … ACROSS ALL DEVICES
  24. ©2016 AKAMAI | FASTER FORWARDTM #8 - When do you

    create the images? 108 variants per image! 3 sizes x 4 formats x 3 resolutions x 3 layouts
  25. ©2016 AKAMAI | FASTER FORWARDTM #9 - Where do you

    store them securely? /productimages /productimages/mobile /productimages/tablet £ $ €
  26. ©2016 AKAMAI | FASTER FORWARDTM #10 - How long does

    it take to modify?
  27. ©2016 AKAMAI | FASTER FORWARDTM #11 - What about the

    network Faster mobile speeds 6.5 2 Mbps Average 4G Bandwidth UK 10 18 Mbps 2015 2020 2013 2014
  28. ©2016 AKAMAI | FASTER FORWARDTM • Photoshop or Fireworks •

    PNG or JPG? Image Creation Image Delivery Challenges to Image Delivery on the Web 2005
  29. ©2016 AKAMAI | FASTER FORWARDTM • Complex to decide which

    image you serve when • Demand by marketing / design for high quality images • Many different devices - needing different image sizes • Different browsers supporting different image formats • Choosing the best compression & format to get the best optimised image • Challenges with the different network conditions Image Creation Image Delivery • Mobiles are not PCs and RWD has inhibited performance • Cost to create, manage and store different derivatives Challenges to Image Delivery on the Web Today • HD/Retina Screens • Picture or Srcset?
  30. ©2016 AKAMAI | FASTER FORWARDTM 2. The images problem Summary:

    Mobile has made delivering fast images hard
  31. ©2016 AKAMAI | FASTER FORWARDTM 1. Why we need Images

    2. The images problem 3. Implementing Images 4. Designing an image strategy
  32. ©2016 AKAMAI | FASTER FORWARDTM 1. Resizing Create : The

    Right Sized Image Deliver : Srcset, Sizes, Client Hints 2. Image Formats Create : Automated image creation, Formats Deliver : Picture element 3. Image Compression Create : Compression, Perceptual Quality Deliver : Automated Delivery using Image Manager 4. Resizing/formats revisited Demo/Testing 5. Resolutions Create : Resolution/pixel density Deliver : picture & srcset 6. Art Direction Create : Automated Deliver : Picture element & Image Manager custom policies 3. Implementing Images
  33. ©2016 AKAMAI | FASTER FORWARDTM 1. Resizing Create: The right

    sized image Deliver: Srcset, Sizes & Client Hints
  34. ©2016 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Create: The right sized image
  35. ©2016 AKAMAI | FASTER FORWARDTM Mobile Data Plans Less is

    More Don’t deliver more than you need Device Constraints Mobile devices Network Performance Cellular Wi-Fi Why Serve the right sized image? £ $ ¥ €
  36. ©2016 AKAMAI | FASTER FORWARDTM Serve the correct size image

    for the device Tim Kadlec: Why do we need Responsive Images? 72% less image weight
  37. ©2016 AKAMAI | FASTER FORWARDTM Case study: Watch this! Example:

    http://www.watches-of-switzerland.co.uk/17380894
  38. ©2016 AKAMAI | FASTER FORWARDTM Size matters Size on screen:

    315 x 420 900 x 1200 PNG 1.2MB Resized: 185KB 85% saving
  39. ©2016 AKAMAI | FASTER FORWARDTM How do you paint an

    image Request Decode Copy to GPU Display Store in memory
  40. ©2016 AKAMAI | FASTER FORWARDTM 520 1280 What does an

    image REALLY look like?
  41. ©2016 AKAMAI | FASTER FORWARDTM

  42. ©2016 AKAMAI | FASTER FORWARDTM 1280 x 520 x 4

    = 2.5 MB Images contain A LOT of information
  43. ©2016 AKAMAI | FASTER FORWARDTM “...25% of new Android phones

    have only 512MB of RAM.” Jen Fitzpatrick VP of Product Management Google Maps
  44. ©2016 AKAMAI | FASTER FORWARDTM Not all devices are created

    equal 1.0s 2.0s 2.6s 334ms 1003ms 1180ms 222ms 494ms Decode times 0.7s 103ms
  45. ©2016 AKAMAI | FASTER FORWARDTM Resizing in the browser 600

    X 600 200 X 200
  46. ©2016 AKAMAI | FASTER FORWARDTM Reduce each image by 50px

    550 X 550 150 X 150
  47. ©2016 AKAMAI | FASTER FORWARDTM What break points? 550px X

    550px (600 X 600 – 550 X 550) X 4 = 230,000 wasted bytes 150px X 150px (200 X 200 – 150 X 150) X 4 = 70,000 wasted bytes 200px 700px 1200px
  48. ©2016 AKAMAI | FASTER FORWARDTM Deliver: Srcset, Sizes & Client

    Hints
  49. ©2016 AKAMAI | FASTER FORWARDTM Delivery 1. Browser Solutions –

    Responsive images 2. Client side - JavaScript 3. Server side – Cookies & Headers 4. 3rd Party tools
  50. ©2015 AKAMAI | FASTER FORWARDTM Browser Decides - Why not

    use Media Queries? Known by the developer when writing code Known by the browser when rendering Viewport dimension no yes image size relative to the viewport yes no screen density no yes source file dimensions yes no
  51. ©2015 AKAMAI | FASTER FORWARDTM Srcset - let the browser

    choose <img src=”small.jpg” srcset=”small.jpg 300w, large.jpg 500w” sizes=”(max-width:400px) 300px, 500px” alt=”selfie picture”> ALTERNATIVELY USE RELATIVE WIDTHS <img src=”small.jpg” srcset=”small.jpg 300w, large.jpg 500w” sizes=”(max-width:400px) 100vw, 50vw” alt=”selfie picture”> src for fall back comma-separated list of available versions of the image; each image’s width is specified using the w descriptor Sizes help tell the browser when to select each image Sizes can also use viewport percentage to inform the decision
  52. ©2015 AKAMAI | FASTER FORWARDTM <img src=”small.jpg” srcset=”small.jpg 300w, large.jpg

    500w” sizes=”(max-width:400px) 300px, 500px” alt=”selfie picture”> ALTERNATIVELY USE RELATIVE WIDTHS <img src=”small.jpg” srcset=”small.jpg 300w, large.jpg 500w” sizes=”(max-width:400px) 100vw, 50vw” alt=”selfie picture”> What the browser now knows Known by the developer when writing code Known by the browser when rendering Viewport dimension no yes image size relative to the viewport yes yes (sizes) screen density no yes source file dimensions yes Yes (srscet)
  53. ©2015 AKAMAI | FASTER FORWARDTM What if the browser told

    the server? Client Hints <meta http-equiv=”Accept-CH” content=”DPR, Viewport-Width, Width”>
  54. ©2016 AKAMAI | FASTER FORWARDTM Exercise 1: Resizing Create: The

    Right Sized Image Deliver: Srcset, Sizes & Client Hints
  55. ©2016 AKAMAI | FASTER FORWARDTM Our Newspaper demo site Desktop

    Screen breakpoint: +800px Image displayed: 460 x 276px Suggested size: 460 x 276px iPad Screen breakpoint: 401 - 800px Image displayed: 340 x 204px Suggested size: 340 x 204px iPhone 5 Screen breakpoint: -400px Image displayed: 300 x 180px Suggested size: 300 x 180px
  56. ©2016 AKAMAI | FASTER FORWARDTM ICEcoder Password Password: password01

  57. ©2016 AKAMAI | FASTER FORWARDTM Our Newspaper demo site Desktop

    Screen breakpoint: +800px Image displayed: 460 x 276px Suggested size: 460 x 276px iPad Screen breakpoint: 401 - 800px Image displayed: 340 x 204px Suggested size: 340 x 204px iPhone 5 Screen breakpoint: -400px Image displayed: 300 x 180px Suggested size: 300 x 180px
  58. ©2016 AKAMAI | FASTER FORWARDTM Wrap Up 1. Manually creating

    provides control 2. Manually creating requires time/people 3. Client hints good for server side solutions 4. Srcset OK for simple switching, what about my other 10 problems?
  59. ©2016 AKAMAI | FASTER FORWARDTM 2. Image Formats Create: Automated

    image creation Formats Deliver: Picture element
  60. ©2016 AKAMAI | FASTER FORWARDTM Most used images on the

    web today Alexa top 1000 August 2016
  61. ©2016 AKAMAI | FASTER FORWARDTM GIF Name: Graphical Interchange Format

    Transparency: Yes Number of Colours: 256 Compression: Lossy Supports Animation: Yes Chroma Subsampling: No Use: Simple animation JPG Name: Joint Photographic Experts Group Transparency: No Number of Colours: 16.8 million Compression: Lossy Supports Animation: No Chroma Subsampling: Yes Use: Photos PNG Name: Portable Network Graphics Transparency: Yes Number of Colours: 16.8 million Compression: Lossless Supports Animation: Yes Chroma Subsampling: No Use: images using effects such as drop shadows, glows, transparency SVG Name: Scalable Vector Graphics Transparency: Yes Number of Colours: 16.8 million Compression: Lossless Supports Animation: Yes Chroma Subsampling: No Use: Icons
  62. ©2016 AKAMAI | FASTER FORWARDTM New Flavours of JPEG Format

    Size vs JPEG Progressive Transparency Support Hardware Decoding Encoder Browser Support JPEG N/A N/A No No jpegtran Everybody WebP -35% -35% Yes No cwebp JPEG XR -30% N/A In Spec, not Browsers Maybe jxrlib JPEG 2000 -30% N/A In Spec, not Browsers Maybe OpenJPEG 10+ 12.1+ 4+ 23+ 6+ 6+
  63. ©2016 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Create: The right format image
  64. ©2016 AKAMAI | FASTER FORWARDTM Right format Zoom image is

    on a transparent overlay Resized PNG : 185KB JPG Version: 81KB 56% saving But JPEG isn’t transparent? WebP Version: 42KB 77% saving Source: https://developers.google.com/speed/webp/gallery2
  65. ©2016 AKAMAI | FASTER FORWARDTM We can detect approximately 10

    million unique colours. The Eye can be tricked We notices changes to light more than changes to colour
  66. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling: 4:4:4 4 4

    4 Chroma Luma +
  67. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling: 4:4:4

  68. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling: 4:2:2 2 2

    4 Luma + Chroma 4 Samples 50% Saving over 4:4:4
  69. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling: 4:2:2

  70. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling: 4:2:0 2 0

    4 Luma + 2 Samples 75% Saving over 4:4:4 Chroma
  71. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling: 4:2:0

  72. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling - The result

  73. ©2016 AKAMAI | FASTER FORWARDTM Chroma Subsampling - The result

    - And why you should care! Formula to calculate the memory needed for an image (W x H x 3) - (W x H x Subsample_level x 2) 1300px x 1024px RGBA 5,324,800 4:4:4 3,993,600 4:2:2 2,662,400 4:2:0 1,996,800 62.5% memory saving
  74. ©2016 AKAMAI | FASTER FORWARDTM You might already be doing

    it
  75. ©2016 AKAMAI | FASTER FORWARDTM Need to automate creation =

    12 variant images 3 sizes x 4 formats
  76. ©2016 AKAMAI | FASTER FORWARDTM Deliver: <picture>

  77. ©2016 AKAMAI | FASTER FORWARDTM The Picture Element Part I

    Recreating what we had before <picture> <source media="(max-width : 400px)" srcset="uploads/ex2_hotel_400.jpg"> <source media="(max-width : 800px)" srcset="uploads/ex2_hotel_500.jpg"> <source media="(min-width : 801px)" srcset="uploads/ex2_hotel_800.jpg"> <img src="uploads/ex2_hotel_400.jpg" /> </picture> New element <img> for fall back Multiple sources
  78. ©2016 AKAMAI | FASTER FORWARDTM The Picture Element Part II

    Adding format selection <picture> <source type="image/webp" and media="(max-width : 400px)" srcset="uploads/ex2_hotel_400.webp"> <source type="image/webp" and media="(max-width : 800px)" type="image/webp" and srcset="uploads/ex2_hotel_500.webp"> <source type="image/webp" and media="(min-width : 801px)" srcset="uploads/ex2_hotel_800.webp"> <source media="(max-width : 400px)" srcset="uploads/ex2_hotel_400.jpg"> <source media="(max-width : 800px)" srcset="uploads/ex2_hotel_500.jpg"> <source media="(min-width : 801px)" srcset="uploads/ex2_hotel_800.jpg"> <img src="uploads/ex2_hotel_400.jpg" /> </picture> Additional Check for type
  79. ©2016 AKAMAI | FASTER FORWARDTM Exercise 2: Image Formats Create:

    Automated image creation Formats Deliver: Picture element
  80. ©2016 AKAMAI | FASTER FORWARDTM Our Hotel demo site Desktop

    Screen breakpoint: +1000px Image displayed: 773 x 550px Suggested width: 800px iPad Screen breakpoint: 401 - 1000px Image displayed: 491 x 365px Suggested width: 500px Galaxy s5 Screen breakpoint: -400px Image displayed: 360 x 270px Suggested width: 400px
  81. ©2016 AKAMAI | FASTER FORWARDTM Wrap Up 1. Auto creating

    is fast 2. Still have to store somewhere 3. Not so easy to go back and modify/add new variants 4. Some easy to use plugins & tools to manipulate images 5. Poor version support for j2k and jxr 6. Picture Element provides more functionality 7. Code is starting to get complex
  82. ©2016 AKAMAI | FASTER FORWARDTM 3. Image Compression Create: Compression

    Deliver: Standard Image delivery
  83. ©2016 AKAMAI | FASTER FORWARDTM Lossy v Lossless “lossy” images

    can never be uncompressed to an exact 1:1 copy of the original source image
  84. ©2016 AKAMAI | FASTER FORWARDTM We’re Marketing and we can

    tell the difference! Quality: 80 Size: 21KB Quality: 90 Size: 29KB Quality: 70 Size: 18KB Quality: 60 Size: 15KB Quality: 100 Size: 78KB http://bit.ly/1d67Zpq
  85. ©2016 AKAMAI | FASTER FORWARDTM What is image quality? Q5:

    5KB Q10: 9KB Q15: 13KB Q50: 31KB Q75: 46KB Q90: 99KB
  86. ©2016 AKAMAI | FASTER FORWARDTM Quality by size and scale

    0 50 100 150 200 250 300 350 400 450 10 20 30 40 50 60 70 80 90 100 File size in KB JPEG Quality Rating File size v’s Jpeg Quality Ratings 300x400 450x600 600x800 750x1000 900x1200 Large reduction between 100-90 After 60 limited returns
  87. ©2016 AKAMAI | FASTER FORWARDTM Quality by user experience 0

    50 100 150 200 250 300 350 400 450 10 20 30 40 50 60 70 80 90 100 File size in KB JPEG Quality Rating File size v’s Jpeg Quality Ratings 300x400 450x600 600x800 750x1000 900x1200 • Poor Engagement • Good Performance • Un-engaged users • Quality • Poor Performance • Annoyed users • Happy users
  88. ©2016 AKAMAI | FASTER FORWARDTM Exercise 3: Image Compression Create:

    Compression Deliver: Standard Image Delivery
  89. ©2016 AKAMAI | FASTER FORWARDTM Our Retail demo site Desktop

    Screen breakpoint: +1024px Image displayed: 580 x 387px Suggested width: 600px iPad Screen breakpoint: 481 - 1024px Image displayed: 349 x 233px Suggested width: 350px iPhone 5 Screen breakpoint: -480px Image displayed: 290 x 195px Suggested width: 300px
  90. ©2016 AKAMAI | FASTER FORWARDTM What you should have got

  91. ©2016 AKAMAI | FASTER FORWARDTM Wrap Up 1. Creation is

    automatic and no time required 2. q85 can reduce visual quality (for some images) 3. q85 does improve performance
  92. ©2016 AKAMAI | FASTER FORWARDTM Exercise 4: Size/Format/Compression (again!!) Create:

    Automatic Creation Deliver: Automatic Delivery
  93. ©2016 AKAMAI | FASTER FORWARDTM Deliver: Perceptual quality Automated size

    Automated formats
  94. ©2016 AKAMAI | FASTER FORWARDTM

  95. ©2016 AKAMAI | FASTER FORWARDTM Perceptual Quality & Structural Similarity

    Zhou Wang, Alan C. Bovik, Hamid R. Sheikh, and Eero P. Simoncelli
  96. ©2016 AKAMAI | FASTER FORWARDTM What is Structural Similarity? An

    algorithm that uses Brightness, Contrast, and Structure to compare images.
  97. ©2016 AKAMAI | FASTER FORWARDTM What is Structural Similarity?

  98. ©2016 AKAMAI | FASTER FORWARDTM How do we use Structural

    Similarity for optimization? Structural Similarity gives us a human benchmark to compare images of different qualities to an original.
  99. ©2016 AKAMAI | FASTER FORWARDTM How do we use Structural

    Similarity for optimization? Q10 DSSIM: 0.0566 Q50 DSSIM: 0.0251 Q80 DSSIM: 0.0179
  100. ©2016 AKAMAI | FASTER FORWARDTM Exercise 4: Size/Format/Compression (again!!) Create:

    Automatic Creation Deliver: Automatic Delivery
  101. ©2016 AKAMAI | FASTER FORWARDTM What you should have got

  102. ©2016 AKAMAI | FASTER FORWARDTM What you should have got

  103. ©2016 AKAMAI | FASTER FORWARDTM What you should have got

  104. ©2016 AKAMAI | FASTER FORWARDTM Wrap Up 1. Only create

    the image sizes/formats we need 2. Image size is linked to device size, lose control 3. Support for ALL image formats 4. Code complexity is MASSIVELY reduced 5. Time to implement is fast 6. Balance between Performance & Quality
  105. ©2016 AKAMAI | FASTER FORWARDTM 5. Resolutions Create: Resolution /

    Pixel Density Deliver: Picture & Srcset
  106. ©2016 AKAMAI | FASTER FORWARDTM iPhone 4 gave us the

    Retina display 960 x 640 pixel resolution at 326 ppi (pixels per inch)
  107. ©2016 AKAMAI | FASTER FORWARDTM What does higher resolution mean?

    more pixels = smoother-looking curves https://developer.apple.com/library/mac/documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Introduction/Introduction.html • Curves look curvier • Fonts look cleaner • Pictures look sharper • "Jaggies" are reduced
  108. ©2016 AKAMAI | FASTER FORWARDTM Srcset and Picture density <img

    src=”frog.jpg” alt=”frog using a camera” srcset=”frog.jpg, frog-2X.jpg 2x”> Screen density
  109. ©2016 AKAMAI | FASTER FORWARDTM Problem #1: Mobile actually has

    bigger images….
  110. ©2016 AKAMAI | FASTER FORWARDTM PPI

  111. ©2016 AKAMAI | FASTER FORWARDTM 1x and 2x – Twice

    as many pixels/inch Width CSS: 320px Physical: 320px DPR: 1x Width CSS: 320px Physical: 640px DPR: 2x
  112. ©2016 AKAMAI | FASTER FORWARDTM Apple family tree

  113. ©2016 AKAMAI | FASTER FORWARDTM Deliver: resolution switching with srcset

    & <picture>
  114. ©2016 AKAMAI | FASTER FORWARDTM <img src="retail_files/accessories.jpg" srcset="retail_files/accessories.jpg?imwidth=300 1x, retail_files/accessories.jpg?imwidth=600

    2x, retail_files/accessories.jpg?imwidth=900 3x" width="95%“ /> Resolution switching with srcset Simple density descriptor
  115. ©2016 AKAMAI | FASTER FORWARDTM Adding resolution to the <picture>

    <picture> <source media="(max-width : 480px)" srcset="retail_files/mens_accessories.jpg?imwidth=300 1x, retail_files/mens_accessories.jpg?imwidth=600 2x, retail_files/mens_accessories.jpg?imwidth=900 3x"> <source media="(max-width : 1024px)" srcset="retail_files/mens_accessories.jpg?imwidth=350 350w, retail_files/mens_accessories.jpg?imwidth=700 700w, retail_files/mens_accessories.jpg?imwidth=1050 1050w" sizes="50vw"> <source media="(min-width : 1025px)" srcset="retail_files/mens_accessories.jpg?imwidth=600 1x, retail_files/mens_accessories.jpg?imwidth=1200 2x"> <img src="retail_files/mens_accessories.jpg?imwidth=400" width="95%" /> </picture> Simple multipliers Or, tell the browser for screens under 1024px, the image will take up 50% of the viewport and there are 3 sizes available
  116. ©2016 AKAMAI | FASTER FORWARDTM Exercise 5: Resolutions Create: Resolution

    / Pixel Density Deliver: Picture & IM Width Hints Bonus: Srcset
  117. ©2016 AKAMAI | FASTER FORWARDTM Wrap Up 1. Srcset is

    simple 2. Srcset cannot be combined with other operations 3. <picture> gives us some good flexibility 4. <picture> can start to get complex 5. Most 2x/3x screens are mobile, what about the network?
  118. ©2016 AKAMAI | FASTER FORWARDTM 6. Art Direction Create: Automated

    Deliver: Picture & IM Custom Policy
  119. ©2016 AKAMAI | FASTER FORWARDTM Size isn’t everything

  120. ©2016 AKAMAI | FASTER FORWARDTM Responsive Images https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

  121. ©2016 AKAMAI | FASTER FORWARDTM What happens if you don’t

    bother? Original Image Didn’t Bother Art Direction
  122. ©2016 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Create: Variants using IM
  123. ©2016 AKAMAI | FASTER FORWARDTM Deliver: <picture>

  124. ©2016 AKAMAI | FASTER FORWARDTM Art direction & the Picture

    Element <picture> <source media="(max-width : 480px)" srcset="retail_files/leather_jacket.jpg?imwidth=300&impolicy=cropped 1x, retail_files/leather_jacket.jpg?imwidth=600&impolicy=cropped 2x, retail_files/leather_jacket.jpg?imwidth=900&impolicy=cropped 3x"> <source media="(max-width : 1024px)" srcset="retail_files/leather_jacket.jpg?imwidth=350&impolicy=cropped 1x, retail_files/leather_jacket.jpg?imwidth=700&impolicy=cropped 2x, retail_files/leather_jacket.jpg?imwidth=1050&impolicy=cropped 3x"> <source media="(min-width : 1025px)" srcset="retail_files/leather_jacket.jpg?imwidth=600 1x, retail_files/leather_jacket.jpg?imwidth=1200 2x"> <img src="retail_files/leather_jacket.jpg?imwidth=300" width="95%" /> </picture> Cropped image for mobile & tablet Non cropped for desktop
  125. ©2016 AKAMAI | FASTER FORWARDTM Exercise 6: Art Direction Create:

    Automated Deliver: Picture & IM Custom Policy
  126. ©2016 AKAMAI | FASTER FORWARDTM Wrap Up 1. <picture> in

    this use case gives great control 2. Less pinch zooming = better user experience 3. More time to create variants 4. <picture> can start to get complex
  127. ©2016 AKAMAI | FASTER FORWARDTM 3. Implementing Images Summary: Lots

    of tools, lots of challenges
  128. ©2016 AKAMAI | FASTER FORWARDTM 1. Why we need Images

    2. The images problem 3. Implementing Images 4. Designing an image strategy
  129. ©2016 AKAMAI | FASTER FORWARDTM Image Strategy 101 1. Create

    lots of images 2. Deliver lots of images
  130. ©2016 AKAMAI | FASTER FORWARDTM Image Creation OR 1. Need

    to store them somewhere 2. Faster delivery 3. New versions a pain (watermarks, breakpoints etc) 4. Delay in go live process 1. Don’t generate/store what you don’t need 2. Slower delivery 3. Easy to add new versions
  131. ©2016 AKAMAI | FASTER FORWARDTM Extra Performance considerations 1. Lazy

    Loading 2. HTTP/2 3. Network awareness 4. Caching 5. Monitoring
  132. ©2016 AKAMAI | FASTER FORWARDTM Lazy loading 3 types 1.

    Delay non critical images until after onLoad(); 2. As you scroll 3. User event
  133. ©2016 AKAMAI | FASTER FORWARDTM Below the fold Above the

    fold Viewport Above and Below the Fold
  134. ©2016 AKAMAI | FASTER FORWARDTM Lazy Loading

  135. ©2016 AKAMAI | FASTER FORWARDTM Quick demo ?preload=N

  136. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. H2 Performance – Images Visual experience of loading the page h1 h2 # of files Render start (s) 0 5 10 0 250 500 750 1000 Rendering range in h1 is large
  137. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. H2 Performance – Images Visual experience of loading the page h1 h2 # of files Render start (s) 0 5 10 0 250 500 750 1000 Rendering range in h1 is large
  138. ©2016 AKAMAI | FASTER FORWARDTM H/2 Image performance

  139. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. H2 Performance – Rendering: DIY prioritisation <img onload="addImages();" src="tshirt12_thumb.jpg"> <script> function addImages() {; var img = document.createElement("img"); img.src = "tshirt2.jpg"; document.getElementById("imgholder").appendChild(img); } </script> Different order and loaded with dependency
  140. ©2016 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. H2 Performance – Rendering: Progressive jpegs h2 normal jpeg progressive Normal jpegs just 60% loaded
  141. ©2016 AKAMAI | FASTER FORWARDTM Network awareness Original Image Quality:

    100% Size: 60KB Network Conditions Average Adapted Image Throughput: High Size: 54KB (90%) Throughput: Med Size: 40KB (67%) Throughput: Low Size: 24KB (40%)
  142. ©2016 AKAMAI | FASTER FORWARDTM Warnings 1. Don’t dilute the

    cache 2. Think about Image SEO & sharing
  143. ©2016 AKAMAI | FASTER FORWARDTM How do I know if

    I’m doing a good job?
  144. ©2016 AKAMAI | FASTER FORWARDTM Image Strategy Wrap Up 1.

    Decide how advanced you want to be 2. Remember user experience when deciding 3. Know you users 4. Review image workflow 5. Automate where possible 6. Balance quality and performance 7. Constantly measure performance
  145. ©2016 AKAMAI | FASTER FORWARDTM 4. Designing an image strategy

    Summary: simplify where you can but don’t compromise on quality or performance
  146. ©2016 AKAMAI | FASTER FORWARDTM https://www.surveymonkey.co.uk/r/HJ6KVTF Thank you!