Upgrade to Pro — share decks privately, control downloads, hide ads and more …

We should optimize images

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

Shogo Sensui

November 20, 2014
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

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