The document discusses optimizing images for better web performance. It introduces Shogo Sensui and his work optimizing images at CyberAgent. It then discusses factors that impact web performance like minimizing payload size and optimizing rendering. It demonstrates how tools like ImageOptim, ImageAlpha, and JPEGmini can optimize images, significantly reducing file sizes in some cases. Shogo Sensui created grunt-image and gulp-image tools to optimize images from the command line. The conclusion recommends using different image formats like 24-bit PNG, JPEG, and 8-bit PNG for different image types and stages of a website project.

1. We should optimize images
for the better web performance

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

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

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

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

6. In many case…

7. Let’s optimize images!

8. ImageOptim

9. ImageAlpha

10. JPEGmini

11. Image which does not contain
many colors

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

13. Image which has many colors

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

15. I want to optimize them in CLI…

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

18. grunt-image

19. gulp-image

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

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

23. Conclusion

24. 24bit PNG

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

26. JPEG

27. What kind of images?
Which contain many colors
but transparency, and will
be lossy compressed.
When?
When we upload images to
production server. They are
lossy compressed.

28. 8bit PNG

29. What kind of images?
Which contain ~256 colors
and transparency.
When?
When we upload images to
production server. They are
lossless compressed but
already lossy.

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

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