JPGからWebPへ? HTMLへの実装・検証結果。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

JPGからWebPへ? HTMLへの実装・検証結果。

webpの検証結果。

JPGからWebPへ? HTMLへの実装・検証結果。

WebPってどうなのだろう?

JPGからWebPだって。

Webサイトで使用されている画像を、JPGではなくWebPにしよう、という流れがある。Googleの推しも凄い。画像自体の見た目のクオリティはJPGでもPNGでも全く気にならず、人間の目では判断できないほどの十分な色数、画質があるが、WebPは容量が軽くなるというメリットがある。

JPGでは使えない、アルファチャンネルも扱えるのも良い。使用カメラや撮影日のメタデータとして利用されている「EXIF」は使えないようだ。


未対応が多かった。

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や無料ツールなどで軽量化して書き出していたのにもかからずにだ。これはすごい。

WebPのロゴ。

PageSpeed Insightsの結果。

WebPでサイトが爆速になるか?という問いに対しては、そんな単純なことではない。答えとしては「ちょい速です。」くらいとなる。
GoogleのPageSpeed Insightsでは爆上がりがしないが、ちょっと上がる。

そもそも理屈として数十KB数百KBレベルの軽減でページの読み込み速度が爆上がりするわけがないのだが、PageSpeed Insightsを気にする人はいるので、実際にやってみたよ、という検証結果にはできる。

たまにトップページのスライダーで数MB単位の画像ファイル類がアップされていることがあるが、動画ならともかく画像でMBは論外だ。絶対に軽くできる。


ブラウザ表示はどうか。

Mac

Mac(Big Sur)でのSafari、Chrome、Firefox(それぞれ最新バージョン)では問題なく表示できた。5Kのディスプレイでも十分なクオリティーを保っている。ちなみにOSのBig Surは2014年以降のMacはほぼサポートしている。

Windows

Windows(Win10)でのEdgeやChromeで問題なかった。(IEはすでにさよならを告げている。公式にも来年役目を終える。)

iPhone

iOS14のSarariで問題なく表示がされた。Wikipediaによると、iOS14はiPhone6s(2015年リリース)以降にインストールできる。

Android

実機確認はしていないが、AndroidはWebPと同じGoogle社の開発なので問題ないだろう。Wikipediaによると4.0以降(2011年リリース)ですでに対応しているそうだ。

iPad

古いiPadのSafari(iOS12.5.5)で、代替用のJPGが表示がされていないという現象があった。確認したところ、2つのサイトで同様だった。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未対応のブラウザ。


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

原因はよくわからないが、2013年モデルのiPad Airは、type属性の有無で解決できた。

たとえば、

<img src="xxxxx.webp” alt="xxxxx">

もしくは、

<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には記述しておらず、最初は気がつかなかった。


対処方法。

<img src="xxxxx.webp” alt="xxxxx">
<picture>
 <source srcset=“xxxxx.webp" type="image/webp">
  <img src="xxxxx.jpg" alt="xxxxx" >
<picture>

これで対応ブラウザではwebp表示となり、未対応のiOS12.5.5のSafariではJPGが代替表示される。
メディアクエリと併記しても大丈夫だった。

<img src="xxxxx.webp” alt="xxxxx">
<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属性では表示される場合と表示されない場合があった。
imgタグのようにvideoタグの中にtype属性を追加してみたが、変わらず。

原因がわからなく、これ以上の時間も取れないので、WebPではなくJPGにした。
videoタグはあってもページ内に2つ3つ程度で、かつposter属性はあくまでも動画の代替画像なので、まず問題にはならない。なのでこの部分は現時点(2021年10月)ではJPGのままが無難だ。

WebPの検証結果。

後日追記)
2022年6月のInternet Explorerのサポート終了により、全てのモダンブラウザでWebPの対応がなされたことになりました。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

※当サイトは個人のポートフォリオサイトであり、クライアントさま優先のため、画像の軽量化はしていません。(それでもPageSpeed Insightsではモバイル、パソコンともに80〜90のスコアです。)

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。