SlideShare a Scribd company logo
Image 

Weight Loss 

Clinic	


Stoyan Stefanov

Yahoo! Search

Ignite Velocity 2009, San Jose
5
4
3
2
1
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
50%
images
Ignite Velocity: Image Weight Loss Clinic
GIF
GIF	




GIF	
  GIF	
    GIF
GIF	




GIF	
       GIF	
         GIF	
           GIF
GIF	




GIF	
           GIF	
             GIF	
               GIF	




GIF	
  GIF	
    GIF
$ convert in.gif PNG8:out.png
jpegtran
jpegtran	
            -optimize	




            -progressive	


               10K+
jpegtran	

    -copy none	
    -copy all
Ignite Velocity: Image Weight Loss Clinic
PNGOptimizer
PNGOptimizer	

        AdvPNG
DeflOpt	


PNGOptimizer	

        AdvPNG
DeflOpt	


   PNGOptimizer	

              AdvPNG	
PNGRewrite
DeflOpt	


      PNGOptimizer	

PNGCrush	
                AdvPNG	
  PNGRewrite
DeflOpt	

           PNGOut	
      PNGOptimizer	

PNGCrush	
                AdvPNG	
  PNGRewrite
OptiPNG	        DeflOpt	

           PNGOut	
      PNGOptimizer	

PNGCrush	
                AdvPNG	
  PNGRewrite
OptiPNG	      DeflOpt	

            PNGOut	


PNGCrush	
               AdvPNG
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
PNGSlim
Before	

Image Weight:	
694.3 Kb	
Page Weight:
839.5 Kb


82% images
After	
30.15%
savings
          Image 

          Weight Loss:	
          209Kb
Summary	
30.15%
savings
           *  No GIFs	
           *  JPEGtran	
           *  PNG*
+

Tools	         Process	


         FTW
+

Tools	         Process	


         FTW
Thanks,

  Stoyan

  Yahoo! Search	
Photo credits:

  http://www.flickr.com/photos/astique/1859573734/in/photostream/

  http://www.flickr.com/photos/73645804@N00/2222523486/ 

  http://dezignerfolio.com

  http://www.flickr.com/photos/81506496@N00/3061563817/

  http://www.flickr.com/photos/85049097@N00/1858630581/

  http://www.flickr.com/photos/7566272@N02/3537213022/

  http://www.flickr.com/photos/vanz/2093902502/

  http://www.flickr.com/photos/84661389@N00/542537185/ 

  http://www.flickr.com/photos/ericskiff/471212653/ 

  http://www.flickr.com/photos/kjarrett/414147790/ 

  http://icanhazcheezburger.com 

  http://www.flickr.com/photos/sophiea/2057656323/in/set-72157602827807236/

  http://www.flickr.com/photos/brighton/2278072114/

More Related Content

Similar to Ignite Velocity: Image Weight Loss Clinic

Images - 7 mistakes
Images - 7 mistakesImages - 7 mistakes
Images - 7 mistakes
Stoyan Stefanov
 
Intro to SVG
Intro to SVGIntro to SVG
Intro to SVG
All Things Open
 
Velocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand WordsVelocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand Words
Akamai Technologies
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
Guy Podjarny
 
Follow the Bounce N Ball
Follow the Bounce N BallFollow the Bounce N Ball
Follow the Bounce N Ball
Pam Cranford
 
Pinax
PinaxPinax
Altitude SF 2017: A hands-on tour of Image Optimization
Altitude SF 2017: A hands-on tour of Image OptimizationAltitude SF 2017: A hands-on tour of Image Optimization
Altitude SF 2017: A hands-on tour of Image Optimization
Fastly
 
True beauty is on the inside, but your users are shallow.
True beauty is on the inside, but your users are shallow.True beauty is on the inside, but your users are shallow.
True beauty is on the inside, but your users are shallow.
Loek van Gent
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
Walter Ebert
 

Similar to Ignite Velocity: Image Weight Loss Clinic (9)

