A primer on image optimization

Given at Fastly Altitude in NYC with Edward Thurgood

Transcript

1. Edward Thurgood & Ines Sombra | Fastly A Primer on Image Optimization
2. About us
5. Web & Images
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}