Edge 2014: Responsive & Fast: Iterating Live on Modern RWD Sites
Fast and responsive images (velocity)
-
Upload
sergey-chernyshev -
Category
Technology
-
view
386 -
download
1
description
Transcript of Fast and responsive images (velocity)
![Page 1: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/1.jpg)
Fast & ResponsiveImages
O'Reilly Velocity NY September 17, 2014
![Page 2: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/2.jpg)
Sergey Chernyshev
Organize NY Web Perf
Tech. Dir. Web Sys. & App. Dev. at truTV / Turner
@SergeyChe
SergeyChernyshev.com
![Page 3: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/3.jpg)
Responsive Design & Images
May 25, 2010 http://alistapart.com/article/responsive-web-design/
![Page 4: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/4.jpg)
Image Responsiveness
Size
"Art direction"
Format / Encoding
Bandwidth
![Page 5: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/5.jpg)
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
![Page 6: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/6.jpg)
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
![Page 7: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/7.jpg)
Art Direction
![Page 8: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/8.jpg)
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%
![Page 9: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/9.jpg)
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
![Page 10: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/10.jpg)
BandwidthVary compression level
Requires bandwidth detection
Just plain hard
Progressive JPEGs FTW!by @PatMeenan
Alternative: use progressive JPEG
![Page 11: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/11.jpg)
Integration: CMS Workflow
Edit Optimize Deploy
![Page 12: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/12.jpg)
Integration: Image ServiceAdaptive 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" >
![Page 13: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/13.jpg)
<picture>, srcset, sizes
Now part of HTML spec
In upcoming Chrome, Firefox and Opera, "under consideration" in IE
![Page 14: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/14.jpg)
On The Page<?php img('/path/to/original.jpg') ?>
8 Guidelines and 1 Rule for Responsive Images http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
Picturefill v2 by Scott Jehlhttps://github.com/scottjehl/picturefill
![Page 15: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/15.jpg)
Integration: Automationmod_pagespeed / ngx_pagespeed filters
• rewrite_images
• inline_images
• recompress_images
• convert_gif_to_png, convert_png_to_jpeg
FEO from Akamai, Radware and others
![Page 16: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/16.jpg)
0.000
0.400
0.800
1.200
1.600
Small Medium Large
1.454
1.233
0.407
Homepage Image Sizes (Mb)
![Page 17: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/17.jpg)
0.000
1.000
2.000
3.000
4.000
Small Medium Large Source
3.818
1.4541.233
0.407
Homepage Image Sizes (Mb)
![Page 18: Fast and responsive images (velocity)](https://reader034.fdocuments.in/reader034/viewer/2022051312/5473cdfbb4af9fc80a8b5494/html5/thumbnails/18.jpg)
Thank you!
Sergey Chernyshev !
@SergeyChe !
@PerfPlanet !