WebPとは？JPGからWebPへ。HTMLへの実装・検証結果。 / メモ / いがわ

WebPとは？JPGからWebPへ。HTMLへの実装・検証結果。

2021.10.22 2024.03.25更新。

Contents - 目次

1 WebPってどうなのだろう？メリットは？
2 WebP未対応からWebP対応へ。
3 JPGをWebPへ。
4 PageSpeed Insightsの結果。
5 WebPのブラウザ表示はどうか。
6 WebPの実装ページ。
7 古い機種でのWebP表示不可の原因。
8 WebP表示の対処方法の例。
9 補足。

WebPってどうなのだろう？メリットは？

画像はWebP形式の時代へ。

WebPはGoogleが作った画像ファイル形式。

Webサイトで使用されている画像をJPGからWebPにしよう、という流れがある。

Googleの推しが凄いが、実際に軽くなる。

JPGからWebPへ。

JPGやPNGからWebPへ。

WebPのメリット。

画像自体の見た目のクオリティはJPGでも全く気にならず、人間の目では判断できないほどの十分な色数、画質があるが、WebPは容量が軽いというメリットがある。

PNGでは重く、JPGでは扱えない、アルファチャンネルを使えるのも良い。

GIFのような、アニメーションにも対応している。

使用カメラや撮影日のメタデータとして利用されている「EXIF」はないようだが、それでもWeb制作においてはメリットの方が大きい。

WebPへ変換、「Convertio」。

URL：https://convertio.co/ja/webp-converter

WebPへ変換可能。Convertioのファイルコンバーター。

WebP未対応からWebP対応へ。

WebP未対応が長い間続いた。

画像のWebP、動画のWebM。

WebP（やWebM）自体は目新しいものではなく、10年ほど前から知られていた。普及しなかった最大の理由は、未対応のブラウザやソフトの多さだろう。

それが、昨年2020年あたりからiPhone（iOS）の対応開始により、WebPが普及しそうな雰囲気が増してきた。

数年くらい前からiPhoneのカメラではheicという画像形式が採用されていたが、heicはWordPressに対応していなかった。

（※おそらく2024年3月現在でも対応していない。）

PhotoshopやIllustratorは2023バージョンからWebPの対応がされた模様。Figmaもプラグインで対応可能。

WebPのお話しをしよう。

JPGをWebPへ。

WebPと5Gと。

5Gは、劇的なほど速くはない。

これから5Gの時代がやってくるが、意外と5Gは速くない。

東京在住の方がスピードテストの結果を公表してくれていたが、下り速度（サイトを見る側となる速度）が300Mbps以上の方もいれば、数十Mbpsという方もいた。

電波なので時間帯や天候や建物などの通信環境によって変動はあるだろう。それでもやはり、5Gで数十Mbpsではちょっと遅く感じる。4Gでも光回線でも普通に出る速度。

電波を受信するスマホの影響もあるだろうが、日本ではiPhoneが半分のシェア。その中で5G完全対応のiPhoneが普及していく。

WebPの読み込み速度を測る、PageSpeed Insightsのイメージ。

日本ではiPhone12も13も5Gのミリ波は未対応なので高速を出せないそうだ。その対応までの間はサイトの制作側としては無視のできない期間となるだろう。

そういう状況なのであれば、とりあえずWebPにしてみる。

WebPへ変換したところ。

5GよりもWebPに驚く。

実際にJPGやPNGをWebPに変換してみたところ、想像以上に軽くなった。容量が半分以下や、数百KBの画像が数十KBになることもある。

たまに逆に容量が大きくなった画像もあったが、ほとんどの画像ファイルは劇的に軽くなった。もともとPhotoshopなどで軽量化していたのにもかからずに、さらに軽くなった。

PageSpeed Insightsの結果。

新規サイトではWebPの方が良いだろう。

WebPで軽くなる。

WebPでサイトが爆速になるか？という問いに対しては、そんな単純なことではない。「ちょい速です。」くらいとなる。それでもほとんどの場合、画像容量は軽くなる。

PageSpeed InsightsでもJPGよりも上がる。

GoogleのPageSpeed Insightsでも爆上がりがしないが、ちょっと上がる。

そもそも数十KB数百KBレベルの軽減では、ページの読み込み速度は爆上がりしない。

PageSpeed Insightsを気にする人はいるので、実際にやってみた、という検証結果にはできる。

たまにトップページのスライダーで数MB単位の画像ファイル類がアップされていることがあるが、そういう場合であれば99%以上軽くできる。

WebPのブラウザ表示はどうか。

各ブラウザでのWebPは下記の通り。

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 のセキュリティリリース – Apple サポート

WebPの実装ページ。

WebP実装のサイト。

マイク英会話教室札幌オンラインレッスンページ（type属性追記前。スライダー部分の画像と、動画のposter画像が正常に表示されていない。）

参考：https://mikesenglishclass.jp/online-lessons

WebP未対応のブラウザ。

古い機種でのWebP表示不可の原因。

type属性の有無で異なる。

原因はよくわからないが、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はもともと追加済み。

type属性を追記、値を”image/webp”で解決。

結果的に、htmlファイルでtype属性の値を”image/webp”に指定すると表示がされた。

type属性はW3C的には省略可能となっているのでhtmlには記述しておらず、なかなか気がつかなかった。

WebP表示の対処方法の例。

対応ブラウザではWebPで、未対応ブラウザではJPGを表示。

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

WebP未対応のブラウザはJPGを表示。

補足。

videoタグのposter属性。

videoタグのposter属性では表示される場合と表示されない場合があった。
imgタグのようにvideoタグの中にtype属性を追加してみたが、変わらず。

原因がわからなく、これ以上の時間も取れないので、WebPではなくJPGにした。

videoタグはあってもページ内に２つ３つ程度で、かつposter属性はあくまでも動画の代替画像なので、まず問題にはならない。なのでこの部分は現時点（2021年10月）ではJPGのままが無難。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。