A primer on image optimization

A primer on image optimization

Given at Fastly Altitude in NYC with Edward Thurgood

C64a0152c9b0928e62d88f0bb5eb8138?s=128

Ines Sombra

March 22, 2017
Tweet

Transcript

  1. Edward Thurgood & Ines Sombra | Fastly A Primer on

    Image Optimization
  2. About us

  3. None
  4. None
  5. Web & Images

  6. None
  7. A very good boy

  8. A site with no images

  9. JPEG 1920 × 1080 px Max quality 2.3MB

  10. Your site img-large im g-thum b im g-thum b im

    g-thum b im g-thum b im g-xs im g-xs
  11. Origin Pre-processing Store many sizes per image use in your

    origin
  12. Origin Pre-processing Store many sizes per image use in your

    origin
  13. DIY Challenges PROS CONS Open source options available No licensing

    fees Scale as you need Tailor to your needs Setup, hosting, and operability burden on you! Increases stack complexity Costly & takes time
  14. The purpose WIP img-hero im g-thum b im g-xs im

    g-xs im g-thum b im g-thum b im g-thum b
  15. img-hero JPEG 800 × 560 px Quality 85 47 KB vs 2.3MB

    img-thumb 200 × 200 px Quality 85 6.93KB vs 2.3MB
  16. Wouldn’t it be awesome if Fastly could do all of

    this for me? !
  17. Well actually, yes

  18. Previewing our Image Optimizer "

  19. Crop with aspect ratio http://www.fastly.io/gordo.jpg? crop=10:7,offset-x80&width=800 Crop the image square

    & resize the width to 200px http://www.fastly.io/gordo.jpg?crop=1:1&width=200 200 × 200 px Quality 85 6.93KB vs 2.3MB JPEG 800 × 560 px Quality 85 47 KB vs 2.3MB
  20. Features Resizing Cropping / trimming Orientation Quality control Background color

    Resize filters Canvas JPEG Progressive & Baseline PNG 24/32 WEBP Lossy & Lossless Image formats
  21. #

  22. Animated GIFs!

  23. http://io.fastlydemo.net/io docs.fastly.com/api/imageopto

  24. Origin ImageOpto 101 Image Opto Image Opto Image Opto Image

    Opto Image Opto Image Opto Image Opto CDN
  25. Origin ImageOpto 101 Image Opto Image Opto Image Opto Image

    Opto Image Opto Image Opto Image Opto CDN
  26. Origin ImageOpto 101 Image Opto Image Opto Image Opto Image

    Opto Image Opto Image Opto Image Opto CDN
  27. Origin ImageOpto 101 Image Opto Image Opto Image Opto Image

    Opto Image Opto Image Opto Image Opto CDN
  28. Origin ImageOpto 101 Image Opto Image Opto Image Opto Image

    Opto Image Opto Image Opto Image Opto CDN
  29. Origin ImageOpto 101 Image Opto Image Opto Image Opto Image

    Opto Image Opto Image Opto Image Opto CDN
  30. Origin CDN ImageOpto 101 Image Opto Image Opto Image Opto

    Image Opto Image Opto Image Opto Image Opto
  31. Image Opto Image Opto Image Opto Image Opto Image Opto

    Image Opto Image Opto Origin CDN ImageOpto 101
  32. Image Opto Image Opto Image Opto Image Opto Image Opto

    Image Opto Image Opto Origin CDN ImageOpto 101
  33. Origin CDN ImageOpto 101 Image Opto Image Opto Image Opto

    Image Opto Image Opto Image Opto Image Opto
  34. Benefits of Fastly ImageOpto Eliminate your image pre-processing pipeline Seamlessly

    integrated with Fastly’s infrastructure Transformations composable with VCL Cache your large original image and its variations
  35. Our Roadmap Watermarking Increase WebP performance Varnish User Agent detection

    Support more image formats And we’d love to hear us which features you need!
  36. Workshop time!

  37. facepug.io Service with imageopto enabled GCP backed Follow along with

    us, all examples are live!
  38. VCL + Image Opto = $

  39. A bit of context www.facepug.io/article1.html On vcl_recv Sending requests to

    imageopto The imageopto header
  40. Sending only images to ImageOpto Capture images using file extension

    or directory www.facepug.io/article2.html
  41. The query string www.facepug.io/article3.html facepug.io/image.jpg? crop=1:1&width=200

  42. Defaulting 
 or overriding parameters www.facepug.io/article4.html Lets you to specify

    default parameters across your site
  43. www.facepug.io/article5.html Image purposes thumbnail Image Policies

  44. www.facepug.io/article5.html Image purposes thumbnail medium Image Policies

  45. www.facepug.io/article5.html Image purposes thumbnail medium hero Image Policies

  46. Image Policies www.facepug.io/article5.html

  47. Policy with fallback www.facepug.io/article6.html Applying default set of parameters for

    missing or invalid policies
  48. Overriding Image Policies www.facepug.io/article7.html Adding custom parameters to existing policies

  49. Protecting Origin Images www.facepug.io/article8.html Being unfriendly with policies

  50. Client Hints / Save-Data www.facepug.io/article9.html

  51. Handling Save-Data www.facepug.io/article9.html

  52. Handling Save-Data www.facepug.io/article9.html

  53. Handling Save-Data www.facepug.io/article9.html

  54. ImageOpto IRL

  55. Hello Nordstrom Rack!

  56. Intro Herman Radtke VP of Engineering at Nordstromrack.com | HauteLook

    Fastly customer for 1 year Beta testing image optimization since May 2016 Nordstrom strives to be the best in Customer Service
  57. github.com/hautelook/altitude-2017-fastly-image-opto Fastly ImageOpto & NRHL

  58. Images are everything

  59. Resizing at NRHL Critical for ECommerce to display best image

    for customers. Best means balancing size and quality We used to save different versions of our images on S3 using a python script Later on, we created our own resizer. Problems: Cost a lot We had had to fix bugs Used another CDN's resizer, but we overloaded it. Poor customer experience.
  60. Pre-processing different image sizes

  61. Pre-processing different image sizes

  62. Resizer Performance Is Crucial

  63. Performance Tests

  64. Performance Tests 720 simultaneous servers balanced between North Virginia, Oregon

    and Northern California AWS regions. Wanted to simulate the traffic that would hit the HauteLook home page at 8am ~85 images per server “session” Sustained ~220 resizing requests per second (uncached)
  65. Performance Tests RESULTS 90th percentile - 433ms Average - 243ms

    Max - 4.489s Note: the above measurements include network time
  66. Performance Tests

  67. One Image Per Aspect Ratio

  68. Image Aspect Ratio Best Practice Create high resolution image for

    each aspect ratio. Examples: square, tall, wide Make sure it is large enough! Example: NRHL tall image is 1200 x 1800.
  69. Resizing Images https://fastly.hautelookcdn.com/assets/152881hudsonwd/event-hero.jpg

  70. Resizing Examples Resize original image on the fly Original image

    is 960 x 469 /event-hero.jpg?width=480&height=234 Original image URL Add width query parameter Add height query parameter What about that height?
  71. Resizing Examples Odd height numbers 469 / 2 = 234.5

    You can specify just the width and let fastly figure it out! /event-hero.jpg?width=480 Fastly chooses 235 Fastly also accepts percentages Example: /event-hero.jpg?width=50p Put a “p” after the number.
  72. Responsive Design https://fastly.hautelookcdn.com/assets/157673vinceshoeswf/event-square.jpg

  73. Use Case: Responsive Design <img sizes="50vw" src="/event-square.jpg" srcset=" /event-square.jpg?width=200 200w,

    /event-square.jpg?width=400 400w, /event-square.jpg?width=600 600w" >
  74. High Resolution Images https://fastly.hautelookcdn.com/products/MP3577/large/6348804.jpg

  75. Use Case: Device Scaling Factor Most monitors and smart phones

    are not high resolution. Scaling factor of 1. Many iPhones have better resolution (retina). Scaling factor of 2. iPhone 6 Plus has high resolution. Scaling factor of 3.
  76. Use Case: Device Scaling Factor <img width=200 height=300 src="/6348804.jpg?width=200" srcset="

    /6348804.jpg?width=200&height=300 1x, /6348804.jpg?width=400&height=600 2x, /6348804.jpg?width=600&height=900 3x" >
  77. Use Case: Device Scaling Factor <img width=200 height=300 src="/6348804.jpg?width=200" srcset="

    /6348804.jpg?width=200&height=300&dpr=1 1x, /6348804.jpg?width=200&height=300&dpr=2 2x, /6348804.jpg?width=200&height=300&dpr=3 3x" >
  78. Image Formats https://fastly.hautelookcdn.com/assets/150628cccaliforniawc/event-main.jpg

  79. Image Formats Best Practice Use one format! NRHL displays photographs,

    so jpg makes most sense. Change format on the fly: /event-main.jpg?format=webp
  80. Use Case: WebP <picture> <source type="image/webp" srcset="/event-main.jpg? width=620&format=webp" > <img

    src="/event-main.jpg?width=620" > </picture>
  81. Use Case: WebP <img src="/event-main.jpg?width=620&auto=webp" >

  82. API Responses https://fastly.hautelookcdn.com/assets/132746vincewc/event-main.jpg

  83. API Responses NRHL is API driven. Use a hypermedia API

    format called HAL Image Opto is compatible with URI template RFC 6570. Some resizer formats are not compatible! Example: ?downsize=233:350 Clients (web or app) do not construct URLs They still need some control
  84. API Responses { "_links": { "image": { "href": "/hero.jpg{?width,height}", "templated":

    true } } }
  85. API Responses Only set device pixel ratio /hero.jpg?width=200{&dpr} Default to

    automatic webp, allow width /hero.jpg?auto=webp{&width} No URI template parsing library? /hero.jpg?auto=webp&width={width}
  86. None