Slide 1
Slide 1 text
Edward Thurgood & Ines Sombra | Fastly
A Primer on Image
Optimization
Slide 2
Slide 2 text
About us
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Web & Images
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
A very good boy
Slide 8
Slide 8 text
A site with no images
Slide 9
Slide 9 text
JPEG
1920 × 1080 px
Max quality
2.3MB
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
Origin
Pre-processing
Store many sizes per
image use in your origin
Slide 12
Slide 12 text
Origin
Pre-processing
Store many sizes per
image use in your origin
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
Wouldn’t it be awesome if
Fastly could do all of this for
me?
!
Slide 17
Slide 17 text
Well actually, yes
Slide 18
Slide 18 text
Previewing our Image Optimizer
"
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
Features
Resizing
Cropping / trimming
Orientation
Quality control
Background color
Resize filters
Canvas
JPEG
Progressive & Baseline
PNG
24/32
WEBP
Lossy & Lossless
Image formats
Slide 21
Slide 21 text
#
Slide 22
Slide 22 text
Animated GIFs!
Slide 23
Slide 23 text
http://io.fastlydemo.net/io docs.fastly.com/api/imageopto
Slide 24
Slide 24 text
Origin
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
CDN
Slide 25
Slide 25 text
Origin
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
CDN
Slide 26
Slide 26 text
Origin
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
CDN
Slide 27
Slide 27 text
Origin
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
CDN
Slide 28
Slide 28 text
Origin
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
CDN
Slide 29
Slide 29 text
Origin
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
CDN
Slide 30
Slide 30 text
Origin
CDN
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Slide 31
Slide 31 text
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Origin
CDN
ImageOpto 101
Slide 32
Slide 32 text
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Origin
CDN
ImageOpto 101
Slide 33
Slide 33 text
Origin
CDN
ImageOpto 101
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Image Opto
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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!
Slide 36
Slide 36 text
Workshop time!
Slide 37
Slide 37 text
facepug.io
Service with
imageopto
enabled
GCP backed
Follow along
with us, all
examples are
live!
Slide 38
Slide 38 text
VCL + Image Opto =
$
Slide 39
Slide 39 text
A bit of context
www.facepug.io/article1.html
On vcl_recv
Sending requests to
imageopto
The imageopto header
Slide 40
Slide 40 text
Sending only images to ImageOpto
Capture images using file extension or directory
www.facepug.io/article2.html
Slide 41
Slide 41 text
The query string
www.facepug.io/article3.html
facepug.io/image.jpg?
crop=1:1&width=200
Slide 42
Slide 42 text
Defaulting
or overriding
parameters
www.facepug.io/article4.html
Lets you to specify default
parameters across your site
Slide 43
Slide 43 text
www.facepug.io/article5.html
Image purposes
thumbnail
Image Policies
Slide 44
Slide 44 text
www.facepug.io/article5.html
Image purposes
thumbnail
medium
Image Policies
Slide 45
Slide 45 text
www.facepug.io/article5.html
Image purposes
thumbnail
medium
hero
Image Policies
Slide 46
Slide 46 text
Image Policies
www.facepug.io/article5.html
Slide 47
Slide 47 text
Policy with
fallback
www.facepug.io/article6.html
Applying default set of
parameters for missing
or invalid policies
Slide 48
Slide 48 text
Overriding Image
Policies
www.facepug.io/article7.html
Adding custom parameters to
existing policies
Slide 49
Slide 49 text
Protecting Origin
Images
www.facepug.io/article8.html
Being unfriendly with
policies
Slide 50
Slide 50 text
Client Hints / Save-Data
www.facepug.io/article9.html
Slide 51
Slide 51 text
Handling Save-Data
www.facepug.io/article9.html
Slide 52
Slide 52 text
Handling Save-Data
www.facepug.io/article9.html
Slide 53
Slide 53 text
Handling Save-Data
www.facepug.io/article9.html
Slide 54
Slide 54 text
ImageOpto IRL
Slide 55
Slide 55 text
Hello Nordstrom Rack!
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
github.com/hautelook/altitude-2017-fastly-image-opto
Fastly ImageOpto & NRHL
Slide 58
Slide 58 text
Images are everything
Slide 59
Slide 59 text
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.
Slide 60
Slide 60 text
Pre-processing different image sizes
Slide 61
Slide 61 text
Pre-processing different image sizes
Slide 62
Slide 62 text
Resizer Performance Is Crucial
Slide 63
Slide 63 text
Performance Tests
Slide 64
Slide 64 text
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)
Slide 65
Slide 65 text
Performance Tests
RESULTS
90th percentile - 433ms
Average - 243ms
Max - 4.489s
Note: the above measurements include network time
Slide 66
Slide 66 text
Performance Tests
Slide 67
Slide 67 text
One Image Per Aspect Ratio
Slide 68
Slide 68 text
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.
Slide 69
Slide 69 text
Resizing Images
https://fastly.hautelookcdn.com/assets/152881hudsonwd/event-hero.jpg
Slide 70
Slide 70 text
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?
Slide 71
Slide 71 text
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.
Slide 72
Slide 72 text
Responsive Design
https://fastly.hautelookcdn.com/assets/157673vinceshoeswf/event-square.jpg
Slide 73
Slide 73 text
Use Case: Responsive Design
Slide 74
Slide 74 text
High Resolution Images
https://fastly.hautelookcdn.com/products/MP3577/large/6348804.jpg
Slide 75
Slide 75 text
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.
Slide 76
Slide 76 text
Use Case: Device Scaling Factor
Slide 77
Slide 77 text
Use Case: Device Scaling Factor
Slide 78
Slide 78 text
Image Formats
https://fastly.hautelookcdn.com/assets/150628cccaliforniawc/event-main.jpg
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
Use Case: WebP
Slide 81
Slide 81 text
Use Case: WebP
Slide 82
Slide 82 text
API Responses
https://fastly.hautelookcdn.com/assets/132746vincewc/event-main.jpg
Slide 83
Slide 83 text
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
Slide 84
Slide 84 text
API Responses
{
"_links": {
"image": {
"href": "/hero.jpg{?width,height}",
"templated": true
}
}
}
Slide 85
Slide 85 text
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}
Slide 86
Slide 86 text
No content