Save 37% off PRO during our Black Friday Sale! »

We should optimize images

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
November 20, 2014

We should optimize images

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

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

November 20, 2014
Tweet

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…

  16. None
  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 ! % & | (
  22. None
  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 ) * +