ホームページ開発に画像形式WebPを導入
Microsoft EdgeがWebP形式に対応するということで、ホームページ開発でもそろそろ本格的にWebPを導入しようと調査しているときの覚書。
今のブラウザ対応情報はこちら。
IEとSafari以外は対応済み。
画像の最適化に関する参考になる記事。
WebPの公式サイト
だけど更新されていないので、Windows10の場合はGIMPがいいと思う（GIMP 2.10.0から対応）。参考：GIMP 2.10.8 Released - GIMP
Linuxの場合は将来的な自動化も含めて、ImageMagickで変換するのがいいと思う。PHPからも使えるし。
ImageMagickをインストールするときに意識してなかったけどWebP対応してた。
# convert --version
# convert -list format | grep web
変換してみる。
# convert key-visual.jpg -quality 75 key-visual.webp
一括変換
# mogrify -quality 75 -format webp -path ./photos/ ./photos/*.jpg
Jpegは273KB→81KB（3分の1）に、丸抜きのプロファイル用PNG画像は379KB→20KB（19分の1）になった。見た目の劣化はなし。
（表示するときはGoogle Chromeにドラッグアンドドロップ）
変換オプションの詳細は公式を参考に。
HTMLで記述する際はpictureタグとsourceタグを使う。
【関連記事】
今のブラウザ対応情報はこちら。
IEとSafari以外は対応済み。
画像の最適化に関する参考になる記事。
WebPの公式サイト
JpegをWebPに変換する方法
Photoshopのプラグインがある。だけど更新されていないので、Windows10の場合はGIMPがいいと思う（GIMP 2.10.0から対応）。参考：GIMP 2.10.8 Released - GIMP
Linuxの場合は将来的な自動化も含めて、ImageMagickで変換するのがいいと思う。PHPからも使えるし。
ImageMagickをインストールするときに意識してなかったけどWebP対応してた。
# convert --version
Version: ImageMagick 6.9.10-40 Q16 x86_64 2019-04-15 https://imagemagick.org
Copyright: c 1999-2019 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP
Delegates (built-in): bzlib cairo djvu fftw fontconfig freetype gslib gvc jbig jng jp2 jpeg lcms ltdl lzma openexr pangocairo png ps raw rsvg tiff webp wmf x xml zlib
# convert -list format | grep web
WEBP* WEBP rw- WebP Image Format (libwebp 1.0.2 [020E])
変換してみる。
# convert key-visual.jpg -quality 75 key-visual.webp
一括変換
# mogrify -quality 75 -format webp -path ./photos/ ./photos/*.jpg
Jpegは273KB→81KB（3分の1）に、丸抜きのプロファイル用PNG画像は379KB→20KB（19分の1）になった。見た目の劣化はなし。
（表示するときはGoogle Chromeにドラッグアンドドロップ）
変換オプションの詳細は公式を参考に。
HTMLで記述する際はpictureタグとsourceタグを使う。
【関連記事】