Images - 7 mistakes
Images - 7 mistakesImages - 7 mistakes
Images - 7 mistakes
 
Intro to SVG
Intro to SVGIntro to SVG
Intro to SVG
 
Velocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand WordsVelocity Conference 2013: A Picture Costs A Thousand Words
Velocity Conference 2013: A Picture Costs A Thousand Words
 
A Picture Costs A Thousand Words
A Picture Costs A Thousand WordsA Picture Costs A Thousand Words
A Picture Costs A Thousand Words
 
Follow the Bounce N Ball
Follow the Bounce N BallFollow the Bounce N Ball
Follow the Bounce N Ball
 
Pinax
PinaxPinax
Pinax
 
Altitude SF 2017: A hands-on tour of Image Optimization
Altitude SF 2017: A hands-on tour of Image OptimizationAltitude SF 2017: A hands-on tour of Image Optimization
Altitude SF 2017: A hands-on tour of Image Optimization
 
True beauty is on the inside, but your users are shallow.
True beauty is on the inside, but your users are shallow.True beauty is on the inside, but your users are shallow.
True beauty is on the inside, but your users are shallow.
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
 

More from Stoyan Stefanov

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

More from Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
 
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
 

Recently uploaded

WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
Priyanka Aash
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
Priyanka Aash
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
Ivanti
 

Recently uploaded (20)

WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
 

Ignite Velocity: Image Weight Loss Clinic

  • 1. Image 
 Weight Loss 
 Clinic Stoyan Stefanov
 Yahoo! Search
 Ignite Velocity 2009, San Jose
  • 2. 5
  • 3. 4
  • 4. 3
  • 5. 2
  • 6. 1
  • 18. GIF
  • 19. GIF GIF GIF GIF
  • 20. GIF GIF GIF GIF GIF
  • 21. GIF GIF GIF GIF GIF GIF GIF GIF
  • 22. $ convert in.gif PNG8:out.png
  • 24. jpegtran -optimize -progressive 10K+
  • 25. jpegtran -copy none -copy all
  • 28. PNGOptimizer AdvPNG
  • 30. DeflOpt PNGOptimizer AdvPNG PNGRewrite
  • 31. DeflOpt PNGOptimizer PNGCrush AdvPNG PNGRewrite
  • 32. DeflOpt PNGOut PNGOptimizer PNGCrush AdvPNG PNGRewrite
  • 33. OptiPNG DeflOpt PNGOut PNGOptimizer PNGCrush AdvPNG PNGRewrite
  • 34. OptiPNG DeflOpt PNGOut PNGCrush AdvPNG
  • 38. Before Image Weight: 694.3 Kb Page Weight: 839.5 Kb
 82% images
  • 39. After 30.15% savings Image 
 Weight Loss: 209Kb
  • 40. Summary 30.15% savings *  No GIFs *  JPEGtran *  PNG*
  • 41. + Tools Process FTW
  • 42. + Tools Process FTW
  • 43. Thanks,
 Stoyan
 Yahoo! Search Photo credits:
 http://www.flickr.com/photos/astique/1859573734/in/photostream/
 http://www.flickr.com/photos/73645804@N00/2222523486/ 
 http://dezignerfolio.com
 http://www.flickr.com/photos/81506496@N00/3061563817/
 http://www.flickr.com/photos/85049097@N00/1858630581/
 http://www.flickr.com/photos/7566272@N02/3537213022/
 http://www.flickr.com/photos/vanz/2093902502/
 http://www.flickr.com/photos/84661389@N00/542537185/ 
 http://www.flickr.com/photos/ericskiff/471212653/ 
 http://www.flickr.com/photos/kjarrett/414147790/ 
 http://icanhazcheezburger.com 
 http://www.flickr.com/photos/sophiea/2057656323/in/set-72157602827807236/
 http://www.flickr.com/photos/brighton/2278072114/

