Submit Search
Upload
Image optimization
•
Download as PPTX, PDF
•
10 likes
•
8,831 views
Patrick Meenan
Follow
Slides from my talk in Google's booth at Velocity 2013 on optimizing image delivery.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 24
Download now
Recommended
Highline Ideas - SEO Presentation 10/29/13
Highline Ideas - SEO Presentation 10/29/13
jsigler99
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
Timon Hartung
10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO
Timon Hartung
Tracking Performance - Velocity NYC 2013
Tracking Performance - Velocity NYC 2013
Patrick Meenan
Measuring the visual experience of website performance
Measuring the visual experience of website performance
Patrick Meenan
Velocity EU 2012 - Third party scripts and you
Velocity EU 2012 - Third party scripts and you
Patrick Meenan
Mobile web performance - MoDev East
Mobile web performance - MoDev East
Patrick Meenan
Android tools for testers
Android tools for testers
Maksim Kovalev
Recommended
Highline Ideas - SEO Presentation 10/29/13
Highline Ideas - SEO Presentation 10/29/13
jsigler99
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
Timon Hartung
10 Things Web Designers tend to forget when doing SEO
10 Things Web Designers tend to forget when doing SEO
Timon Hartung
Tracking Performance - Velocity NYC 2013
Tracking Performance - Velocity NYC 2013
Patrick Meenan
Measuring the visual experience of website performance
Measuring the visual experience of website performance
Patrick Meenan
Velocity EU 2012 - Third party scripts and you
Velocity EU 2012 - Third party scripts and you
Patrick Meenan
Mobile web performance - MoDev East
Mobile web performance - MoDev East
Patrick Meenan
Android tools for testers
Android tools for testers
Maksim Kovalev
WebPagetest Power Users - Velocity 2014
WebPagetest Power Users - Velocity 2014
Patrick Meenan
Velocity 2014 nyc WebPagetest private instances
Velocity 2014 nyc WebPagetest private instances
Patrick Meenan
Machine Learning RUM - Velocity 2016
Machine Learning RUM - Velocity 2016
Patrick Meenan
Service workers - Velocity 2016 Training
Service workers - Velocity 2016 Training
Patrick Meenan
Service Workers for Performance
Service Workers for Performance
Patrick Meenan
Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016
Patrick Meenan
TLS - 2016 Velocity Training
TLS - 2016 Velocity Training
Patrick Meenan
Edi ux fastandbeautiful
Edi ux fastandbeautiful
Doug Sillars
Joomla 10-jaar-vooruitgang-jdnl15
Joomla 10-jaar-vooruitgang-jdnl15
Peter Martin
CV writing
CV writing
Anne-Mart Olsen
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
Steve Souders
Ux connect london_fastandbeautiful
Ux connect london_fastandbeautiful
Doug Sillars
Logan composition (2)
Logan composition (2)
loganm
Mborell newsilent week6
Mborell newsilent week6
mborell
Pecha Kucha - Spiders
Pecha Kucha - Spiders
dbredmiles
Behaviour-Driven Development: escrevendo especificações ágeis
Behaviour-Driven Development: escrevendo especificações ágeis
Hugo Lopes Tavares
Mobile era fastandbeautiful
Mobile era fastandbeautiful
Doug Sillars
Cork ux Meetup
Cork ux Meetup
Doug Sillars
Visual Résumé
Visual Résumé
Bruno Fernandes de Souza
7 things you need to know about seo
7 things you need to know about seo
AffiliateMarketerTraining.com
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
Walter Ebert
SEO - Remaining Agile in 2013
SEO - Remaining Agile in 2013
Jon Quinton
More Related Content
Viewers also liked
WebPagetest Power Users - Velocity 2014
WebPagetest Power Users - Velocity 2014
Patrick Meenan
Velocity 2014 nyc WebPagetest private instances
Velocity 2014 nyc WebPagetest private instances
Patrick Meenan
Machine Learning RUM - Velocity 2016
Machine Learning RUM - Velocity 2016
Patrick Meenan
Service workers - Velocity 2016 Training
Service workers - Velocity 2016 Training
Patrick Meenan
Service Workers for Performance
Service Workers for Performance
Patrick Meenan
Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016
Patrick Meenan
TLS - 2016 Velocity Training
TLS - 2016 Velocity Training
Patrick Meenan
Viewers also liked
(7)
WebPagetest Power Users - Velocity 2014
WebPagetest Power Users - Velocity 2014
Velocity 2014 nyc WebPagetest private instances
Velocity 2014 nyc WebPagetest private instances
Machine Learning RUM - Velocity 2016
Machine Learning RUM - Velocity 2016
Service workers - Velocity 2016 Training
Service workers - Velocity 2016 Training
Service Workers for Performance
Service Workers for Performance
Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016
TLS - 2016 Velocity Training
TLS - 2016 Velocity Training
Similar to Image optimization
Edi ux fastandbeautiful
Edi ux fastandbeautiful
Doug Sillars
Joomla 10-jaar-vooruitgang-jdnl15
Joomla 10-jaar-vooruitgang-jdnl15
Peter Martin
CV writing
CV writing
Anne-Mart Olsen
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
Steve Souders
Ux connect london_fastandbeautiful
Ux connect london_fastandbeautiful
Doug Sillars
Logan composition (2)
Logan composition (2)
loganm
Mborell newsilent week6
Mborell newsilent week6
mborell
Pecha Kucha - Spiders
Pecha Kucha - Spiders
dbredmiles
Behaviour-Driven Development: escrevendo especificações ágeis
Behaviour-Driven Development: escrevendo especificações ágeis
Hugo Lopes Tavares
Mobile era fastandbeautiful
Mobile era fastandbeautiful
Doug Sillars
Cork ux Meetup
Cork ux Meetup
Doug Sillars
Visual Résumé
Visual Résumé
Bruno Fernandes de Souza
7 things you need to know about seo
7 things you need to know about seo
AffiliateMarketerTraining.com
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
Walter Ebert
SEO - Remaining Agile in 2013
SEO - Remaining Agile in 2013
Jon Quinton
SEO for Site Owners: Remaining Agile 2013 - Jon Quinton
SEO for Site Owners: Remaining Agile 2013 - Jon Quinton
auexpo Conference
Sonnet 69
Sonnet 69
dmulah
Command keynote! part 2p2p2
Command keynote! part 2p2p2
ambersweet95
EscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend Optimization
Jonathan Klein
Devoxx be fast and beautiful images
Devoxx be fast and beautiful images
Doug Sillars
Similar to Image optimization
(20)
Edi ux fastandbeautiful
Edi ux fastandbeautiful
Joomla 10-jaar-vooruitgang-jdnl15
Joomla 10-jaar-vooruitgang-jdnl15
CV writing
CV writing
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
Ux connect london_fastandbeautiful
Ux connect london_fastandbeautiful
Logan composition (2)
Logan composition (2)
Mborell newsilent week6
Mborell newsilent week6
Pecha Kucha - Spiders
Pecha Kucha - Spiders
Behaviour-Driven Development: escrevendo especificações ágeis
Behaviour-Driven Development: escrevendo especificações ágeis
Mobile era fastandbeautiful
Mobile era fastandbeautiful
Cork ux Meetup
Cork ux Meetup
Visual Résumé
Visual Résumé
7 things you need to know about seo
7 things you need to know about seo
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
SEO - Remaining Agile in 2013
SEO - Remaining Agile in 2013
SEO for Site Owners: Remaining Agile 2013 - Jon Quinton
SEO for Site Owners: Remaining Agile 2013 - Jon Quinton
Sonnet 69
Sonnet 69
Command keynote! part 2p2p2
Command keynote! part 2p2p2
EscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend Optimization
Devoxx be fast and beautiful images
Devoxx be fast and beautiful images
More from Patrick Meenan
Resource Prioritization
Resource Prioritization
Patrick Meenan
HTTP/2 Prioritization
HTTP/2 Prioritization
Patrick Meenan
Getting the most out of WebPageTest
Getting the most out of WebPageTest
Patrick Meenan
Http2 in practice
Http2 in practice
Patrick Meenan
Resource loading, prioritization, HTTP/2 - oh my!
Resource loading, prioritization, HTTP/2 - oh my!
Patrick Meenan
How fast is it?
How fast is it?
Patrick Meenan
Front-End Single Point of Failure - Velocity 2016 Training
Front-End Single Point of Failure - Velocity 2016 Training
Patrick Meenan
Measuring performance - Velocity 2016 Training
Measuring performance - Velocity 2016 Training
Patrick Meenan
Selecting and deploying automated optimization solutions
Selecting and deploying automated optimization solutions
Patrick Meenan
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Patrick Meenan
Velocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile Beast
Patrick Meenan
Measuring web performance
Measuring web performance
Patrick Meenan
Frontend SPOF
Frontend SPOF
Patrick Meenan
Web Performance Optimization
Web Performance Optimization
Patrick Meenan
Web performance testing
Web performance testing
Patrick Meenan
Making the web faster
Making the web faster
Patrick Meenan
Hands on performance testing and analysis with web pagetest
Hands on performance testing and analysis with web pagetest
Patrick Meenan
More from Patrick Meenan
(17)
Resource Prioritization
Resource Prioritization
HTTP/2 Prioritization
HTTP/2 Prioritization
Getting the most out of WebPageTest
Getting the most out of WebPageTest
Http2 in practice
Http2 in practice
Resource loading, prioritization, HTTP/2 - oh my!
Resource loading, prioritization, HTTP/2 - oh my!
How fast is it?
How fast is it?
Front-End Single Point of Failure - Velocity 2016 Training
Front-End Single Point of Failure - Velocity 2016 Training
Measuring performance - Velocity 2016 Training
Measuring performance - Velocity 2016 Training
Selecting and deploying automated optimization solutions
Selecting and deploying automated optimization solutions
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Velocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile Beast
Measuring web performance
Measuring web performance
Frontend SPOF
Frontend SPOF
Web Performance Optimization
Web Performance Optimization
Web performance testing
Web performance testing
Making the web faster
Making the web faster
Hands on performance testing and analysis with web pagetest
Hands on performance testing and analysis with web pagetest
Recently uploaded
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
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 2024
Rafal Los
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
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
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Evaluating the top large language models.pdf
Evaluating the top large language models.pdf
ChristopherTHyatt
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Recently uploaded
(20)
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
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 2024
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
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...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Evaluating the top large language models.pdf
Evaluating the top large language models.pdf
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Image optimization
1.
Image Optimization @patmeenan http://blog.patrickmeenan.com
2.
http://httparchive.org/interesting.php#bytesperpage
3.
http://httparchive.org/trends.php?s=All&minlabel=Jun+1+2011&maxlabel=Jun+1+2013#bytesTotal&reqTotal
4.
http://httparchive.org/interesting.php#responsesizes
5.
6.
7.
Delay-loading hidden images http://www.webpagetest.org/video/view.php?id=130614_ff46fedad38ad59b5b21f7f7de69e4a7a5935d44&bare=1
8.
Lazy-load/defer attribute http://lists.w3.org/Archives/Public/public-web-perf/2013May/0084.html
9.
10.
4 MB
11.
4 MB 3 KB
Image Data
12.
4 MB 3 KB
Image Data 1.5 KB Thumbnail 4 MB of Photoshop Data http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fsupport-cn.samsung.com%2Fcampaign%2Fmobilephone%2Fgalaxys4%2Fimages%2FsubQQ%2Fme1.jpg
13.
14.
15.
PROGRESSIVE JPEG
16.
10% http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
17.
24% http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
18.
42% http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
19.
68% http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
20.
100% http://www.patrickmeenan.com/progressive/view.php?img=http%3A%2F%2Fwww.chelseafc.com%2FjavaImages%2Fe%2F37%2F0%2C%2C10268~12007182%2C00.jpg
21.
Progressive Proxy • WebPagetest
Script: addHeader X-Jpeg-Mode: <mode> setDns * 72.66.115.11 navigate %URL% • Modes: 0 – Passthrough (do not modify images) 1 – Progressive (convert all JPEGs to optimized progressive) 3 – Baseline (convert all JPEGs to optimized baseline) http://www.webpagetest.org/video/view.php?id=130512_5a93f57cee2beb88a8a595c5f5bf169d71a12945&bare=1
22.
Progressive Speed Index •
7% Faster on Cable • 15% Faster on DSL
23.
Preserving copyright exiftool -tagsfromfile
src.jpg -copyright dst.jpg
24.
• Deliver visible
images first • Make the files as small as possible • Progressively deliver what’s left
Download now