Responsive design is taking the world by a storm and every team is converting their site to be on mobile or preparing to do that soon. Few people however realize performance implications of this new approach to web development and one of the issues is images which represent more then 60% of all network payload and can congest wireless networks with data unnecessary for display on naturally smaller screens than desktop. This issue gave birth to various Responsive Images techniques which are used to display “just right” size of the image for user’s device. There are several aspects of the issue that need to be considered, from formats and resolutions to content management and implementation code. When done wrong, performance can degrade much worse then original “desktop” approach, but with a few key features implemented right, can reduce payload size dramatically providing improved user experience.

1. Fast & Responsive
Images
O'Reilly Velocity NY September 17, 2014

2. Sergey Chernyshev
Organize NY Web Perf
Tech. Dir. Web Sys. &
App. Dev. at truTV /
Turner
@SergeyChe
SergeyChernyshev.com

3. Responsive Design & Images
May 25, 2010 http://alistapart.com/article/responsive-web-design/

4. Image Responsiveness
Size
"Art direction"
Format / Encoding
Bandwidth

5. Size in Pixels (resolution)
Size in Kb
on the wire
in memory
+ decoding
1920px 320px
"Why we need responsive images"
part I & part II by @TKadlec

6. 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

7. Art Direction

8. Encoding: JPEG compression
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
100% 90% 80% 70% 60%
50% 40% 30% 20% 10%
Lossy: 1-100 quality setting
Lossless: removes metadata

9. 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

10. Bandwidth
Vary compression level
Requires bandwidth detection
Just plain hard
Alternative: use progressive JPEG
Progressive JPEGs FTW!
by @PatMeenan

11. Integration: CMS Workflow
Edit
Optimize
Deploy

12. Integration: Image Service
Adaptive Images
https://github.com/MattWilcox/Adaptive-Images
SenchaSRC, LiquidPixels
<img
src="http://src.sencha.io/320/200/http://a.com/b.jpg"
width="320"
height="200"
>

13. <picture>, srcset, sizes
Now part of HTML spec
In upcoming Chrome, Firefox and Opera, "under
consideration" in IE

14. On The Page
<?php img('/path/to/original.jpg') ?>
Picturefill v2 by Scott Jehl
https://github.com/scottjehl/picturefill
8 Guidelines and 1 Rule for Responsive Images
http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/

15. 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

16. Homepage Image Sizes (Mb)
1.600
1.200
0.800
0.400
0.000
1.454
1.233
0.407
Small Medium Large

17. Homepage Image Sizes (Mb)
4.000
3.000
2.000
1.000
0.000
3.818
1.233 1.454
0.407
Small Medium Large Source

18. Thank you!
Sergey Chernyshev
!
@SergeyChe
!
@PerfPlanet
!
sergey.chernyshev@gmail.com