We should optimize images

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. It means to make the web faster; we have to optimize the frontend. For example, it contains the following factors:

• Minimize round trip times and request overhead
• Minimize payload size
• Optimize browser rendering
• And others…

Minimizing payload size is one of the easiest to apply. To reduce the number and payload size, we have to minimize HTML, CSS, and image files. Notably, the file size of images takes the 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.
• WebPonize — a Mac OS App for converting images into WebP.
• SVGOMG - SVGO's Missing GUI.
• Squoosh - Compress and compare images with different codecs, right in your browser.

Image comparison

They are GUI applications, so you can use them to apply compression to your images easily. 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 annoying, but it’s worth it.

CUI Tools for image optimization

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

• grunt-image — Optimizes PNG, JPEG, GIF images without GUI.
• gulp-image — Gulp one of above.

You can optimize PNG, JPEG, GIF images 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 contain Chrome Frame. Safari does 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, the file size of WebP one is 17,382 bytes, and it looks not degraded Yay!

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

• Give PNG a chance — by Stoyan Stefanov
• Mobile ISP image recompression — by Kornel Lesiński
• PNG8 — The Clear Winner — by Alex Walker
• PNG that works — by Kornel Lesiński
• Image Compression for Web Developers — by Colt McAnlis
• Introduction to WebP — by Me

Thank you for reading!