Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Fast & Responsive
Images
NY Front-End Coders Meetup March 11, 2015
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
Size in Pixels (resolution)
Size in Kb
on the wire
in memory
+ decoding
"Why we need responsive images"
part I & part II b...
Size in Pixels (density)
Multiply by 1 - 3x
Kindle Fire HDX - 2560x1600
iPhone 6 - 1704x960
iPhone 5 - 1136x640
iPad 3, 4,...
Art Direction
Encoding: JPEG compression
Lossy: 1-100 quality setting
Lossless: removes metadata
100 90 80 70 60
50 40 30 20 10
100 90 8...
Encoding: Best Format
JPEG
WebP
Chrome23+
Opera 12.1+
JPEG XR
IE10+
PNG
Gif -> PNG
PNG -> JPEG
SVG
Web Site Optimization W...
Integration: CMS Workflow
Edit
Optimize
Deploy
Integration: Image Service
Adaptive Images
<img
src="http://myserver/320/200/http://a.com/b.jpg"
width="320"
height="200"
...
<picture>, srcset, sizes
Now part of HTML spec
In current Chrome, Opera, Firefox (38),
"under consideration" in IE
http://...
On The Page
<?php img('/path/to/original.jpg') ?>
8 Guidelines and 1 Rule for Responsive Images
http://blog.cloudfour.com/...
Integration: Automation
mod_pagespeed / ngx_pagespeed filters
• rewrite_images
• inline_images
• recompress_images
• conver...
0.000
0.400
0.800
1.200
1.600
Small Medium Large
1.454
1.233
0.407
Homepage Image Sizes (Mb)
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)
Thank you!
Sergey Chernyshev
@SergeyChe
@PerfPlanet
sergey.chernyshev@gmail.com
Próxima SlideShare
Cargando en…5
×

Fast and Responsive Images (at NY Front-End Coders Meetup)

2.706 visualizaciones

Publicado el

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.

Publicado en: Diseño
  • Inicia sesión para ver los comentarios

Fast and Responsive Images (at NY Front-End Coders Meetup)

  1. 1. Fast & Responsive Images NY Front-End Coders Meetup March 11, 2015
  2. 2. Sergey Chernyshev Organize NY Web Perf Tech. Dir. Web Sys. & App. Dev. at truTV / Turner @SergeyChe SergeyChernyshev.com
  3. 3. Responsive Design & Images May 25, 2010 http://alistapart.com/article/responsive-web-design/
  4. 4. Image Responsiveness Size "Art direction" Format / Encoding
  5. 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
  6. 6. Size in Pixels (density) Multiply by 1 - 3x Kindle Fire HDX - 2560x1600 iPhone 6 - 1704x960 iPhone 5 - 1136x640 iPad 3, 4, Air - 2048x1536 iMac 5K Retina - 5120x2880 http://dpi.lv/ - DPI Love by Lea Verou
  7. 7. Art Direction
  8. 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
  9. 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. 10. Integration: CMS Workflow Edit Optimize Deploy
  11. 11. Integration: Image Service Adaptive Images <img src="http://myserver/320/200/http://a.com/b.jpg" width="320" height="200" > LiquidPixels https://github.com/MattWilcox/Adaptive-Images
  12. 12. <picture>, srcset, sizes Now part of HTML spec In current Chrome, Opera, Firefox (38), "under consideration" in IE http://responsiveimages.org/
  13. 13. 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 Jehl https://github.com/scottjehl/picturefill
  14. 14. 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
  15. 15. 0.000 0.400 0.800 1.200 1.600 Small Medium Large 1.454 1.233 0.407 Homepage Image Sizes (Mb)
  16. 16. 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)
  17. 17. Thank you! Sergey Chernyshev @SergeyChe @PerfPlanet sergey.chernyshev@gmail.com

×