めちゃ軽い!! 次世代の画像フォーマットのwebPとAVIF
私が大阪府産業デザインセンターでデザイン相談員として担当しているホームページ無料診断の診断項目を解説するシリーズ第16弾!今回は、最後のチェック項目「次世代画像フォーマット webPとAVIF」について書きます。過去記事はこちら ブログのタイトルは何文字がいいか知ってる? メタ・ディスクリプション(概要文章)はちゃんと設定してる? 常時SSLじゃなくて、時々SSLになってるところ一定数ある説 ホームページのスマホ対応の方法はレスポンシブウェブデザインだけじゃない ページが無い時に表示されるエラーページもちゃんとせなあかんよ 今、絶対に取り組むべきはページ表示スピードの改善です ユーザーの使いやすさに配慮しよう! コアウェブバイタル ページのアドレスはちゃんと正規化できてる?? HTMLのエラーを侮ることなかれ リンクエラーはめっちゃもったいないって ホームページ(ブログ)は定期的に更新せんとあかんよ あなたのホームページは安全? セーフブラウジング Googleマイビジネスは使ってて当たり前ですよ! 検索結果ページで目立つリッチスニペットって知ってる? 【アメブロでもできる】ちゃんとアクセス解析して、お客さんの声を聞いてますか?次世代画像フォーマット webPとAVIFとは皆さんは画像ファイルと言えば、jpgやgif、pngなど思いつくと思いますが、最新の画像ファイルwebpとAVIFって知っていますか??大手サイトやポータルサイトなどで使われ始めています。webpとはjpgよりも軽くて、見た目の綺麗さは同じという新しい画像の種類です。 Googleが開発しているオープンな静止画像フォーマット。 ファイルの拡張子は「webp」。 2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。 WebP - WikipediaWikipediaの説明は、技術的な説明も入ってて、ちょっとややこしいですが、要は、Googleが開発した誰もが無料で利用できるjpgよりもファイル容量が軽い新しい画像です。AVIFとはwebPよりもさらに軽い新しい画像の種類です。さらに20〜30%ほど軽くなります(画像により誤差あり) AVIFはAV1画像ファイル形式です。 AVIFファイル拡張子は、Alliance for Open Media(AOMedia)によって開発されたAV1 Image File Formatに関連付けられています。 AOMediaは、マルチメディア配信のためのロイヤリティフリーテクノロジーを開発しています。 AV1は、Webサイトに画像を保存するために使用されます。 HEIF / HEIC形式に似ています。 AVIFファイル拡張子こちらも無料で誰でも利用できる画像ファイル形式です。webPよりもさらに軽いって、どんなけ〜です。ページ表示スピードの改善に最適だが..WikipediaのwebPの説明にあるように「ウェブサイトのトラフィック量軽減と表示速度短縮を目的」としていて、画像の重さが約半分ぐらいに軽くなるので、ページ表示スピードの改善にめっちゃ役立ちます!ちょっと前に「今、絶対に取り組むべきはページ表示スピードの改善です」って記事を上げましたけど、スピードアップの施策として是非とも検討すべき項目なんです。ページの表示スピードをアップさせたいなら、ページに掲載されている画像をすべてjpgやpngからwebPに変更したいですよね!だって、画像の重さが半分になれば、ページの表示速度も自ずとアップしますから。でも、webPやAVIFは注意しなければならないことがあります。それは、ブラウザの対応状況です。非対応のブラウザがあるこのwebPやAVIF形式の画像は、新しすぎて対応できてない(対応する気がない)ブラウザがあるんです。webPのブラウザ対応状況WebPのブラウザ対応状況が見られるサイトです。英語のページですけど、グラフで表示されているので、わかりやすいと思います。"webp" | Can I use... Support tables for HTML5, CSS3, etc"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.caniuse.comwebP非対応のブラウザは、MacのSafari(バージョン14)。MacのOSで言うと、Big Surの前のCatalinaに入っているSafariがそれになります。それと、Internet Explorerです。Internet Explorerはすべてのバージョンで表示することができません。まあ、もう終わったブラウザなんで、マイクロソフトも対応する気がないんでしょう。MacのSafari(バージョン14)とInternet Explorerが非対応なんですが、これらのブラウザを使用してホームページを閲覧している人の割合は、およそ5〜10%ぐらいです(当社管理サイトのアクセス情報から)このぐらいなら「まっ、えっか!」とwebPにするの良し、もう1年ほど様子を見てから対応するのもよしです。ちなみに当社のサイトは、もう半年ほど前から画像はすべてwebPです(笑)Internet Explorerで見てみてください。画像のところ真っ白です💦AVIFのブラウザ対応状況こっちはまだまだ多くのブラウザが非対応ですね。"AVIF" | Can I use... Support tables for HTML5, CSS3, etc"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.caniuse.comChromeとOpera以外は全滅って感じですね。アクセス解析から見ても、アクセス数の半分以上が非対応といったところでしょうか。まだまだ使えないかなと。ちょっとテクニカルな話になりますが、対応しているブラウザでアクセスされた時のみavifで表示することもできるので、どうしてもと言う方はチャレンジしてみてはどうかなと。webP・AVIFともに実践導入はもう少し先かいろいろ考えると、どちらのファイル形式ももう少し待ってから導入した方がいいのかなと思います。(webPに関しては、そろそろ導入してもいいかもしれませんが..)実際に、ホームページ無料診断でコメントを記述する際は、そういう風にお伝えしています。でも、半年か1年先ぐらいに、ホームページの画像をすべて入れ替える必要があるってことは考えておいた方が良いでしょう。そして、その準備も始めておくのが良いと思います。画像の元ファイルを準備したり、この際画像を入れ替えるのなら入れ替える画像を撮影するなども必要です。あと、更新費用も準備しておかないと。全ページの画像を入れ替えるとなると、そこそこ費用もかかってきますので。まとめページ表示スピードを改善するならば絶対に必要な新画像フォーマットのwebPとAVIF。もう少しすると、webPはごく一般的な画像形式になるでしょう。軽くて綺麗な画像は、ページの表示スピードを上げるだけでなく、メールで画像を添付して送る時だったり、スマホの容量を気にしなくても良くなったりと、いろいろなシーンで役立つことでしょう。あなたはいつwebPに画像を入れ替えますか?今度、ホームページをリニューアルする時ですか?それとも、すぐにでも入れ替えたいですか?どちらの時でも、当社はお手伝いできます!(笑)これからのweb集客には必須の取り組みになることでしょう。当社のwebコンサルティングでは必ずご提案する内容です。SEO対策として、ユーザーの使いやすさアップを考えて、さまざまな角度から、次世代ファイル形式の導入を考えられてはいかがでしょうか?