We should optimize images

for the better web performance

Steve Souders said on High Performance Web Site,

GUI Tools for image optimization

  • ImageOptim — image optimizer which contains PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.
  • ImageAlpha — reduce file sizes of 24bit PNGs by converting them to 8bit.
  • JPEGmini — reduce file sizes of JPEG images by applying lossy compression (But it looks keeping original quality!).
  • pngoo — PNG image compressor for Windows.
  • WebPonize — a Mac OS App for converting images into WebP.

Image comparison

They are GUI applications so you can use them to easily apply compression to your images. Here is the sample result of PNG image compression:

Uncompressed PNG (71,834bytes)
Compressed PNG (28,369 bytes) with ImageAlpha & ImageOptim
Optimized JPEG (213171 bytes) with ImageOptim. Meta is removed. But lossy-compression is not applied.
Compressed JPEG (71874 bytes) with JPEGmini & ImageOptim

CUI Tools for image optimization

I also wanted CLI tool, so I created the tool as grunt task and gulp one.

# download them using npm$ npm install —-save-dev grunt-image$ npm install —-save-dev gulp-image

WebP is a new image format by Google

WebP is also awesome. This is a new image format by Google. It says,

Software Engineer in Tokyo, Japan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store