Slide 1
Slide 1 text
Fast & Responsive
Images
O'Reilly Velocity NY September 17, 2014
Slide 2
Slide 2 text
Sergey Chernyshev
Organize NY Web Perf
Tech. Dir. Web Sys. &
App. Dev. at truTV /
Turner
@SergeyChe
SergeyChernyshev.com
Slide 3
Slide 3 text
Responsive Design & Images
May 25, 2010 http://alistapart.com/article/responsive-web-design/
Slide 4
Slide 4 text
Image Responsiveness
Size
"Art direction"
Format / Encoding
Bandwidth
Slide 5
Slide 5 text
Size in Pixels (resolution)
Size in Kb
on the wire
in memory
+ decoding
"Why we need responsive images"
part I & part II by @TKadlec
1920px 320px
Slide 6
Slide 6 text
Size in Pixels (density)
Multiply by 1 - 3x
Kindle Fire HDX - 2560x1600
iPhone 6 - 1704x960
iPhone 5 - 1136x640
iPad 3, 4, Air - 2048x1536
MacBook Pro Retina - 2880x1800
http://dpi.lv/ - DPI Love by Lea Verou
Slide 7
Slide 7 text
Art Direction
Slide 8
Slide 8 text
Encoding: JPEG compression
Lossy: 1-100 quality setting
Lossless: removes metadata
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
Slide 9
Slide 9 text
Encoding: Best Format
JPEG
WebP
Chrome23+
Opera 12.1+
JPEG XR
IE10+
PNG
Gif -> PNG
PNG -> JPEG
SVG
Web Site Optimization With Browser-Specific
Image Formats calendar.perfplanet.com
Slide 10
Slide 10 text
Bandwidth
Vary compression level
Requires bandwidth detection
Just plain hard
Progressive JPEGs FTW!
by @PatMeenan
Alternative: use progressive JPEG
Slide 11
Slide 11 text
Integration: CMS Workflow
Edit
Optimize
Deploy
Slide 12
Slide 12 text
Integration: Image Service
Adaptive Images
https://github.com/MattWilcox/Adaptive-Images
SenchaSRC, LiquidPixels
Slide 13
Slide 13 text
, srcset, sizes
Now part of HTML spec
In upcoming Chrome, Firefox and Opera, "under
consideration" in IE
Slide 14
Slide 14 text
On The Page
8 Guidelines and 1 Rule for Responsive Images
http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
Picturefill v2 by Scott Jehl
https://github.com/scottjehl/picturefill
Slide 15
Slide 15 text
Integration: Automation
mod_pagespeed / ngx_pagespeed filters
• rewrite_images
• inline_images
• recompress_images
• convert_gif_to_png, convert_png_to_jpeg
FEO from Akamai, Radware and others
Slide 16
Slide 16 text
0.000
0.400
0.800
1.200
1.600
Small Medium Large
1.454
1.233
0.407
Homepage Image Sizes (Mb)
Slide 17
Slide 17 text
0.000
1.000
2.000
3.000
4.000
Small Medium Large Source
3.818
1.454
1.233
0.407
Homepage Image Sizes (Mb)