We should optimize images 
for 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 times 
Minimize request overhead 
Minimize payload size 
Optimize browser rendering 
etc… 
# 
" 
! 
$
Related Factors? 
Minimize round trip times 
Minimize request overhead 
Minimize payload size 
Optimize browser rendering 
etc… 
# 
" 
! 
$
In many case…
Let’s optimize images!
ImageOptim
ImageAlpha
JPEGmini
Image which does not contain 
many colors
Uncompressed PNG 
71,834 bytes 
24bit PNG 
Compressed PNG 
28,369 bytes (60% cut) 
8bit down converted
Image which has many colors
Optimized JPEG 
213,171 bytes 
Meta is removed 
Lossy Compressed JPEG 
71,874 bytes (66% cut)
I want to optimize them in CLI…
We should optimize images
So I made grunt-image 
and gulp-image.
grunt-image
gulp-image
$ 
npm 
install 
grunt-­‐image 
or 
$ 
npm 
install 
gulp-­‐image
grunt-image Features 
Reduce the number of color 
Remove image meta data 
Support JPEG, PNG, GIF, SVG. 
Work on CLI ! 
| 
& 
% 
(
We should optimize images
Conclusion
24bit PNG
What kind of images? 
Which contain many colors 
and transparency. 
When? 
In development. If in 
production, down 
converting them is worth 
considering.
JPEG
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.
8bit PNG
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.
Images should be optimised 
with your 
grunt-image or gulp-image ;)
Thanks! 
+ShogoSensui 
@1000ch 
+ 
* 
) @1000ch

More Related Content

PDF
Image Optimisation Techniques for WebApps
PDF
clipping path service
PDF
Website Optimization
PPTX
6. production reflection(2)
PDF
Weniger aus Bilder holen
PDF
WordCamp Finland 2015, Page performance optimization
PPTX
AWS Re:invent - Top Ten Image Mistakes and How to Solve Them
PDF
S&T Ess Vee Gee 211016
Image Optimisation Techniques for WebApps
clipping path service
Website Optimization
6. production reflection(2)
Weniger aus Bilder holen
WordCamp Finland 2015, Page performance optimization
AWS Re:invent - Top Ten Image Mistakes and How to Solve Them
S&T Ess Vee Gee 211016

What's hot (7)

DOCX
ESA list
PDF
Performance beyond page load - CSS Conf Asia 2015
PDF
Equipment 2
PPTX
Q6. What have you learnt about technologies from the process of constructing ...
DOCX
Task 6
PPTX
WordPress Site Speed & Performance - WPMIA Meetup
PPTX
Technologies used evaluation
ESA list
Performance beyond page load - CSS Conf Asia 2015
Equipment 2
Q6. What have you learnt about technologies from the process of constructing ...
Task 6
WordPress Site Speed & Performance - WPMIA Meetup
Technologies used evaluation
Ad

Viewers also liked (6)

PDF
Brush up your Coding! 2013 winter
PDF
Brush up your Coding!
PDF
Introduction to Service Worker
PDF
Functional JavaScript with Lo-Dash.js
PDF
Web Components changes Web Development
PDF
Web Components 2016 & Polymer v2
Brush up your Coding! 2013 winter
Brush up your Coding!
Introduction to Service Worker
Functional JavaScript with Lo-Dash.js
Web Components changes Web Development
Web Components 2016 & Polymer v2
Ad

Similar to We should optimize images (20)

