We should optimize images

for the better web performance

Steve Souders said on High Performance Web Site,

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

Web performance mostly depends on the frontend. This means to make the web faster, we have to optimize the frontend. For example, it contains following factors:

Minimizing payload size is one of the easiest to apply. To reduce the number and payload size, we have to reduce HTML, CSS, and image files. Especially, the file size of images takes most bandwidth in most cases. So I will introduce you to some tools for image optimization.

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)

This is original PNG image without compression. This image is 24bit oriented and contains lots of meta such as location, date, and time.

Compressed PNG (28,369 bytes) with ImageAlpha & ImageOptim

This is the 8bit-converted PNG compressed with ImageAlpha and ImageOptim. It looks not degraded.

Optimized JPEG (213171 bytes) with ImageOptim. Meta is removed. But lossy-compression is not applied.

As other example, this one is a JPEG. Meta is removed with ImageOptim and lossy-compression is not applied.

Compressed JPEG (71874 bytes) with JPEGmini & ImageOptim

This one is compressed with JPEGmini. It does not look too degraded, and the file size is about 34% of the original (66% cut!!!). Photos that contain many colors will be degraded, so we have to check the image after compression. It is a little boring, but it’s worth it.

CUI Tools for image optimization

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

You can optimize PNG, JPEG, GIF images with using them. Installation? It’s simple and easy if you have used Grunt or Gulp. (I guess you have already used them☺)

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

Detailed settings are on the projects’ GitHub repositories.

WebP is a new image format by Google

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

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.

WebP is supported by Chrome and other browsers which contains Chrome Frame. Firefox and Safari do not currently support WebP. But interestingly Chrome on iOS is able to display WebP images (It seems to have Chrome Frame)!

WebP is available from here. I want to show you WebP image, but it is not available on Medium sadly ☹ However in my test, the PNG file size before converting into WebP is 28,369 bytes. After converting, file size of WebP one is 17382 bytes, and it looks not degraded Yay!

If you have ever not taken care of image optimization, you should apply optimization for the better web performance. Finally, I recommend the following articles to learn more about image:

Thank you for reading!