SEOに効果的|pngquantで画像を一括高圧縮のイメージ画像

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

  • 公開日:2018/10/19
  • 更新日:2020/05/14
  • 投稿者:n bit

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

  • フロントエンド開発
  • SEO

この記事は約 分で読めます。(文字)

画像圧縮プログラム pngquant

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

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

pngquantのインストール

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

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

$ brew install pngquant

pngquantで画像一括圧縮

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

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

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

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

$ pngquant ファイル名

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

$ pngquant *.png

pngquantのオプションコマンド

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等でメタタグを一括で削除しておけばかなりファイルサイズを節約できます。

今日のdot

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

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