SlideShare ist ein Scribd-Unternehmen logo
1 von 46
Downloaden Sie, um offline zu lesen
Image Optimization  7 mistakes (and how to correct them) Stoyan Stefanov Yahoo! Exceptional Performance Velocity, June 24th, 2008, San Francisco [email_address]     [email_address]
About the presentation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
About the presenter ,[object Object],[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
Mistake #1: Using GIF when PNG is smaller
GIF vs. PNG * some IE < v.7 issues No (future) No (future) Yes Animation All A-grade (96%+) All A-grade (96%+) Nearly all Browser support Alpha (variable) * Alpha  (variable) * Boolean (on/off) Transparency Up to 48bit 256 256 Number of colors Truecolor PNG Palette PNG (aka PNG8, aka indexed) GIF
PNG transparency and IE ,[object Object],[object Object],PNG8 IE 7 and up  IE 6 and earlier Verdict: IE7+ is OK; IE6 supports GIF-like transparency
GIF vs. PNG ,[object Object],[object Object],[object Object],[object Object]
GIF-to-PNG ,[object Object],24.58% Yahoo! JP 10 24.27% Blogger 9 17.47% Facebook 8 No GIFs! Wikipedia 7 17.65% MySpace 6 13.53% MSN 5 19.93% Live.com 4 33.82% YouTube 3 22.95% Google 2 9.55% Yahoo! 1
Take away #1: Choose PNG over GIF LOSSLESS!
Mistake #2: Not crushing PNGs
About the PNG chunks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Crush top 10 and check for savings ,[object Object],No PNGs Yahoo! JP 10 1.07% Blogger 9 9.08% Facebook 8 21.32% Wikipedia 7 25.44% MySpace 6 No PNGs MSN 5 No PNGs Live.com 4 17.32% YouTube 3 22.60% Google Reader 2 15.52% Yahoo! 1
Take away #2: Crush your PNGs LOSSLESS!
Mistake #3: Not stripping JPEG metadata
JPEG metadata ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lossless JPEG operations ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Running jpegtran on top 10 sites ,[object Object],17.31% Yahoo! JP 10 38.35% Blogger 9 13.59% Facebook 8 No jpegs Wikipedia 7 4.28% MySpace 6 7.43% MSN 5 0.47% Live.com 4 10.71% YouTube 3 No jpegs Google 2 2.62% Yahoo! 1
Take away #3: Strip needless JPEG metadata LOSSLESS!
Mistake #4: Using truecolor PNGs when palette PNG is good enough
Truecolor vs. palette PNGs ,[object Object],[object Object],[object Object],[object Object],[object Object]
Truecolor vs. palette PNGs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Truecolor vs. palette PNGs ,[object Object],[object Object],[object Object],[object Object],[object Object]
Take away #4: Make all PNGs palette PNGs * ,[object Object],[object Object]
Mistake #5: Using CSS alpha filters
CSS filters ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Avoid filters ,[object Object],[object Object],[object Object]
Take away #5: Avoid  AlphaImageLoader , try PNG8 or at least  _filter
Mistake #6: Serve generated images “as-is”
Dynamically generated images ,[object Object],[object Object],[object Object],[object Object]
Recipe for generated images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Case study: Google charts API 38% saving 12% saving PNG8 (256 colors) Crushed (707 colors) Original (707 colors)
Case study: Google charts API 55% saving (1000+ colors are lost but who can tell?) 25% saving PNG8 (256 colors) Crushed (1408 colors) Original (1408 colors)
Take away #6: Crush generated images LOSSLESS!
Mistake #7: Not combining images
CSS Sprites CSS: HTML: …
CSS Sprites ,[object Object],[object Object],[object Object],[object Object]
Optimizing sprites
Take away #7: Use CSS Sprites Stay within the palette number of  colors (use PNG8)
Bonus mistake: Improper favicon.ico ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bonus mistake #2: serving images from your app server ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Wrapping up ,[object Object]
URLs – Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thank you! [email_address]     [email_address]
Credits ,[object Object],[object Object],[object Object]

Weitere ähnliche Inhalte

Ähnlich wie Yahoo - Web Images optimization

Dont turn your photoshop off
Dont turn your photoshop offDont turn your photoshop off
Dont turn your photoshop offIgor Napierala
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 
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
 
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
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in AndroidRakesh Jha
 
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
 
Speed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan HanesSpeed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan HanesMeagan Hanes
 
Big Trouble in Little Networks
Big Trouble in Little Networks Big Trouble in Little Networks
Big Trouble in Little Networks Stacy Devino
 
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
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationDavid Goemans
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performanceDevGAMM Conference
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Bastian Grimm
 

Ähnlich wie Yahoo - Web Images optimization (20)

After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
Images - 7 mistakes
Images - 7 mistakesImages - 7 mistakes
Images - 7 mistakes
 
Dont turn your photoshop off
Dont turn your photoshop offDont turn your photoshop off
Dont turn your photoshop off
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
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
 
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
 
Optimisation and performance in Android
Optimisation and performance in AndroidOptimisation and performance in Android
Optimisation and performance in Android
 
Full stack development in Go
Full stack development in GoFull stack development in Go
Full stack development in Go
 
Image Optimization
Image OptimizationImage Optimization
Image Optimization
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
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
 
Introduce Django
Introduce DjangoIntroduce Django
Introduce Django
 
Presentation on Fresco
Presentation on FrescoPresentation on Fresco
Presentation on Fresco
 
Speed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan HanesSpeed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan Hanes
 
Big Trouble in Little Networks
Big Trouble in Little Networks Big Trouble in Little Networks
Big Trouble in Little Networks
 
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)
 
HTML5 Canvas Performance optimization
HTML5 Canvas Performance optimizationHTML5 Canvas Performance optimization
HTML5 Canvas Performance optimization
 
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
BoosterMedia: Overcome the bottleneck of HTML5 mobile game performance
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 

Kürzlich hochgeladen

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Kürzlich hochgeladen (20)

201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

Yahoo - Web Images optimization

Hinweis der Redaktion

  1. S