SlideShare une entreprise Scribd logo
1  sur  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]

Contenu connexe

Similaire à 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
 

Similaire à 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
 

Plus de 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
 

Plus de 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
 

Dernier

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Principled Technologies
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 

Dernier (20)

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 

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.