WebPへ変換？。メリットや実装・検証結果。
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
WebPってどうなのだろう？ メリットは？
Webサイトで使用されている画像をJPGからWebPにしよう、という流れがある。Googleの推しが凄い。
画像自体の見た目のクオリティはJPGでも全く気にならず、人間の目では判断できないほどの十分な色数、画質があるが、WebPは容量が軽くなるというメリットがある。
PNGでは重く、JPGでは使えないアルファチャンネルも扱えるのも良い。使用カメラや撮影日のメタデータとして利用されている「EXIF」は使えないようだが、メリットの方が大きい。
WebP未対応が多かった。
WebP（やWebM）自体は目新しいものではなく、10年ほど前から知られていたファイル形式だ。これまで普及しなかった最大の理由は、未対応ブラウザの多さだろう。
それが、昨年あたりからiPhone（iOS）の対応開始により、WebPが普及しそうな雰囲気が増してきた。数年くらい前からiPhoneのカメラではheicという画像形式が採用されていたが、heicはWordPressに対応していなかった。
（未確認だが、おそらく2021年10月現在でも対応していないのではないだろうか。）
PhotoshopやIllustratorは2021バージョンでもWebPの書き出しができない。プラグインは出ているようだが、iPhoneのWebP対応の影響により、もしかしたらデフォルトでも対応してくるかもしれない。
JPGをWebPへ。
これから5Gの時代がやってくるが、意外と5Gは速くないかもしれない。
東京在住の方がスピードテストの結果を公表してくれていたが、下り速度（サイトを見る側となる速度）が300Mbps以上の方もいれば、数十Mbpsという方もいた。
電波なので時間帯や天候や建物などの通信環境によって変動はあるだろう。それでもやはり、5Gで数十Mbpsではちょっと遅く感じる。4Gでも光回線でも普通に出る速度である。
電波を受信するスマホの影響もあるだろうが、日本ではiPhoneが半分のシェア。その中で5G完全対応のiPhoneが普及するまでも数年はかかるだろう。
日本ではiPhone12も13も5Gのミリ波は未対応なので高速を出せないそうだ。その間はサイトの制作側としては無視のできない期間となるだろう。
そういう状況なのであれば、とりあえずやってみる。
実際にJPGやPNGをWebPに変換してみたところ、想像以上に軽くなった。容量が半分以下や、数百KBの画像が数十KBになることもある。
たまに逆に容量が大きくなった画像もあったが、ほとんどの画像ファイルは劇的に軽くなった。もともとPhotoshopや無料ツールなどで軽量化していたのにもかからずに。これはすごい。
PageSpeed Insightsの結果。
WebPでサイトが爆速になるか？という問いに対しては、そんな単純なことではない。答えとしては「ちょい速です。」くらいとなる。
GoogleのPageSpeed Insightsでも爆上がりがしないが、ちょっと上がる。
そもそも理屈として数十KB数百KBレベルの軽減でページの読み込み速度が爆上がりするわけがないのだが、PageSpeed Insightsを気にする人はいるので、実際にやってみたよ、という検証結果にはできる。
たまにトップページのスライダーで数MB単位の画像ファイル類がアップされていることがあるが、動画ならともかく画像でMBは論外だ。99%軽くできる。
ブラウザ表示はどうか。
Mac
Mac（Big Sur）でのSafari、Chrome、Firefox（それぞれ最新バージョン）では問題なく表示できた。5Kのディスプレイでも十分なクオリティーを保っている。ちなみにOSのBig Surは2014年以降のMacはほぼサポートしている。
Windows
Windows（Win10）でのEdgeやChromeで問題なかった。（IEはすでにさよならを告げている。公式にも来年役目を終える。）
iPhone
iOS14のSafariで問題なく表示がされた。Wikipediaによると、iOS14はiPhone6s（2015年リリース）以降にインストールできる。
Android
実機確認はしていないが、AndroidはWebPと同じGoogle社の開発なので問題ないだろう。Wikipediaによると4.0以降（2011年リリース）ですでに対応しているそうだ。
iPad
古いiPadのSafari（iOS12.5.5）で、代替用のJPGが表示がされていないという現象があった。確認したところ、２つのサイトで同様だった。
2013年モデルだが、ネット閲覧も動画再生もGoogleドキュメントなども普通に利用できる。むしろできないことの方が今のところなく、古いiPadはもしかしたら学校などで使われている可能性があるかもしれない。なので代替手段を設定したい。
※Appleの公式サイトでは、iPhone 5s、iPhone 6、iPhone 6 Plus、iPad Air、iPad mini 2、iPad mini 3、iPod touch (第6世代)がiOS12.5.5がiOS12.5の最新バージョンとなっている。
出典；Apple セキュリティアップデート https://support.apple.com/ja-jp/HT201222
WebPの実装ページ。
マイク英会話教室札幌 オンラインレッスンページ（type属性追記前。スライダー部分の画像と、動画のposter画像が正常に表示されていない。）
https://mikesenglishclass.jp/online-lessons
古い機種でのWebP表示不可の原因。
原因はよくわからないが、2013年モデルのiPad Airは、type属性の有無で解決できた。
たとえば、
<img src="xxxxx.webp" alt="xxxxx">
もしくは、
<picture>
<source srcset="xxxxx.webp">
<img src="xxxxx.jpg" alt="xxxxx" >
<picture>
のような書き方だと、少なくともiOS12.5.5のSafariではWebPもJPGも表示されない。（PNGでも。）
※xxxxx」は画像ファイル名やパスの部分。
※.htaccessファイルで「image/webp 」のMIME Typeはもともと追加済み。
結果的に、htmlファイルでtype属性の値を”image/webp”に指定すると表示がされた。
type属性はW3C的には省略可能となっているのでhtmlには記述しておらず、なかなか気がつかなかった。
対処方法。
<picture>
<source srcset="xxxxx.webp" type="image/webp">
<img src="xxxxx.jpg" alt="xxxxx" >
<picture>
これで対応ブラウザではwebp表示となり、未対応のiOS12.5.5のSafariではJPGが代替表示される。
メディアクエリと併記しても大丈夫だった。
<picture>
<source media="(max-width: 767px)" srcset="xxxxx.webp" type="image/webp">
<source media="(min-width: 768px)" srcset="xxxxx.webp" type="image/webp">
<img src="xxxxx.jpg" alt="xxxxx" >
</picture>
WebPの実装ページ。
マイク英会話教室札幌 オンラインレッスンページ（type属性追記後。JPG画像に代替された。）
https://mikesenglishclass.jp/online-lessons
補足。
videoタグのposter属性では表示される場合と表示されない場合があった。
imgタグのようにvideoタグの中にtype属性を追加してみたが、変わらず。
原因がわからなく、これ以上の時間も取れないので、WebPではなくJPGにした。
videoタグはあってもページ内に２つ３つ程度で、かつposter属性はあくまでも動画の代替画像なので、まず問題にはならない。なのでこの部分は現時点（2021年10月）ではJPGのままが無難だ。
※後日追記）
2022年6月のInternet Explorerのサポート終了により、全てのモダンブラウザでWebP対応がされたことになりました。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
井川 宜久 / Norihisa Igawa
※当サイトは個人のポートフォリオサイトであり、クライアントさま優先のため、画像の軽量化はしていません。（それでもPageSpeed Insightsではモバイル、パソコンともに80〜90のスコアです。）