SlideShare a Scribd company logo
1 of 20
Image Optimization:  7 mistakes in 5 minutes Stoyan Stefanov [email_address] [email_address]
About the presenter ,[object Object],[object Object],[object Object],[object Object]
Hmm, images? ,[object Object],[object Object],[object Object],[object Object]
What % of page weight is images? ,[object Object],[object Object],[object Object],[object Object],36% Yahoo! JP 10 27% Blogger 9 35% Facebook 8 39% Wikipedia 7 48% MySpace 6 41% MSN 5 64% Live.com 4 62% YouTube 3 75% Google 2 29% Yahoo! 1
GIF vs. PNG8 vs. truecolor PNG ,[object Object],[object Object],[object Object],[object Object]
All we are saying is: “Give PiNG a chance!” ,[object Object],[object Object],[object Object]
Mistake #1: Using GIF when PNG is smaller ,[object Object],[object Object],[object Object],[object Object]
Mistake #2: Not crushing PNGs ,[object Object],[object Object],[object Object],[object Object]
Mistake #3: Not stripping JPEG metadata ,[object Object],[object Object],[object Object],[object Object]
Mistake #4: Using truecolor PNG instead of PNG8 ,[object Object],[object Object],[object Object],[object Object],[object Object]
Mistake #5: Using  AlphaImageLoader ,[object Object],[object Object]
Mistake #5: solution ,[object Object],[object Object],[object Object]
Mistake #6: serving dynamically generated images “as is” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mistake #7: Not combining images ,[object Object],[object Object],…
Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)
Demo…
Thank you!
URLs: Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
URLs: Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

Similar to Images - 7 mistakes (first draft)

Yahoo - Web Images optimization
Yahoo - Web Images optimizationYahoo - Web Images optimization
Yahoo - Web Images optimizationEduard Bondarenko
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|worksStoyan Stefanov
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernFITC
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Guy Podjarny
 
Full stack development in Go
Full stack development in GoFull stack development in Go
Full stack development in GoYves Junqueira
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesStoyan Stefanov
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize imagesShogo Sensui
 
Android design lecture #1
Android design   lecture #1Android design   lecture #1
Android design lecture #1Vitali Pekelis
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 
Better images for video - Jeremy Brown
Better images for video - Jeremy BrownBetter images for video - Jeremy Brown
Better images for video - Jeremy BrownJeremy Brown
 
Introduction to web-application development with Vaadin
Introduction to web-application development with VaadinIntroduction to web-application development with Vaadin
Introduction to web-application development with VaadinRisto Yrjänä
 
Big Trouble in Little Networks, new and improved
Big Trouble in Little Networks, new and improvedBig Trouble in Little Networks, new and improved
Big Trouble in Little Networks, new and improvedStacy Devino
 

Similar to Images - 7 mistakes (first draft) (20)

Yahoo - Web Images optimization
Yahoo - Web Images optimizationYahoo - Web Images optimization
Yahoo - Web Images optimization
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|works
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern
 
Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)Putting Your Images on a Diet (SmashingConf, 2014)
Putting Your Images on a Diet (SmashingConf, 2014)
 
Full stack development in Go
Full stack development in GoFull stack development in Go
Full stack development in Go
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
We should optimize images
We should optimize imagesWe should optimize images
We should optimize images
 
PNGHack 1.0 Presentation
PNGHack 1.0 PresentationPNGHack 1.0 Presentation
PNGHack 1.0 Presentation
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
Android design lecture #1
Android design   lecture #1Android design   lecture #1
Android design lecture #1
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
Better images for video - Jeremy Brown
Better images for video - Jeremy BrownBetter images for video - Jeremy Brown
Better images for video - Jeremy Brown
 
Introduction to web-application development with Vaadin
Introduction to web-application development with VaadinIntroduction to web-application development with Vaadin
Introduction to web-application development with Vaadin
 
Image Optimization
Image OptimizationImage Optimization
Image Optimization
 
Big Trouble in Little Networks, new and improved
Big Trouble in Little Networks, new and improvedBig Trouble in Little Networks, new and improved
Big Trouble in Little Networks, new and improved
 
Get the flash outta here
Get the flash outta hereGet the flash outta here
Get the flash outta here
 
Ppt
PptPpt
Ppt
 

More from Stoyan Stefanov

JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance PatternsStoyan Stefanov
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patternsStoyan Stefanov
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social PluginsStoyan Stefanov
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъдеStoyan Stefanov
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhereStoyan Stefanov
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scriptingStoyan Stefanov
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Stoyan Stefanov
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performanceStoyan Stefanov
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimizationStoyan Stefanov
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scriptingStoyan Stefanov
 
The business of performance
The business of performanceThe business of performance
The business of performanceStoyan Stefanov
 

More from Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
Liking performance
Liking performanceLiking performance
Liking performance
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
 
The business of performance
The business of performanceThe business of performance
The business of performance
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
 

Recently uploaded

Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 

Recently uploaded (20)

Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 

Images - 7 mistakes (first draft)

  • 1. Image Optimization: 7 mistakes in 5 minutes Stoyan Stefanov [email_address] [email_address]
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
  • 16. 55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)
  • 19.
  • 20.