We should optimize images

Slide for "Your 5 minutes of fame" in JSConf.Asia. More detail http://bit.ly/we-should-optimize-images

Transcript

1. We should optimize images for the better web performance
2. I’m Shogo Sensui a.k.a 1000ch from Tokyo, Japan work at CyberAgent, Inc. as Performance Provocateur
3. Steve Souders said… 80-90% of the end-user response time is spent on the frontend. Start there. via High Performance Web Site
4. Related Factors? Minimize round trip times Minimize request overhead Minimize payload size Optimize browser rendering etc… ! " # $
5. Related Factors? Minimize round trip times Minimize request overhead Minimize payload size Optimize browser rendering etc… ! " # $
6. In many case…
7. Let’s optimize images!
8. ImageOptim
9. ImageAlpha
10. JPEGmini
11. Image which does not contain many colors
12. Uncompressed PNG 71,834 bytes 24bit PNG Compressed PNG 28,369 bytes (60% cut) 8bit down converted
13. Image which has many colors
14. Optimized JPEG 213,171 bytes Meta is removed Lossy Compressed JPEG 71,874 bytes (66% cut)
15. I want to optimize them in CLI…
17. So I made grunt-image and gulp-image.
18. grunt-image
19. gulp-image
20. $  npm  install  grunt-­‐image $  npm  install  gulp-­‐image or
21. grunt-image Features Reduce the number of color Remove image meta data Support JPEG, PNG, GIF, SVG. Work on CLI ! % & | (
23. Conclusion
24. 24bit PNG
25. In development. If in production, down converting them is worth considering. Which contain many colors and transparency. When? What kind of images?
26. JPEG
27. When we upload images to production server. They are lossy compressed. Which contain many colors but transparency, and will be lossy compressed. When? What kind of images?
28. 8bit PNG
29. When we upload images to production server. They are lossless compressed but already lossy. Which contain ~256 colors and transparency. When? What kind of images?
30. Images should be optimised with your grunt-image or gulp-image ;)
31. Thanks! +ShogoSensui @1000ch @1000ch ) * +