Editor's Notes

  1. Let’s talk a little bit about cutting back on that bandwidth bill. Saving some money. And without touching the code. How do we do that?
  2. One way is…
  3. Images.
  4. Ever since the dawn of times people have been using images.
  5. Cavemen scraping on their cave walls…
  6. and today…
  7. Today we have websites.
  8. Even some good ones. WithLOLcats.
  9. Half of the average web page weight today is images. And most of these images are too fat. They could use a diet and lose some weight but without losing quality, not even a single pixel.
  10. So, welcome to the Image Weight Loss Clinic. Our first patient today is… just some random page found on the Internets. What have we got here… Header graphic, speaker photos, logos, rotating banners – the usual stuff.
  11. First problem - there are some GIFs.
  12. We shouldn’t be using GIFs.
  13. PNG is the format for graphics - buttons, icons, and so on. The palette type of PNG, also known as PNG8 is good as a GIF and actually better. And PNG filesizes are smaller. Well, except for really tiny GIFs, but let’s ignore these, they don’t matter much.
  14. You should convert all your GIFs to PNG8. There’s a number of tools to do this in a batch. You can use ImageMagick for example. “Instant results or your money back”. Especially since ImageMagick is free.
  15. For your JPEG photos, use JPEGTran. It’s free, cross-platform, command-line tool, easy to script. And it’s lossless, you keep the photo quality. If you run it without setting any options, that’s good enough. Run with the –optimize and you’ll get even better results.
  16. Option –progressive makes JPEGs that render in the browser from low resolution to high, as opposed to top-to-bottom. If the JPEG is bigger than 10K (which is most JPEGs), the progressive encoding has a good shot at giving you a smaller image. You can always brute force – run with both options and take the smaller result.
  17. Option –copy none strips all comments and meta data - camera model, geo location, everything. If you own the image, strip the meta data. You’ll be surprised how much bloat is in there. If you don’t own the image, check with the owner. Option –copy all keeps all meta data.
  18. Next – PNG.
  19. . There’s a lot of options to optimize PNGs - all lossless and scriptable on the command line. Some even have nice graphical UIs built on top of them, you know, for our command-line-challenged friends.
  20. There’s even browser-based UIs, built on top of some of the tools. For example, smush.it, which is now part of YSlow runs PNGcrush. Google’s Page Speed runs OptiPNG.
  21. With so many PNG tools, how do you decide which one to pick? They are all good tools and they do their best, so if you’re in a hurry, just pick one and go with it, script it. You’ll be pleasantly surprised by the outcome.
  22. Now if you’re serious about PNG weight loss, you can run all the tools you can lay your hands on. Run the next tool on the result of the previous, try with their different options switches. They all do different things, and results may vary from one image to the next. Run them all in sequence and get an even smaller file at the end.
  23. Or, if you’re hardcore – run PNGSlim. PNGSlim is actually a Windows batch file that runs most of the other tools. It’s very slow, it can take hours to go through a handful of files. But at the end, it will give you the leanest, most optimized PiNG.
  24. Let’s see some results. That page has a total page weight of over 800K, including scripts, styles, everything. Over 80% of the weight is images. And what happens after optimization?
  25. We can strip quite a bit, over 200K of unnecessary image information. 200K, that’s over 30% if the image weight. The page looks exactly the same, pixel by pixel. There was no manual work involved, just running some tools. I think 30% is pretty impressive.
  26. To summarize, don’t use GIFs, run JPEGtran on your photos, and for the graphics - any PNG or all PNG tools.
  27. So the tools are available out there, now all you need is a process that runs the tools before your images go live. Make image optimization part of the push process.
  28. These are all lossless operations that don’t require you to look at the images to verify they’re OK. So you can only win! And often you’ll see some amazing and surprising results. Even if you normally do a good job with image sizes, there’s always a few that slip as you race against the deadline. The thing is – setup a process, so you don’t even need to think about it.
  29. Thanks very much, everybody! I’m Stoyan from Yahoo! Search. Enjoy Velocity, it’s a great conference!