ホームページ開発に画像形式WebPを導入

Microsoft EdgeがWebP形式に対応するということで、ホームページ開発でもそろそろ本格的にWebPを導入しようと調査しているときの覚書。

今のブラウザ対応情報はこちら。

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タグを使う。



【関連記事】

コメント

このブログの人気の投稿

オンサイトサポートとは(=出張サポート)

スタートアップで起動するアプリを停止する方法

既存のディレクトリ(フォルダ)にgit cloneして上書きしたい