We should optimize images
1 like1,041 views
The document discusses optimizing images for better web performance. It introduces Shogo Sensui and his work optimizing images at CyberAgent. It then discusses factors that impact web performance like minimizing payload size and optimizing rendering. It demonstrates how tools like ImageOptim, ImageAlpha, and JPEGmini can optimize images, significantly reducing file sizes in some cases. Shogo Sensui created grunt-image and gulp-image tools to optimize images from the command line. The conclusion recommends using different image formats like 24-bit PNG, JPEG, and 8-bit PNG for different image types and stages of a website project.
We should optimize images
- 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… # " ! $
- 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 or $ npm install gulp-‐image
- 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. What kind of images? Which contain many colors and transparency. When? In development. If in production, down converting them is worth considering.
- 26. JPEG
- 27. What kind of images? Which contain many colors but transparency, and will be lossy compressed. When? When we upload images to production server. They are lossy compressed.
- 28. 8bit PNG
- 29. What kind of images? Which contain ~256 colors and transparency. When? When we upload images to production server. They are lossless compressed but already lossy.
- 30. Images should be optimised with your grunt-image or gulp-image ;)
- 31. Thanks! +ShogoSensui @1000ch + * ) @1000ch