We should optimize images
Tags: image
Published: 2019-06-17 18:36:33

---
title: We should optimize images
published: true
description: for the better web performance
tags: image
---

Steve Souders said on [High Performance Web Site](http://stevesouders.com/hpws/),

> 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](https://developers.google.com/speed/docs/insights/mobile) and [request overhead](https://developers.google.com/speed/docs/insights/EnableCompression)
- Minimize [payload size](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent)
- [Optimize browser rendering](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent)
- 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](https://imageoptim.com/mac) — image optimizer which contains PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle.
- [ImageAlpha](https://pngmini.com/) — reduce file sizes of 24bit PNGs by converting them to 8bit.
- [WebPonize](https://webponize.org) — a Mac OS App for converting images into WebP.
- [SVGOMG](https://jakearchibald.github.io/svgomg/) - SVGO's Missing GUI.
- [Squoosh](https://squoosh.app/) - 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)

![Uncompressed PNG (71,834bytes)](https://thepracticaldev.s3.amazonaws.com/i/v70syevstzvjx4spj9df.png)

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

![Compressed PNG (28,369 bytes) with ImageAlpha & ImageOptim](https://thepracticaldev.s3.amazonaws.com/i/gut0mn3w56fq49bict0x.png)

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.

![Optimized JPEG (213171 bytes) with ImageOptim. Meta is removed. But lossy-compression is not applied](https://thepracticaldev.s3.amazonaws.com/i/27m3rb7refxeb2olg1fx.jpeg)

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

![Compressed JPEG (71874 bytes) with JPEGmini & ImageOptim](https://thepracticaldev.s3.amazonaws.com/i/a6gvgpe6hp3t0oemmas4.jpeg)

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](https://github.com/1000ch/grunt-image) — Optimizes PNG, JPEG, GIF images without GUI.
- [gulp-image](https://github.com/1000ch/grunt-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☺)

```sh
# 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](https://developers.google.com/speed/webp/) is also awesome. This is a new image format by Google. It says,

> WebP lossless images are [26% smaller](https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results) in size compared to PNGs. WebP lossy images are [25-34% smaller](https://developers.google.com/speed/webp/docs/webp_study) in size compared to JPEG images at equivalent SSIM index.

WebP is supported by Chrome and other browsers which contain [Chrome Frame](https://dev.chromium.org/developers/how-tos/chrome-frame-getting-started). 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](https://developers.google.com/speed/webp/). 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](http://www.phpied.com/give-png-a-chance/) — by [Stoyan Stefanov](http://www.phpied.com/bio/)
- [Mobile ISP image recompression](https://calendar.perfplanet.com/2013/mobile-isp-image-recompression/) — by [Kornel Lesiński](https://kornel.ski/)
- [PNG8 — The Clear Winner](https://www.sitepoint.com/png8-the-clear-winner/) — by [Alex Walker](https://www.sitepoint.com/author/alex-walker/)
- [PNG that works](https://calendar.perfplanet.com/2010/png-that-works/) — by [Kornel Lesiński](https://kornel.ski/)
- [Image Compression for Web Developers](https://www.html5rocks.com/en/tutorials/speed/img-compression/) — by [Colt McAnlis](https://www.html5rocks.com/en/profiles/#coltmcanlis)
- [Introduction to WebP](https://medium.com/@1000ch/introduction-to-webp-b593dfe1d1d1) — by Me

Thank you for reading!