We should optimize imagesfor the better web performance

I’m Shogo Sensui a.k.a 1000ch

from Tokyo, Japan

work at CyberAgent, Inc.

as Performance Provocateur

Steve Souders said…

80-90% of the end-user response time is spent on the frontend.

Start there.

via High Performance Web Site

Related Factors?Minimize round trip timesMinimize request overheadMinimize payload sizeOptimize browser renderingetc…

!

"

#

$

Related Factors?Minimize round trip timesMinimize request overheadMinimize payload sizeOptimize browser renderingetc…

!

"

#

$

In many case…

Let’s optimize images!

ImageOptim

ImageAlpha

JPEGmini

Image which does not contain many colors

Uncompressed PNG71,834 bytes

24bit PNG

Compressed PNG 28,369 bytes (60% cut)

8bit down converted

Image which has many colors

Optimized JPEG213,171 bytes

Meta is removed

Lossy Compressed JPEG71,874 bytes (66% cut)

I want to optimize them in CLI…

So I made grunt-imageand gulp-image.

grunt-image

gulp-image

$  npm  install  grunt-­‐image

$  npm  install  gulp-­‐image

or

grunt-image FeaturesReduce the number of colorRemove image meta dataSupport JPEG, PNG, GIF, SVG.Work on CLI !

%

&

|

(

Conclusion

24bit PNG

In development. If in production, down converting them is worth considering.

Which contain many colors and transparency.

When?

What kind of images?

JPEG

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?

8bit PNG

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?

Images should be optimisedwith your

grunt-image or gulp-image ;)

Thanks!+ShogoSensui

@1000ch

@1000ch)

*

+