14May2020

SEOに効果的｜pngquantで画像を一括高圧縮

pngquantを利用した画像の一括圧縮について解説。SEOではページの速度要件が盛り込まれています。特にモバイルではデータ容量を節約するためにも画像の圧縮は必須。通常サイト内には画像が膨大にありますのでpngquantで一括圧縮しましょう。

この記事は約分で読めます。（文字）

画像圧縮プログラム pngquant

オンラインで利用できる画像圧縮プログラムTinyPNG。高画質で圧縮率も高く好評ですが、いちどに処理できる枚数等オンラインならではの問題点もあります。

TinyPNG内ではpngquant（ピングクォント）という画像圧縮プログラムが利用されていますので、これをローカルで実行すれば枚数等の制限もなく一括で大量に高速処理することができます。

pngquantのインストールにはHomebrewを使います。Homebrewをまだインストールできていない方は下記のページをご参照ください。

Homebrewの基本とインストール方法・使い方

MacでPythonの環境構築や各種パッケージのインストールなど頻繁に利用されるHomebrew。Homebrewの基本的な知識や役割に関する情報とインストール…について解説しています。Macで各種環境構築を行うときには必須となるものです。

pngquantのインストールコマンドは以下の通り。

$ brew install pngquant

pngquantを使って画像を一括圧縮するにはまず最初に画像が置かれているディレクトリに移動します。cdコマンドを使ってディレクトリを移動しましょう。

$ cd 画像のディレクトリパス

基本的な圧縮コマンドは以下の通り。

ファイル名を直接指定して圧縮する場合

$ pngquant ファイル名

ディレクトリ内のpngを一括圧縮する場合

$ pngquant *.png

pngquantにはオプションコマンドが用意されています。ここではいくつか代表的なものを紹介しておきましょう。

オプションコマンド	オプション内容
--ext	出力ファイル名を指定。後ろに “.png”を指定すると同じファイル名で出力
--force	同名ファイルが存在する場合上書き
--speed	処理速度を指定。1（ブルートフォース）から10（最速）まで。速度と品質はトレードオフ。デフォルトは3。速度10は品質が5％低くなりますが、デフォルトの8倍高速。速度1で品質は最高。

オプションコマンドを利用した便利な実行例を紹介。ここで紹介する下記の2コマンドのいずれかを利用することでたいていの処理は完了できます。

ディレクトリ内にある画像に対して一括で圧縮を行います。

$ pngquant --ext .png --force --speed 1 *.png

ディレクトリ内の第一階層にすべての画像がある場合は上記のコマンドで良いのですが、ディレクトリ内に階層構造で分かれている場合は下記のコマンドに変更することで再帰的に処理でき一括圧縮できます。

$ find . -name "*.png" | xargs pngquant --ext .png --force --speed 1

後はImageOptim等でメタタグを一括で削除しておけばかなりファイルサイズを節約できます。

GoogleはSEOにページの表示速度に関する指標を多く利用しています。積極的にファイルサイズを圧縮することでSEOにもプラスの効果が働きますし、もちろんユーザにも優しいサイト作りにつながります。

pngquant利用してローカルに効率的な画像圧縮環境を構築しておきましょう。