コマンドラインで画像をWebPに一括変換

目次

パフォーマンスの診断

PageSpeed Insightsで当サイトのパフォーマンスを測定してみたら、画像のフォーマット及び画像サイズでかなりパフォーマンスが悪くなっている。

画像のフォーマットについて調べたら、webPフォーマットが良さそうなので、webPに変換して画像をアップするようにしたいと思い調べてみました。

WebPとは

WebPは、Googleによって開発された画像フォーマットで、静止画および動画に対応しています。このフォーマットは、ファイルサイズを小さくしながらも高い画像品質を維持することを目的としており、特にウェブ上での画像配信において効果的です。WebPは、JPEGおよびPNGフォーマットに比べて効率的な圧縮を提供し、透明性をサポートしています。また、アニメーション画像の作成にも利用することが可能です。

WebPフォーマットの主な特徴は以下の通りです:

  • 効率的な圧縮: WebPは、JPEGやPNGと比較して小さなファイルサイズで高品質の画像を提供します。これにより、ウェブページの読み込み速度が向上し、データ使用量が削減されます。
  • 透明性のサポート: PNG同様に、WebPはアルファチャンネルをサポートしており、透明な画像を作成することが可能です。
  • アニメーションのサポート: WebPはアニメーションをサポートしており、GIFに代わる選択肢として利用することができます。
  • ロスレスおよびロスィ圧縮: WebPは、ロスレス(無劣化)圧縮とロスィ(有劣化)圧縮の両方をサポートしています。これにより、画像の品質とファイルサイズのバランスを自由に選択できます。
  • 広範なブラウザとツールのサポート: 主要なウェブブラウザや画像処理ツールの多くは、WebPフォーマットをサポートしています。

Macにインストール

Macにwebp変換ツールをインストールするには、homebrewが一番手っ取り早いです。

Homebrewでインストール

brew install webp

これで、cwebpエンコーダーアプリケーションがインストールされ、WebPフォーマットで画像を圧縮することができるようになります​​。

ダウンロード画像を変換

ダウンロードしたjpegやpng画像をwebpフォーマットに変換するために、下記のコードを ~/.zshrcファイルに記述します。

※ 尚、Downloadsディレクトリは、jpegやpngだけ無く、いろんなファイルをダウンロードするので、先にDownloadsディレクトリの直下にconvertディレクトリを作成しておきました。

convert_to_webp() {
  # ワイルドカードが何にもマッチしない場合にエラーを無視する
  setopt local_options nullglob

  # 入力と出力ディレクトリを変数で定義
  local input_dir="/Users/[ユーザーディレクトリ]/Downloads/convert"
  local output_dir="/Users/[ユーザーディレクトリ]/Downloads/convert/webp"
  local old_images_dir="$output_dir/old_images"

  # 出力ディレクトリとold_imagesディレクトリが存在しない場合は作成
  mkdir -p "$output_dir"
  mkdir -p "$old_images_dir"

  # 入力ディレクトリに移動
  cd "$input_dir" || return 1

  # 各画像ファイルに対してcwebpで変換を行う
  for file in *.jpg *.jpeg *.png; do
    # ファイルが存在するか確認
    [ -e "$file" ] || continue
    
    # 出力ファイル名を決定(拡張子を.webpに)
    local output="${file%.*}.webp"
    
    # cwebpで変換、圧縮率を60%に設定
    cwebp -q 60 "$file" -o "$output_dir/$output"

    # 変換後のオリジナルファイルをold_imagesディレクトリに移動
    mv "$file" "$old_images_dir/"
  done

  # デフォルトのディレクトリ(通常はホームディレクトリ)に移動
  cd ~
}

コードを記述したら、シェルコマンドを読み込んで実行できるようにsourceコマンドを実行します。

source ~/.zhrc

これで、ターミナルから convert_to_webp コマンドを実行すると、Downloads/convertファイルにある、jpegやpngファイルがwebpに変換され、オリジナルファイルは、Downloads/convert/old_images ディレクトリに移動します。

改善結果

画像をjpegやpngからWebPに変更したら、以下のように改善されました

「次世代フォーマットでの画像の配信」項目が消えました。尚、画像サイズも若干修正したので、「適切なサイズの画像」項目も改善されています。

レンダリングを妨げるリソースの除外についても後日調べて改善してみたいと思います。

画像サイズ

SEO(画像表示速度)的に適切な画像サイズを下記に記述しておきます。

画像の種類サイズ
メインビジュアル横幅 1280px(PC)縦幅 〜720px程度まで
横幅 640px(SP) 縦幅 〜960px程度まで
ヘッダーロゴ600×135px
アイキャッチ1200×630px
サイトアイコン512×512px
NO IMAGE1200×630px
OGP1200×630px
コンテンツヘッダー横幅 1280px

上記は、あくまでもSEO的な画像サイズです。各サイトのコンセプトによりますが、ズームアップしても綺麗な画像を提供したいのなら、画像サイズは適切に変更してください。

コード修正

追記です。いちいちconvertディレクトリに移動するのが面倒になったので、コードの修正と、関数の外部書き出しを行います。

STEP
旧関数の削除

まず、.zshrcの中に記述してあるconvert_to_webp関数は、削除してください。

STEP
ディレクトリの作成

次に、ホームディレクトリ直下にmy_scriptsディレクトリを作成します。

mkdir ~/my_scripts
STEP
convert_to_webp.shの作成

その中に、convert_to_webp.shファイルを作成します。

vim ~/my_scripts/convert_to_webp.sh
STEP
コードの記述

その中に、下記のコードを記述します

#!/usr/bin/env zsh

 # ワイルドカードが何にもマッチしない場合にエラーを無視する
 setopt local_options nullglob

 # 入力と出力ディレクトリを変数で定義
 local input_dir="/Users/[ユーザーディレクトリ]/Downloads"
 local output_dir="/Users/[ユーザーディレクトリ]/Downloads/webp"
 local images_dir="/Users/[ユーザーディレクトリ]/Downloads/images"  # webpと同じ階層に設定

 # 出力ディレクトリとimagesディレクトリが存在しない場合は作成
 mkdir -p "$output_dir"
 mkdir -p "$images_dir"

 # 入力ディレクトリに移動
 cd "$input_dir" || return 1

 # .jpg, .jpeg, .pngファイルだけを対象とする
 for file in *.jpg *.jpeg *.png; do
   # ファイルが存在するか確認
   [ -e "$file" ] || continue
    
   # 出力ファイル名を決定(拡張子を.webpに)
   local output="${file%.*}.webp"
    
   # cwebpで変換、圧縮率を60%に設定
   cwebp -q 60 "$file" -o "$output_dir/$output"

   # 変換後のオリジナルファイルをimagesディレクトリに移動
   mv "$file" "$images_dir/"
 done

 # デフォルトのディレクトリ(通常はホームディレクトリ)に移動
 cd ~

Downloadsディレクトリ内にある全ての画像ファイル(jpg,jpeg,png)をWebPに変換し、念のため元のファイルは、webpディレクトリと同じ階層にあるimagesに移動するように修正しました。

STEP
実行権限の付与

次に、このファイルに実行権限を与えます

chmod +x ~/my_scripts/convert_to_webp.sh
STEP
パスを通す

このコマンドをどこからでも使えるようにパスを通します。~/.zshrcファイルの中に下記を追加記述します。

export PATH="$HOME/my_scripts:$PATH"
STEP
ターミナルの再起動

ターミナルを再起動するか、下記を実行します。

source ~/.zshrc
STEP
実行

試しに、Downloadsディレクトリに画像(jpg,jpeg,png)をダウンロードしてから、下記コマンドをターミナルで実行してみてください。

convert_to_webp

きちんと、Downloadsディレクトリから画像が消え、Downloas/webpにWebpフォーマットの画像が生成されれば、大丈夫です。

前回は、簡略化して、.zshrcの中に関数を記述しましたが、本来的にはこちらの記述方法が正しいと思います。

スクリーンショットの保存先変更

スクリーンショットの画像をブログの画像として使うことも多いので、スクリーンショットの保存先もDownloadsに変更します。

  • コマンド+Shift+5でスクリーンショットを起動
  • オプションをクリック
  • その他の場所をクリック
  • Downloadsディレクトリを開いて、選択をクリック
  • 次回以降のスクリーンショットの保存先がDownloadsディレクトリになります。

これで、スクリーンショットの画像もWebPに変換されますので、変換忘れがなくなります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次