Submit Search
Upload
Image Optimization Lightning Talk - Ajax Experience
•
5 likes
•
6,363 views
Nicole Sullivan
Follow
Smushit.com demo and presentation from Ajax Experience.
Read less
Read more
Technology
Art & Photos
Report
Share
Report
Share
1 of 20
Download now
Download to read offline
Recommended
After YSlow "A"
After YSlow "A"
Nicole Sullivan
Building the Media Block in ReactJS
Building the Media Block in ReactJS
Nicole Sullivan
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Nicole Sullivan
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
Design Fast Websites
Design Fast Websites
Nicole Sullivan
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
Pourquoi la performance?
Pourquoi la performance?
Nicole Sullivan
CSS Bloat!
CSS Bloat!
Nicole Sullivan
Recommended
After YSlow "A"
After YSlow "A"
Nicole Sullivan
Building the Media Block in ReactJS
Building the Media Block in ReactJS
Nicole Sullivan
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Nicole Sullivan
Object Oriented CSS
Object Oriented CSS
Nicole Sullivan
Design Fast Websites
Design Fast Websites
Nicole Sullivan
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
Pourquoi la performance?
Pourquoi la performance?
Nicole Sullivan
CSS Bloat!
CSS Bloat!
Nicole Sullivan
What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
The Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
CSS Power Tools
CSS Power Tools
Nicole Sullivan
Don't feed the trolls
Don't feed the trolls
Nicole Sullivan
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
Our Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
Taming CSS Selectors
Taming CSS Selectors
Nicole Sullivan
CSS Wish List @JSConf
CSS Wish List @JSConf
Nicole Sullivan
Why are you here?
Why are you here?
Nicole Sullivan
Specialise or cross-skill
Specialise or cross-skill
Russ Weakley
CSS: a rapidly changing world
CSS: a rapidly changing world
Russ Weakley
CSS Best practice
CSS Best practice
Russ Weakley
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Nicole Sullivan
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
Russ Weakley
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
CSS pattern libraries
CSS pattern libraries
Russ Weakley
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
ThousandEyes
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
More Related Content
Viewers also liked
What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
The Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
CSS Power Tools
CSS Power Tools
Nicole Sullivan
Don't feed the trolls
Don't feed the trolls
Nicole Sullivan
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
Our Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
Taming CSS Selectors
Taming CSS Selectors
Nicole Sullivan
CSS Wish List @JSConf
CSS Wish List @JSConf
Nicole Sullivan
Why are you here?
Why are you here?
Nicole Sullivan
Specialise or cross-skill
Specialise or cross-skill
Russ Weakley
CSS: a rapidly changing world
CSS: a rapidly changing world
Russ Weakley
CSS Best practice
CSS Best practice
Russ Weakley
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Nicole Sullivan
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
Russ Weakley
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
CSS pattern libraries
CSS pattern libraries
Russ Weakley
Viewers also liked
(17)
What is Object Oriented CSS?
What is Object Oriented CSS?
The Fast And The Fabulous
The Fast And The Fabulous
CSS Power Tools
CSS Power Tools
Don't feed the trolls
Don't feed the trolls
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Our Best Practices Are Killing Us
Our Best Practices Are Killing Us
Taming CSS Selectors
Taming CSS Selectors
CSS Wish List @JSConf
CSS Wish List @JSConf
Why are you here?
Why are you here?
Specialise or cross-skill
Specialise or cross-skill
CSS: a rapidly changing world
CSS: a rapidly changing world
CSS Best practice
CSS Best practice
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
CSS pattern libraries
CSS pattern libraries
Recently uploaded
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
ThousandEyes
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
LBM Solutions
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
OnBoard
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
XfilesPro
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
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
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
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
Neo4j
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
Recently uploaded
(20)
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Key Features Of Token Development (1).pptx
Key Features Of Token Development (1).pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
Slack Application Development 101 Slides
Slack Application Development 101 Slides
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 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
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
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Image Optimization Lightning Talk - Ajax Experience
1.
THE PROBLEM
Optimizing images sucks. Stoyan Stefanov Nicole Sullivan http://phpied.com http://stubbornella.org
2.
3.
Quantify and improve
the performance of all Yahoo! products worldwide
4.
HEAVY = SLOW
5.
Time to diet From
2003 to 2008: 97K to 312K. 25.7 to 49.9 objects.
6.
Images, who
cares? Top ten websites 45.6% page weight is images.
7.
7 MISTAKES Image Optimization
8.
mistake #1 Using GIF
when PNG is smaller 20.42%
9.
mistake #2 Not
crushing PNG 16.05%
10.
mistake #3 Not stripping
JPG metadata 11.85%
11.
mistake #4 Using truecolor
PNG rather than PNG8
12.
mistake #5 Using Alpha
Image Loader 100ms yahoo search
13.
mistake #6 Serving dynamically
generated images “as is” 38-55% google charts api
14.
mistake #7 Not combining
images
15.
SOLUTION?
16.
JPEG Tran
Excellent tools, so many options PngOptimizer OptiPNG
17.
Two distinct problems
Design Quality versus Optimization Engineering
18.
ONE TOOL. MANY
ALGORITHMS. Smush it automatically crushes images using the best open source algorithms available.
19.
demo: http://smushit.com
20.
Let’s keep talking... Stoyan
Stefanov Nicole Sullivan http://phpied.com http://stubbornella.org YSlow: Lead Developer nicole@stubbornella.org ssttoo@gmail.com “stubbornella” on the web
Download now