PDF
Image optimization and you
PPTX
Chapter 23: Web Images
PDF
CSS and image optimization
PPTX
Achieving Better Image Optimizations
PPTX
Fastandbeautiful zagrebtechsauna
PPT
Yahoo - Web Images optimization
PDF
Image Optimization for the Web at php|works
PPTX
Putting Your Images on a Diet (SmashingConf, 2014)
PPTX
Fastandbeautiful vienna
PPTX
Fastandbeautiful devfest london
PPTX
Achieving better image optimizations
PPTX
Edi react fastandbeautiful
PDF
Image Optimization for The Web
PPTX
Fastandbeautiful seattle css
PDF
Voices that matter: High Performance Web Sites
PPTX
Fastandbeautiful seattlevue
PPTX
Fastandbeautiful gd glittlerock
PPT
Your Images are Weighing You Down: Optimization for a Better UX
PPT
Image Optimization
PDF
Creating Images for the Web
Image optimization and you
Chapter 23: Web Images
CSS and image optimization
Achieving Better Image Optimizations
Fastandbeautiful zagrebtechsauna
Yahoo - Web Images optimization
Image Optimization for the Web at php|works
Putting Your Images on a Diet (SmashingConf, 2014)
Fastandbeautiful vienna
Fastandbeautiful devfest london
Achieving better image optimizations
Edi react fastandbeautiful
Image Optimization for The Web
Fastandbeautiful seattle css
Voices that matter: High Performance Web Sites
Fastandbeautiful seattlevue
Fastandbeautiful gd glittlerock
Your Images are Weighing You Down: Optimization for a Better UX
Image Optimization
Creating Images for the Web

More from Shogo Sensui (11)

PDF
Web Standards Interop 2022
PDF
Introduction to Performance APIs
PDF
Web Standards 2018
PDF
The State of Web Components
PDF
Component of Web Frontend
PDF
Web フロントエンドの変遷とこれから
PDF
Introduction to Resource Hints
PDF
これからのJavaScriptの話
PDF
初心者のためのWeb標準技術
PDF
Re-think about Web Performance
PDF
Browser Computing Structure
Web Standards Interop 2022
Introduction to Performance APIs
Web Standards 2018
The State of Web Components
Component of Web Frontend
Web フロントエンドの変遷とこれから
Introduction to Resource Hints
これからのJavaScriptの話
初心者のためのWeb標準技術
Re-think about Web Performance
Browser Computing Structure

Recently uploaded (20)

PPT
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
PDF
A contest of sentiment analysis: k-nearest neighbor versus neural network
PDF
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
PDF
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
PDF
STKI Israel Market Study 2025 version august
PDF
NewMind AI Weekly Chronicles – August ’25 Week III
PDF
Enhancing plagiarism detection using data pre-processing and machine learning...
PPTX
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
PPTX
TEXTILE technology diploma scope and career opportunities
PDF
Getting started with AI Agents and Multi-Agent Systems
PDF
UiPath Agentic Automation session 1: RPA to Agents
PDF
The influence of sentiment analysis in enhancing early warning system model f...
PPTX
Configure Apache Mutual Authentication
PPTX
AI IN MARKETING- PRESENTED BY ANWAR KABIR 1st June 2025.pptx
PDF
Developing a website for English-speaking practice to English as a foreign la...
PDF
sbt 2.0: go big (Scala Days 2025 edition)
PPTX
Training Program for knowledge in solar cell and solar industry
PDF
How IoT Sensor Integration in 2025 is Transforming Industries Worldwide
PPTX
Microsoft Excel 365/2024 Beginner's training
DOCX
Basics of Cloud Computing - Cloud Ecosystem
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
A contest of sentiment analysis: k-nearest neighbor versus neural network
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
STKI Israel Market Study 2025 version august
NewMind AI Weekly Chronicles – August ’25 Week III
Enhancing plagiarism detection using data pre-processing and machine learning...
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
TEXTILE technology diploma scope and career opportunities
Getting started with AI Agents and Multi-Agent Systems
UiPath Agentic Automation session 1: RPA to Agents
The influence of sentiment analysis in enhancing early warning system model f...
Configure Apache Mutual Authentication
AI IN MARKETING- PRESENTED BY ANWAR KABIR 1st June 2025.pptx
Developing a website for English-speaking practice to English as a foreign la...
sbt 2.0: go big (Scala Days 2025 edition)
Training Program for knowledge in solar cell and solar industry
How IoT Sensor Integration in 2025 is Transforming Industries Worldwide
Microsoft Excel 365/2024 Beginner's training
Basics of Cloud Computing - Cloud Ecosystem

We should optimize images