サイトをいい感じにカスタマイズしていくためのテクニック方法をわかりやすく解説。
サイトやブログの全画像をWebPで作成できるように…なるのは、まだ時間がかかりそうです。
SafariがWebP対応したのは2020年9月。3ヶ月経過して対応ブラウザもかなり増えてきました。
スマホ対応も含めたサイト制作では、iPhoneの対応状況が一番の問題になります。動作確認もiPhoneが1番でAndroidは未だシェアが低め
スマホのアクセスが90%のサイトであれば、70%ぐらいがiPhoneでのアクセスのサイトも多くあります。Androidは未だ20%と国内でのシェアは低めですね。
iPhoneでもデフォルトブラウザのSafariを使う方がほとんど。そうなるとサイトやブログの動作チェック、表示確認はSafariがメインとなります。
ここ最近の動向では、Safariがやや問題児的な扱いになりつつあります。サイト制作の点では、GoogleのAMPやMFIといった点も視野に入れつつ、WebPや遅延読み込みなどで表示速度を改善する必要があります。
WebP画像への対応はSafariはかなり遅め。iOSからの対応でパソコン版のMacOSに至っては部分的な対応になっています。どうも最新の技術を取り入れるという印象のあるAppleですが、ブラウザなどの点では保守的なのかもしれません。
Safariが問題児と印象が強いのが、画像の遅延読み込みの点。JavaScriptを使えば画像の遅延読み込みは可能ですが、loading lazyを記述することによる遅延読み込みの点でもMacやiPhoneは未だ未対応。
loading lazy は、
<img loading=”lazy” src=”image.jpg”>
と記述することで遅延読み込みができてしまうお手軽な方法なのですが、Safariは未対応。次のバージョンでも対応予定なしとなっています。
loading lazyは、Web標準になったらしいので、対応ブラウザが続々と拡大中。もともとchromeでスタートしたので、Google系の技術ですが、Android系はすでに対応済み。Firefoxも対応しています。
残るメジャーブラウザはSafariですが、これにはまだ時間がかかりそうです。
WebP画像にすることの最大のメリットは軽量化。JPEG画像と比較しても1/2から1/3のデータサイズにできます。
スマートフォンでの閲覧が多い昨今の状況では、こうした画像の軽量化できる技術は多いに歓迎です。
5Gが今後拡大していくのなら、こうした軽量化の技術は必要ないのではと思われるのも理解できるのですが、5Gのエリアは、まだ一部のみ。
そもそも5Gは周波数を3.7GHz、4.5GHz、28GHzといった高い周波数を利用しているので、基地局からの電波が届く範囲が狭いのが特徴。通信速度は高速ですが、対応エリアがかなり限られるので、まだ期待しないほうがいい状況です。
画像の遅延読み込み+画像の軽量化で、表示速度が高速化できるので、今のところはWebPを視野にいれつつサイト制作していくのがいいみたいです。
Safari 14のシェアが30%近くと増えてきています。2020年9月のリリース以来、iOSへの更新が増えてきた結果です。
アクセス解析した結果としてみると、スマホでのアクセスが90%の内、iOSは70%、Androidは20%。
iOSの中では、ブラウザはほとんどがSafari。Safari 14が30%となってきているので、iOSの40%が未対応。
パソコンの方では、chromeが強いので、IEが0.5%と考えると全体で41%がWebP未対応のブラウザということになります。
残り41%が10%未満になってきたぐらいで全画像をWebPに切り替えることもできるのですが、今のところまだ様子見しておいた方がいいかもしれませんね。
■更新履歴
2021/1/4 記事を公開しました。