Fast and responsive images

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.

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

7. Art Direction
   

   View Slide

8. 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%
   

   View Slide

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
   

   View Slide

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

    View Slide

11. Integration: CMS Workflow
    Edit
    Optimize
    Deploy
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

17. 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)
    

    View Slide

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

    View Slide