PageSpeed Insightsの「画像を最適化する」に対応する『jpegtran』と『OptiPNG』の使い方

2017年10月24日
SEO対策

お持ちのWebサイトをGoogleのPageSpeed Insightsで調査してみると、多くの場合、「画像を最適化する」という項目が出てくると思います。

これは、画像の無駄を省きなさい(意訳)という指摘で、表示されている解像度に対して、元の画像の解像度が高すぎる場合や、Jpeg画像のメタ情報などが残っている場合に警告されます。

Googleはこれに対応するために「基本的な最適化」と「高度な最適化」の両方を行うように指示を出しています。

「基本的な最適化」は、PhotoshopやGIMP等の画像編集のアプリケーションで対応可能ですが、「高度な最適化」はそのままでは対応できないため、別のアプリケーションを準備する必要があります。

Googleの解説を見ると、次のように書かれています。

画像圧縮ツールを使用する
画像の品質に影響を与えずに JPEG や PNG ファイルに対して高度なロスレス圧縮を実行するツールがいくつか提供されています。JPEG では、jpegtran または jpegoptim（Linux のみ。–strip-all オプションを指定して実行します）をおすすめします。PNG では OptiPNG または PNGOUT をおすすめします。

引用：Google – 画像を最適化する PageSpeed Insights | Google Developers

ここを見れば、JPEGの画像は『jpegtran』を使い、PNGは『OptiPNG』か『PNGOUT』を使えば画像を圧縮できる、ということはわかりますが、使い方が掲載されていないため、実施するのは簡単なことではありません。

私自身、迷いましたので、備忘録も兼ねてWindowsでの、『jpegtran』と『OptiPNG』の使い方について、簡単にお伝えいたします。

1 JPEG画像を最適化する『jpegtran』の使い方
2 jpegtranのインストール方法
3 PNG画像を最適化する『OptiPNG』の使い方
4 OptiPNGのインストール方法
5 まとめ

JPEG画像を最適化する『jpegtran』の使い方

Googleが提案していた『jpegtran』は画像のメタ情報を削除したり、ハフマン符号の最適化を行ったりするためのツールです。

コマンドラインから使うため、インストール時に環境変数に登録した方が使いやすくなります。

使い方を簡単にまとめると、exeファイルダウンロードし、pathを通します。

その後、コマンドライン上で圧縮したい画像があるディレクトリに移動し、次のコマンドを入力します。

    
    jpegtran -copy none -optimize -progressive -outfile 出力ファイル名 圧縮したい画像のファイル名

各オプションは次の通りの意味があります。

-copy none：画像のメタ情報を削除する
-optimize：ハフマン符号を最適化する
-progressive：プログレッシブJPEGに変換する ※任意
-outfile：出力ファイル名画像圧縮後、「出力ファイル名」に設定したファイル名で出力。

同一フォルダ内のjpg画像すべてを圧縮するコマンド

上記の方法だと、一つ一つ入力しないといけないので手間がかかりますがすべて同一処理をする方法もあります。

cmd.exeでは次のようなコマンドで対応可能です。

      
      for %a in (*.jpg;*.jpeg) do jpegtran -copy none -optimize -progressive -outfile %a %a

これはバッチ処理と呼ばれる複数のファイルに同一の処理をする際に便利なものです。

今回のコマンドでは、コマンド中の%aがすべてファイル名になると考えておくと、書き換えやすいと存じます。

そのまま実行すると、すべてのファイルが上書きされてしまいます。

上書きしたくない場合は、-outfileの直後を書き換えてください。

圧縮後の画像のディレクトリを分ける場合は次のように入力するのもよいと思います。

      
      for %a in (*.jpg;*.jpeg) do jpegtran -copy none -optimize -progressive -outfile directory/%a %a

事前にディレクトリを作っておかないと書き出しできないのでご注意ください。

jpegtranのインストール方法

上記の方法だけだと少しわかりづらいと思いますので、インストールについては以下のように行ってください。

exeファイルをダウンロードして、環境変数に登録するだけなので、それほど手間はないと思います。

インストールはexeファイルをダウンロードして環境変数pathに登録するだけ

公式ページからexeファイルをダウンロード

公式ページの「jpegtran.exe」をクリックして、ダウンロードします。
exeファイル設置ディレクトリを環境変数pathに登録する

ダウンロード後、exeファイルが置かれたディレクトリを環境変数pathに登録することで、初めてコマンドラインからjpegtranコマンドが使えるようになります。

Windows7の場合、以下の順序で開くことで、登録画面が出てきます。
1. 「スタート」
2. 「コントロールパネル」
3. 「システムとセキュリティ」
4. 「システム」
5. 「システムの詳細設定」
6. 「環境変数」
jpegtran.exeを「c:\Users\*********\app」というフォルダに保存したので、その名称を追記します。すでに何かが記載されていたら、「;(セミコロン)」を追記してから、ディレクトリのパスを追記してください。
コマンドラインで「jpegtran」と入力して確認する

ウィンドウズキー + Rを入力すると、アプリケーションを起動するためウィンドウが立ち上がるので、「cmd」と入力して、cmd.exeを起動します。「jpegtran」と入力しEnterを押して、次の画像のようにjpegtranのオプションがズラッと出てきたらインストール成功です。

PNG画像を最適化する『OptiPNG』の使い方

OptiPNGはPNG画像の最適化を行うツールで、使い方はjpegtranと大きな違いはありません。

コマンドラインから使うため、インストール時に環境変数に登録した方が使いやすくなります。

使い方を簡単にまとめると、jpegtranと同様、exeファイルダウンロードし、pathを通します。その後、コマンドライン上で圧縮したい画像があるディレクトリに移動し、次のコマンドを入力します。

    
    optipng 圧縮したいファイル名

圧縮率も変更できるのですが、多くの場合このまま使っても問題ありません。

また、OptiPNGは、複数ファイルに実行する場合もバッチ処理は必要ありません。

ワイルドカードを使い、次のようなコマンドを実行することで、一括で圧縮してくれます。

    
    optiping -dir directory *.png

「-dir directory」(dirオプション)の箇所を削除すれば、同じファイルに上書き可能です。

また、-dirオプションを使う場合、事前にディレクトリを作っておかないと、書き出しできないのでご注意ください。

OptiPNGのインストール方法

OptiPNGのインストールの方法も記載いたします。

こちらも公式ページからexeファイルをダウンロードして、環境変数に登録すれば使えるようになりますので、それほど手間はかからないと思います。

インストールはexeファイルをダウンロードして環境変数pathに登録するだけ

公式ページからexeファイルをダウンロード

公式ページ[http://optipng.sourceforge.net/]の「optipng-0.7.6-win32.zip」をクリックして、ダウンロードします。

クリックしたら、SourceForgeというWebサイトへ接続しますので、そこでzipファイルをダウンロードします。
zipファイルを展開し、exeファイルの設置ディレクトリを環境変数pathに登録する

ダウンロード後、exeファイルが置かれたディレクトリを環境変数pathに登録するとoptipngコマンドが使えるようになります。

ただ、今回は、jpegtranのインストールの際に使ったディレクトリが既に環境変数Pathに登録されているので、optipng.exeをjpegtran.exeと同じフォルダに移動します。
コマンドラインで「optipng -h」と入力して動作確認する

cmd.exeを起動し、「optipng -h」と入力した後、Enterを押して、次の画像のようにOptiPNGのオプションがズラッと出てきたらインストール成功です。