Slide 1
Slide 1 text
We should optimize images
for the better web performance
Slide 2
Slide 2 text
I’m Shogo Sensui a.k.a 1000ch
from Tokyo, Japan
work at CyberAgent, Inc.
as Performance Provocateur
Slide 3
Slide 3 text
Steve Souders said…
80-90% of the end-user response
time is spent on the frontend.
Start there.
via High Performance Web Site
Slide 4
Slide 4 text
Related Factors?
Minimize round trip times
Minimize request overhead
Minimize payload size
Optimize browser rendering
etc…
!
"
#
$
Slide 5
Slide 5 text
Related Factors?
Minimize round trip times
Minimize request overhead
Minimize payload size
Optimize browser rendering
etc…
!
"
#
$
Slide 6
Slide 6 text
In many case…
Slide 7
Slide 7 text
Let’s optimize images!
Slide 8
Slide 8 text
ImageOptim
Slide 9
Slide 9 text
ImageAlpha
Slide 10
Slide 10 text
JPEGmini
Slide 11
Slide 11 text
Image which does not contain
many colors
Slide 12
Slide 12 text
Uncompressed PNG
71,834 bytes
24bit PNG
Compressed PNG
28,369 bytes (60% cut)
8bit down converted
Slide 13
Slide 13 text
Image which has many colors
Slide 14
Slide 14 text
Optimized JPEG
213,171 bytes
Meta is removed
Lossy Compressed JPEG
71,874 bytes (66% cut)
Slide 15
Slide 15 text
I want to optimize them in CLI…
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
So I made grunt-image
and gulp-image.
Slide 18
Slide 18 text
grunt-image
Slide 19
Slide 19 text
gulp-image
Slide 20
Slide 20 text
$
npm
install
grunt-‐image
$
npm
install
gulp-‐image
or
Slide 21
Slide 21 text
grunt-image Features
Reduce the number of color
Remove image meta data
Support JPEG, PNG, GIF, SVG.
Work on CLI !
%
&
|
(
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Conclusion
Slide 24
Slide 24 text
24bit PNG
Slide 25
Slide 25 text
In development. If in
production, down
converting them is worth
considering.
Which contain many colors
and transparency.
When?
What kind of images?
Slide 26
Slide 26 text
JPEG
Slide 27
Slide 27 text
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?
Slide 28
Slide 28 text
8bit PNG
Slide 29
Slide 29 text
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?
Slide 30
Slide 30 text
Images should be optimised
with your
grunt-image or gulp-image ;)
Slide 31
Slide 31 text
Thanks!
+ShogoSensui
@1000ch
@1000ch
)
*
+