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
   

   View Slide

2. I’m Shogo Sensui a.k.a 1000ch
   from Tokyo, Japan
   work at CyberAgent, Inc.
   as Performance Provocateur
   

   View Slide

3. Steve Souders said…
   80-90% of the end-user response
   time is spent on the frontend.
   Start there.
   via High Performance Web Site
   

   View Slide

4. Related Factors?
   Minimize round trip times
   Minimize request overhead
   Minimize payload size
   Optimize browser rendering
   etc…
   !
   "
   #
   $
   

   View Slide

5. Related Factors?
   Minimize round trip times
   Minimize request overhead
   Minimize payload size
   Optimize browser rendering
   etc…
   !
   "
   #
   $
   

   View Slide

6. In many case…
   

   View Slide

7. Let’s optimize images!
   

   View Slide

8. ImageOptim
   

   View Slide

9. ImageAlpha
   

   View Slide

10. JPEGmini
    

    View Slide

11. Image which does not contain
    many colors
    

    View Slide

12. Uncompressed PNG
    71,834 bytes
    24bit PNG
    Compressed PNG
    28,369 bytes (60% cut)
    8bit down converted
    

    View Slide

13. Image which has many colors
    

    View Slide

14. Optimized JPEG
    213,171 bytes
    Meta is removed
    Lossy Compressed JPEG
    71,874 bytes (66% cut)
    

    View Slide

15. I want to optimize them in CLI…
    

    View Slide

16. View Slide

17. So I made grunt-image
    and gulp-image.
    

    View Slide

18. grunt-image
    

    View Slide

19. gulp-image
    

    View Slide

20. $  npm  install  grunt-­‐image
    $  npm  install  gulp-­‐image
    or
    

    View Slide

21. grunt-image Features
    Reduce the number of color
    Remove image meta data
    Support JPEG, PNG, GIF, SVG.
    Work on CLI !
    %
    &
    |
    (
    

    View Slide

22. View Slide

23. Conclusion
    

    View Slide

24. 24bit PNG
    

    View Slide

25. In development. If in
    production, down
    converting them is worth
    considering.
    Which contain many colors
    and transparency.
    When?
    What kind of images?
    

    View Slide

26. JPEG
    

    View Slide

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?
    

    View Slide

28. 8bit PNG
    

    View Slide

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?
    

    View Slide

30. Images should be optimised
    with your
    grunt-image or gulp-image ;)
    

    View Slide

31. Thanks!
    +ShogoSensui
    @1000ch
    @1000ch
    )
    *
    +
    

    View Slide