Altitude SF 2017: A hands-on tour of Image Optimization
•
2 likes•356 views
This document provides a hands-on tour and overview of ImageOpto, Fastly's image optimization API. It demonstrates how to optimize images for the web by resizing, cropping, changing formats and quality. It also shows how to configure ImageOpto through VCL and leverage it for responsive images, image presets, and handling save-data requests. The presentation encourages using ImageOpto and Fastly's caching to eliminate custom image processing and seamlessly deliver optimized images.
Recommended
More Related Content
Similar to Altitude SF 2017: A hands-on tour of Image Optimization
Similar to Altitude SF 2017: A hands-on tour of Image Optimization (20)
More from Fastly
More from Fastly (20)
Recently uploaded
Recently uploaded (20)
Altitude SF 2017: A hands-on tour of Image Optimization
- 1. A hands-on tour of I O Ines Sombra | Fastly Edward Thurgood | Fastly
- 2. About U Ed Thurgood Ines Sombra
- 3. Images & ImageOpto API walkthrough User generated content ImageOpto & VCL Sparkles Responsive Images Tips to take home Today’s A
- 5. • Have images on your website? • Think delivering poor-quality images can affect your user experience? Revenue? • Pre-process your web images? • Use an image optimization service? Time for a
- 6. Images & T W
- 8. JPEG 800 × 560 px Quality 85 47 KB vs 2.3MB WebP 200 × 200 px Quality 65 3KB vs 2.3MB
- 9. Scale & Resolution (DPR) 608 x 458 css pixels 318 x 212 css pixels
- 10. 1024 x 768 Art D using resizing only
- 11. 800 x 600 Art D using resizing only
- 12. 640 x 480 Art D using resizing only
- 13. 200 x 200 using resizing only Art D
- 14. 100 x 100 Could be anyone! using resizing only Art D
- 15. 1024 x 768 using crop only Art D
- 16. 800 x 600 using crop only Art D
- 17. 640 x 480 using crop only Art D
- 18. 200 x 200 using crop only Art D
- 19. 100 x 100 using crop only We know who it is! Art D
- 21. JPEG 800 × 560 px Quality 85 47 KB vs 2.3MB WebP 200 × 200 px Quality 65 3 KB vs 2.3MB Crop with aspect ratio http://www.fastly.io/gordo.jpg? crop=10:7,offset-x80&width=800 Square crop, resize to 200px, drop quality & change format http://www.fastly.io/gordo.jpg?crop=1: 1&width=200&quality=65&format=webp
- 32. Resizing Cropping / trimming Orientation Quality control Background color Resize filters Canvas JPEG (Progressive & Baseline) PNG ( 24/32) WEBP (Lossy & Lossless) GIFs!! F F
- 36. Lesson #1
- 42. Transcode Set Quality WebP image.jpg?format=webp image.jpg?quality=55 image.jpg?auto=webp Format & Quality
- 43. Your Turn
- 44. 2 Original dimension is 2000 x 1333 px Desired output is 800 x 533 px https://facepug.io/images/pug-life-bdr.jp g 533px 800px
- 46. 3 Desired output’s width of 800 px Get rid of the border https://facepug.io/images/pug-life-bdr.jp g 800px
- 48. 3 https://facepug.io/images/pug-life-bdr.jp g Desired output is 800px wide Significantly reduce quality Transcode to WebP Bonus Points for only delivering WebP to supported Browsers800px
- 50. Any questions?
- 51. User-generated C
- 52. “User generated content is like a box of chocolates! You never know what you’re gonna get”
- 53. Lesson #2
- 56. Bounds image.jpg?width=300&height=300&fit=bounds Fit Mode B 300x300 300x171 225x300
- 57. Bounds image.jpg?width=300&height=300&fit=bounds &canvas=1:1&bg-color=F33 Fit Mode B + C 300x300 300x300 300x300
- 58. Crop image.jpg?width=300&height=300&fit=crop Fit Mode C 300x300 300x300 300x300
- 59. Your Turn
- 60. 5 500px 500px https://facepug.io/images/pug-pup.jpg Replicate this image fit=crop is an alias for a type of crop & resize parameters Bonus Points if you use this and position your crop region using offset
- 64. Any questions?
- 66. Service with imageopto enabled GCP backed Follow along with us, all examples are live! Facepug.io
- 67. facepug.io
- 68. Enabling I O On vcl_recv on customer VCL Start sending requests to imageopto www.facepug.io/article1.html
- 69. Sending www.facepug.io/article2.html Capture images using file extension or directory
- 71. Setting defaults or overriding Lets you to specify default parameters across your site www.facepug.io/article4.html
- 72. Client Hints / Save-Data www.facepug.io/article9.html
- 76. And more ...
- 77. Image P www.facepug.io/article5.html Super handy for e-commerce & media sites
- 80. Image P www.facepug.io/article5.html Article main Article large Article medium
- 81. Image P www.facepug.io/article5.html Article main Article large Article medium Thumbnail
- 83. Challenge Time
- 88. Wrapping Up
- 89. Use Fastly I O Eliminate your image pre-processing pipeline Transformations composable with VCL Cache your large original image and its variations Seamlessly integrated with Fastly’s infrastructure
- 90. Overlay support PNG8 support Device detection in Varnish Metadata handling UI support! Sneak peek into Survey! > http://bit.ly/2ujMQBz
- 91. Thanks to our I O
- 92. T *! * for sitting through 694 pug pictures