WebDesigner's Memorandumウェブデザイナーの備忘録

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

ImageOptim

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

というわけで今回はImageOptimの最適な圧縮設定について考えてみます。

ImageOptimのインストール

ImageOptim

ImageOptimは公式サイトからダウンロードしましょう(複製版が出回っていて、検索をかけると公式以外からもダウンロード出来る場所が見つかりますが、公式サイトからダウンロードするように気をつけましょう)

ImageOptimをインストールしたら、起動してウインドウに画像をドラッグアンドドロップすれば圧縮されるというシンプルなアプリです。

ImageOptimのウインドウ

ただ、画像は上書きされてしまうので、未圧縮の画像を残しておきたいときは、ちゃんとコピーしておくようにしましょう。

ImageOptimの設定

ImageOptimでは大きく分けて、下記3つの設定項目があります。

  • 一般設定(画像圧縮エンコーダの選択や圧縮時の設定)
  • 圧縮率の設定
  • 最適化の速度

一般設定

[環境設定]→[一般]で設定します。

ImageOptim 一般設定

画像圧縮エンコーダ

まず左側にあるチェックボックスで、使用する画像圧縮エンコーダを切り替えます。
それぞれ処理速度や圧縮率、対応している画像形式が異なっていて、使いたいエンコーダにチェックを入れると使用できるようになります。

ただし、圧縮率の高いエンコーダは処理に時間がかかったりするので、こだわる場合は切り替えが必要です。

ちなみに、デフォルトがオススメの状態になっています。

メタデータとカラープロファイルの削除

それぞれPNGとJPEGのメタデータとカラープロファイルを取り除く設定です。
圧縮する場合は必要のない情報ですので、両方チェックを入れるようにしましょう。ただし、JPEGで著作権情報の埋め込みが必要な場合はチェックを外しておく必要があります。

ファイルのディスク書き込み

ファイルのパーミッション、属性、ハードリンクを維持する場合はチェックを入れますが、ここは基本外しておきます。

圧縮率の設定

[環境設定]→[Quality]で圧縮率の設定をします。

ImageOptim 圧縮率設定

まずは「非可逆圧縮を有効にする」にチェックを入れましょう。
ここにチェックが入っていないと可逆圧縮(後から画質を元に戻せる状態での圧縮)になってしまうので、圧縮率が非常に悪いです。

チェックを入れた状態でJPEG・PNG・GIFの圧縮後の画像の品質を選択します。自分の場合は以下の通りに設定しています。

  • JPEG:70%
  • PNG:80%
  • GIF:80%

最適化の速度

最後は[環境設定]→[Quality]で速度の設定をします。

ImageOptim 圧縮速度設定

こちらで最適化の速度の設定が出来ますが、速度を優先すると最適化のレベルが低く、逆に最適化のレベルを上げようとすると速度は落ちてしまいます。

自分の場合は、質重視で「非常に高い」に設定しています。
画像の圧縮もめちゃくちゃ遅いとは感じないので、よほど頻繁に画像圧縮をしていて次から次へと画像を裁かないといけない人以外は、質重視でよいでしょう。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね