あらすじ
Windows上で画像をwebp形式に一括変換する話です。
Macの人向けの記事は@tomokei5634さんが書いているこちらです。
動作仕様や、使い方などは@tomokei5634さんのスクリプトとほぼ同じです。
次世代フォーマットでの画像の配信
SEOの改善項目の中でも大きな指標である、ページスピード。Speed Insightもしくは、Google Chrome 52 以降に付属するLight Houseを使って計測する人は多いと思います。
計測してみると、改善項目の中に例えば「適切なサイズの画像」「画像次世代フォーマットでの画像の配信」と並んでいたりします。
「適切なサイズ」というのは、実表示サイズに対して、大きすぎる画像が置いてあり、縮小して表示しているから、時間と通信費がモッタイナイということですね。
問題の「画像次世代フォーマットでの画像の配信」では、画像の形式について触れられています。
「WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます。」とのことです。
WordPressでは、Wordpress上でWebpに一括変換してくれるwebp-expressや、サニタイズしてSVGを使えるsvg-supportといったプラグインを入れたりすれば一瞬で改善できます。
しかし、BASEのようなSaasでは、そもそもWebPに対応していなかったりします。(2021年09月の時点)
大量の画像をWebPにしたい
上記の測定結果をもとに、PC上に置いてある大量の画像を一括でWebP形式に変換したいという要望が生まれることと思います。それを実現するスクリプトを書きました。便利なので、皆さんに使っていただけたらなと思います。
メインのPowershellスクリプト
main.ps1というファイルを作成して、中に下記をコピペして使ってください。
$TargetFolder = "."
if ($null -ne $Args[0]) {
$TargetFolder = $Args[0]
}
$Files = (Get-ChildItem $TargetFolder -Recurse -Name -File -Include "*.jpg")
$Files += (Get-ChildItem $TargetFolder -Recurse -Name -File -Include "*.png")
foreach ($File in $Files) {
$FullName = "$TargetFolder/$File"
$Extension = (Get-Item $FullName).Extension
$GenerateFileName = "$($FullName.Substring(0,$FullName.Length-$Extension.Length)).webp"
Write-Output "<Source File Name: $File>"
cwebp -preset photo -metadata icc -sharp_yuv -o $GenerateFileName -progress -short $FullName
Write-Output "----------------"
}
スクリプトの使い方
使い方は、Powershellコンソールでmain.ps1の置いてあるフォルダに移動して、./main.ps1 <目的の画像が大量にあるフォルダのアドレス>という実行コマンドを入力するだけです。
具体的な流れは、以下を参考にしてください。
※あらかじめwebpをインストールしてください。
-
./photo_bin/に変換したい画像をすべて入れる- サブフォルダの中に画像があってもOK
- すでにあるフォルダを
./photo_bin/に見立てても大丈夫
-
./path_to_script/の中にmain.ps1を作成- 上記のスクリプトをコピーペーストしてテキストファイルを作成
- メモ帳でもVScodeでもなんでもよい
- 拡張子は
.txtではなく.ps1なので注意
- Powershell を開く
- ユーザー権限でOK
- バージョンは6以降がオススメ
-
./path_to_script/に移動-
cdと入力 - 続けて
- 続けて
./path_to_script/と入力 - Enterキー
-
- 変換実行
-
./main.ps1と入力 - 続けて
- 続けて
./photo_bin/をキーボード入力 - そのままEnterキー
-
ちなみに、実行コマンドを./main.ps1 <目的の画像が大量にあるフォルダのアドレス>とした場合、 <目的の画像が大量にあるフォルダのアドレス>というのは一般に引数と呼ばれます。これを指定せずに空白で実行コマンドを入力したとき、このスクリプトでは./main.ps1と同じフォルダ以下を指定して画像を変換するようになっています。
また、指定された場所に画像が無い場合には、何も実行しません。
動作確認済環境
- Windows 10 Home 21H1
- Powershell 7.1
- cwebp 1.0.0
※筆者の場合、あらかじめchoco install webp -yでwebp変換ツールをインストールしています。ほかのインストール方法は別途ググってください。
※筆者の場合、あらかじめchoco install pwsh -yで Powershell 7 をインストールしています。従来のインストール方法はMicrosoftの公式ドキュメントを見てください。
※筆者と同じ方法を使いたい方はchocolateyのインストールページを参考にしてください。
Macユーザーはこちら
cwebpのさらに詳しい使い方
Google DevelopersでのWebpに関する説明
スクリプトを書くのが面倒な場合
XnConvertというソフトがオススメです。買い切りライセンスでリーズナブルな価格設定となっております。使い方は簡単で、説明書きを読まなくても「なんとなく」で使える感じです。
Excelsior!