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:
- 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 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:
This is original PNG image without compression. This image is 24bit oriented and contains lots of meta such as location, date, and time.
This is the 8bit-converted PNG compressed with ImageAlpha and ImageOptim. It looks not degraded.
As other example, this one is a JPEG. Meta is removed with ImageOptim and lossy-compression is not applied.
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.
- grunt-image — Optimizes PNG, JPEG, GIF images without GUI.
- gulp-image — Gulp one of above.
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:
- 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!
