UNIX Cafe | 第24回
WebPってどんな画像？
カフェの窓から光が入る午後。
ミナちゃんは、ノートPCで写真素材を眺めています。
ミナちゃん先生〜！
この前“画像を小さくする”のはできたけれど、最近よく聞く“WebP（ウェッピー）”って何なんですか？
ユニ先生WebP（ウェッピー） は、Googleが作った“軽くてキレイな新しい画像形式”なんだ☕
ミナちゃん軽いなら、サイトもサクサク動きそうですね！
ユニ先生そのとおり。
だからWeb制作では、とても人気のある形式なんだよ♪
JPEGやPNGよりも、ファイルサイズが小さくなりやすい のが特徴です。
どうしてWebPが人気なの？
人気の理由
- 画像のファイルサイズが小さい
- 透明表現（透過）が使える
- 表示が速くなりやすい
- SEOにもプラス
- ほとんどのブラウザで対応済み
ミナちゃん軽いのに透明もできちゃうって、すごく便利ですね♪
ユニ先生そうそう。“JPEG＋PNGのいいとこ取り”みたいなものなんだよ☕
ImageMagickの準備
ミナちゃんWebPに変換するのって、むずかしいですか？
ユニ先生大丈夫♪
前回使った ImageMagick（イメージマジック） があれば、コマンドでサッと変換できるんだ。
ImageMagick をインストール（macOS）
bash
$ brew install imagemagickまだインストールしてない人は、macOSなら Homebrew で簡単に使えるようになります。
WebPへ一括変換：基本コマンド
ユニ先生フォルダ内の画像をまとめてWebPに変換したいときは、mogrify が便利だよ☕
bash
$ mogrify -format webp *.jpg*.jpg：フォルダ内の JPG を全部対象.webpファイルが同じ場所に生成される
ミナちゃんすごい！一気に変換できるなんて、便利〜♪
ユニ先生ただし……元の画像が上書きされてしまう可能性があるから、
安全に試す方法 も覚えておこう。
フォルダを分けて安全に変換しよう
新しくフォルダを作って、そこへWebP画像を保存する例を紹介します。
ミナちゃん失敗したら戻せなくなるのはこわいです！
ユニ先生そんなときは、convert + for ループで
別フォルダに保存しよう。
mkdir -p webp
for img in *.png
do
magick "$img" -quality 85 "webp/${img%.*}.webp"
done
mkdir webp：保存フォルダを作る${img%.*}：拡張子を取り除いた名前-quality 85：画質を保ちつつ軽量化
ミナちゃんわぁ…ちゃんと安全に保存できるんですね♪
ユニ先生うんうん。
ファイルを扱うときは、“元を残しておく”のが大切なんだ☕
ファイルに実行権限をつける
ミナちゃんファイル名は「convert_webp.sh」にして保存し、実行権限をつけましょう。
bash
$ chmod +x convert_webp.shそして、実行！
bash
$ ./convert_webp.shTry it!｜かんたん3ステップでチャレンジ
シェリもう一度、いっしょに見てみましょう。ゆっくりで大丈夫ですよ。
ImageMagickを入れる
bash
$ brew install imagemagick画像のあるフォルダへ移動
bash
$ cd ~/Pictures/photoWebPへ変換
bash
$ mogrify -format webp *.pngほんとに3ステップでできちゃった…！
カフェのコーヒーを飲んでる間に終わりそう♪
まとめ
- WebPは軽さが魅力
-quality 85くらいがバランス良い- 元データを残すなら、
convert＋別フォルダ - WordPressでも使える
- 非対応ブラウザはほぼない
- png → WebP は画質が劣化しない。
- jpg → WebP は劣化する。
ミナちゃんWebP、すごく便利ですね！
しかもまとめて変換できるなんて感動です♪
ユニ先生読んでもらう人にとって、ページが“パッ”と開くのはうれしいよね♪
画像はひと工夫するだけで、もっと快適なWebに近づけるんだよ☕
