Image Optimization Lightning Talk - Ajax Experience
-
Upload
nicole-sullivan -
Category
Technology
-
view
7.520 -
download
1
description
Transcript of Image Optimization Lightning Talk - Ajax Experience
![Page 1: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/1.jpg)
THE PROBLEMOptimizing images sucks.
Stoyan Stefanovhttp://phpied.com
Nicole Sullivanhttp://stubbornella.org
![Page 2: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/2.jpg)
![Page 3: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/3.jpg)
Quantify and improve the performance of all Yahoo!
products worldwide
![Page 4: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/4.jpg)
HEAVY = SLOW
![Page 5: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/5.jpg)
Time to dietFrom 2003 to 2008:
97K to 312K.25.7 to 49.9 objects.
![Page 6: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/6.jpg)
Images, who cares?
Top ten websites
45.6% page weight is images.
![Page 7: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/7.jpg)
7 MISTAKESImage Optimization
![Page 8: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/8.jpg)
mistake #1Using GIF when PNG is smaller
20.42%
![Page 9: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/9.jpg)
mistake #2Not crushing PNG
16.05%
![Page 10: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/10.jpg)
mistake #3Not stripping JPG metadata
11.85%
![Page 11: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/11.jpg)
mistake #4Using truecolor PNG rather than PNG8
![Page 12: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/12.jpg)
mistake #5Using Alpha Image Loader
100msyahoo search
![Page 13: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/13.jpg)
mistake #6Serving dynamically generated images “as is”
38-55% google charts api
![Page 14: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/14.jpg)
mistake #7Not combining images
![Page 15: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/15.jpg)
SOLUTION?
![Page 16: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/16.jpg)
Excellent tools, so many options
JPEG Tran
PngOptimizer
OptiPNG
![Page 17: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/17.jpg)
Two distinct problems
Quality versus Optimization
Design
Engineering
![Page 18: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/18.jpg)
ONE TOOL. MANY ALGORITHMS.
Smush it automatically crushes images using the best open source algorithms available.
![Page 20: Image Optimization Lightning Talk - Ajax Experience](https://reader034.fdocuments.us/reader034/viewer/2022052307/54b7a3ff4a79592d048b464e/html5/thumbnails/20.jpg)
Let’s keep talking... Stoyan Stefanovhttp://phpied.comYSlow: Lead [email protected]
Nicole Sullivanhttp://[email protected]“stubbornella” on the web