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

We should optimize images

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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  6. In many case…

    View full-size slide

  7. Let’s optimize images!

    View full-size slide

  8. Image which does not contain
    many colors

    View full-size slide

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

    View full-size slide

  10. Image which has many colors

    View full-size slide

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

    View full-size slide

  12. I want to optimize them in CLI…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

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

    View full-size slide

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

    View full-size slide