We should optimize images

for the better web performance

Shogo Sensui
Apr 4, 2014 · 4 min read

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

  • 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

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

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 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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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