ImageOptimで画像圧縮に最適な設定を行う

Macの画像圧縮アプリでおそらく一番有名なImageOptim。
PNG・JPG・GIF・SVGとWebで使用する画像形式はひと通り対応しているので、非常に便利なのですが、デフォルトの状態だと可逆圧縮(後から画質をもとに戻せるレベルで圧縮する方式)になってしまっているので、圧縮率がイマイチです。
というわけで今回はImageOptimの最適な圧縮設定について考えてみます。
ImageOptimのインストール

ImageOptimは公式サイトからダウンロードしましょう(複製版が出回っていて、検索をかけると公式以外からもダウンロード出来る場所が見つかりますが、公式サイトからダウンロードするように気をつけましょう)
ImageOptimをインストールしたら、起動してウインドウに画像をドラッグアンドドロップすれば圧縮されるというシンプルなアプリです。

ただ、画像は上書きされてしまうので、未圧縮の画像を残しておきたいときは、ちゃんとコピーしておくようにしましょう。
ImageOptimの設定
ImageOptimでは大きく分けて、下記3つの設定項目があります。
- 一般設定(画像圧縮エンコーダの選択や圧縮時の設定)
- 圧縮率の設定
- 最適化の速度
一般設定
[環境設定]→[一般]で設定します。

画像圧縮エンコーダ
まず左側にあるチェックボックスで、使用する画像圧縮エンコーダを切り替えます。
それぞれ処理速度や圧縮率、対応している画像形式が異なっていて、使いたいエンコーダにチェックを入れると使用できるようになります。
ただし、圧縮率の高いエンコーダは処理に時間がかかったりするので、こだわる場合は切り替えが必要です。
ちなみに、デフォルトがオススメの状態になっています。
メタデータとカラープロファイルの削除
それぞれPNGとJPEGのメタデータとカラープロファイルを取り除く設定です。
圧縮する場合は必要のない情報ですので、両方チェックを入れるようにしましょう。ただし、JPEGで著作権情報の埋め込みが必要な場合はチェックを外しておく必要があります。
ファイルのディスク書き込み
ファイルのパーミッション、属性、ハードリンクを維持する場合はチェックを入れますが、ここは基本外しておきます。
圧縮率の設定
[環境設定]→[Quality]で圧縮率の設定をします。

まずは「非可逆圧縮を有効にする」にチェックを入れましょう。
ここにチェックが入っていないと可逆圧縮(後から画質を元に戻せる状態での圧縮)になってしまうので、圧縮率が非常に悪いです。
チェックを入れた状態でJPEG・PNG・GIFの圧縮後の画像の品質を選択します。自分の場合は以下の通りに設定しています。
- JPEG:70%
- PNG:80%
- GIF:80%
最適化の速度
最後は[環境設定]→[Quality]で速度の設定をします。

こちらで最適化の速度の設定が出来ますが、速度を優先すると最適化のレベルが低く、逆に最適化のレベルを上げようとすると速度は落ちてしまいます。
自分の場合は、質重視で「非常に高い」に設定しています。
画像の圧縮もめちゃくちゃ遅いとは感じないので、よほど頻繁に画像圧縮をしていて次から次へと画像を裁かないといけない人以外は、質重視でよいでしょう。


何でもEvernoteに保存したい僕のEvernoteの使い方
Fantastical 2は音声入力を使って予定を追加するのが便利!
Chrome拡張機能の「Wappalyzer」を使ってウェブサイトの使用技術を確認する
ATOKで簡単に今日の日付を入力する方法
拡張機能を使わずにサイト全体のスクリーンショットを撮影する方法
Path Finderがバージョン9.2にアップデート!ロックダウン期間中は無料トライアル期間が30日から60日に延長!
Drive File StreamでGoogle Driveをローカル容量を圧迫せずにファイルを閲覧する
Macのデフォルトシェルをbashからzshへ変更する方法
Google Chromeに「タブを検索」機能が追加!開いているタブや最近閉じたタブから検索が可能に!
ウインドウを画面の上にドラッグしたときに、Mission Controlが起動するのを無効化する方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Spreadsheetのプルダウンメニューの作り方
Visual Studio Codeで「.html」拡張子以外のファイルでもEmmetを使えるようにする
SourceTreeでURLからクローンするときに自動で入力される「保存先のパス」を変更する方法
Node.jsのバージョン管理をnodebrewからnodenvに移行する方法
SourceTreeを開くと「’git status’ failed with code 69:’」というポップアップが出てくる場合の解決方法
iStat Menusの「天気」アイコン表示と設定
Macで英語の発音記号を入力する方法
Sketchの画像を図形でマスクしたり、グラデーションマスクをする方法
Vue CLIのプロジェクト管理用のGUI機能から環境を構築する
Keyboard Maestroにサードパーティ製アクションを追加する方法