SlideShare a Scribd company logo

Fast and responsive images (velocity)

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 of 18
Download to read offline
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

Recommended

Introduction to web performance @ IEEE
Introduction to web performance @ IEEEIntroduction to web performance @ IEEE
Introduction to web performance @ IEEESergeyChernyshev
 
Print advert analysis
Print advert analysisPrint advert analysis
Print advert analysisajatuchband
 
Scalability vs. Performance
Scalability vs. PerformanceScalability vs. Performance
Scalability vs. PerformanceSergeyChernyshev
 
Web Typography for Front End Developers
Web Typography for Front End DevelopersWeb Typography for Front End Developers
Web Typography for Front End DevelopersPascal Rettig
 
Web performance: beyond load testing
Web performance: beyond load testingWeb performance: beyond load testing
Web performance: beyond load testingSergeyChernyshev
 

More Related Content

More from SergeyChernyshev

Capturing speed of user experience using user timing api
Capturing speed of user experience using user timing apiCapturing speed of user experience using user timing api
Capturing speed of user experience using user timing apiSergeyChernyshev
 
Managing application performance by Kwame Thomison
Managing application performance by Kwame ThomisonManaging application performance by Kwame Thomison
Managing application performance by Kwame ThomisonSergeyChernyshev
 
Fastest request is never made
Fastest request is never madeFastest request is never made
Fastest request is never madeSergeyChernyshev
 
Designing speed with progressive enhancement
Designing speed with progressive enhancementDesigning speed with progressive enhancement
Designing speed with progressive enhancementSergeyChernyshev
 
Web performance tools @ WebPerf.camp 2016
Web performance tools @ WebPerf.camp 2016Web performance tools @ WebPerf.camp 2016
Web performance tools @ WebPerf.camp 2016SergeyChernyshev
 
Extending your applications to the edge with CDNs
Extending your applications to the edge with CDNsExtending your applications to the edge with CDNs
Extending your applications to the edge with CDNsSergeyChernyshev
 
What we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and PerformanceWhat we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and PerformanceSergeyChernyshev
 
Introduction to Web Performance
Introduction to Web PerformanceIntroduction to Web Performance
Introduction to Web PerformanceSergeyChernyshev
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applicationsSergeyChernyshev
 
Keeping track of your performance using Show Slow
Keeping track of your performance using Show SlowKeeping track of your performance using Show Slow
Keeping track of your performance using Show SlowSergeyChernyshev
 
Keeping track of your performance using show slow
Keeping track of your performance using show slowKeeping track of your performance using show slow
Keeping track of your performance using show slowSergeyChernyshev
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2SergeyChernyshev
 
Php Code Profiling Using X Debug
Php Code Profiling Using X DebugPhp Code Profiling Using X Debug
Php Code Profiling Using X DebugSergeyChernyshev
 
Open Source Hardware: A Start...
Open Source Hardware: A Start...Open Source Hardware: A Start...
Open Source Hardware: A Start...SergeyChernyshev
 
Open Source Hardware (adolescence)
Open Source Hardware (adolescence)Open Source Hardware (adolescence)
Open Source Hardware (adolescence)SergeyChernyshev
 
Semantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic FormsSemantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic FormsSergeyChernyshev
 

More from SergeyChernyshev (20)

Capturing speed of user experience using user timing api
Capturing speed of user experience using user timing apiCapturing speed of user experience using user timing api
Capturing speed of user experience using user timing api
 
Managing application performance by Kwame Thomison
Managing application performance by Kwame ThomisonManaging application performance by Kwame Thomison
Managing application performance by Kwame Thomison
 
Fastest request is never made
Fastest request is never madeFastest request is never made
Fastest request is never made
 
Designing speed with progressive enhancement
Designing speed with progressive enhancementDesigning speed with progressive enhancement
Designing speed with progressive enhancement
 
Web performance tools @ WebPerf.camp 2016
Web performance tools @ WebPerf.camp 2016Web performance tools @ WebPerf.camp 2016
Web performance tools @ WebPerf.camp 2016
 
Extending your applications to the edge with CDNs
Extending your applications to the edge with CDNsExtending your applications to the edge with CDNs
Extending your applications to the edge with CDNs
 
Speed is feature #1
Speed is feature #1Speed is feature #1
Speed is feature #1
 
What we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and PerformanceWhat we can learn from CDNs about Web Development, Deployment, and Performance
What we can learn from CDNs about Web Development, Deployment, and Performance
 
Introduction to Web Performance
Introduction to Web PerformanceIntroduction to Web Performance
Introduction to Web Performance
 
Performance anti patterns in ajax applications
Performance anti patterns in ajax applicationsPerformance anti patterns in ajax applications
Performance anti patterns in ajax applications
 
Keeping track of your performance using Show Slow
Keeping track of your performance using Show SlowKeeping track of your performance using Show Slow
Keeping track of your performance using Show Slow
 
Keeping track of your performance using show slow
Keeping track of your performance using show slowKeeping track of your performance using show slow
Keeping track of your performance using show slow
 
In Search of Speed
In Search of SpeedIn Search of Speed
In Search of Speed
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2
 
Php Code Profiling Using X Debug
Php Code Profiling Using X DebugPhp Code Profiling Using X Debug
Php Code Profiling Using X Debug
 
Why RDFa?
Why RDFa?Why RDFa?
Why RDFa?
 
Introduction to RDFa
Introduction to RDFaIntroduction to RDFa
Introduction to RDFa
 
Open Source Hardware: A Start...
Open Source Hardware: A Start...Open Source Hardware: A Start...
Open Source Hardware: A Start...
 
Open Source Hardware (adolescence)
Open Source Hardware (adolescence)Open Source Hardware (adolescence)
Open Source Hardware (adolescence)
 
Semantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic FormsSemantic Media Wiki & Semantic Forms
Semantic Media Wiki & Semantic Forms
 

Recently uploaded

PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...2toLead Limited
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingerssuser9354ce
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlueCloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlueShapeBlue
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...SearchNorwich
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Product School
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...BookNet Canada
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...ShapeBlue
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 

Recently uploaded (20)

PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostinger
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlueCloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
CloudStack Authentication Methods – Harikrishna Patnala, ShapeBlue
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 

Fast and responsive images (velocity)

  • 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
  • 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