Check these out next
Fast and responsive images (velocity)
2 likes
views
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.
Recommended
Fast and responsive images (velocity)
- Fast & Responsive Images O'Reilly Velocity NY September 17, 2014
- Sergey Chernyshev Organize NY Web Perf Tech. Dir. Web Sys. & App. Dev. at truTV / Turner @SergeyChe SergeyChernyshev.com
- Responsive Design & Images May 25, 2010 http://alistapart.com/article/responsive-web-design/
- Image Responsiveness Size "Art direction" Format / Encoding Bandwidth
- 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
- 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
- Art Direction
- 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
- 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
- Bandwidth Vary compression level Requires bandwidth detection Just plain hard Alternative: use progressive JPEG Progressive JPEGs FTW! by @PatMeenan
- Integration: CMS Workflow Edit Optimize Deploy
- 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" >
- <picture>, srcset, sizes Now part of HTML spec In upcoming Chrome, Firefox and Opera, "under consideration" in IE
- 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/
- 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
- Homepage Image Sizes (Mb) 1.600 1.200 0.800 0.400 0.000 1.454 1.233 0.407 Small Medium Large
- 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
- Thank you! Sergey Chernyshev ! @SergeyChe ! @PerfPlanet ! sergey.chernyshev@gmail.com