XR/WebP)』についてB!ブログに限らずサイトのスピード・パフォーマンスはPVに直結する要素の一つです。testmysiteという有名なサイトでサイトの速度を簡単に計測ができます。https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/ここでサイトスピードを計測すると必ずといっていいほど下のアドバイスが出てきます。モバイルデータの消費量も減少します。画像を配信してください。https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite/あるいはChromeのデベロッパーツール内のAuditsでもいいかもしれません。JPG/PNGなんか辞めて次世代フォーマット使えとのこと。いうわけで今回はtestmysiteやAuditsで表示されるアドバイスである『次世代フォーマットで画像を配信する』について良く分からない記述が多いから調べてみました。長い記事になってしまったので結論だけ知りたい方は下にある目次から『結局どうすればいいのか』の箇所まで飛ぶと幸せになります。2000(.jp2)についてJPGの後継規格。画像を綺麗に表示する形式として2001年頃に登場したよう。XRを開発したこともあってWindowsに採用されず、その結果うまく普及されなかったそうです。XR(.jxr)についてJPGの後継規格。前述の通りMicroSoftにより開発され、優れた圧縮と広範囲色調が特徴です。デジカメ界隈で人気なそうな......。WebP(.webp)についてGoogle尊師の開発する形式で、主流の画像形式(jpg/png/gifなど)はほぼ全てWebPに置き換え可能。WebPについては下記の引用が参考になるかと。Web以外にも広く使われているJpegに対し、Webでの配信に特化して軽量化されたフォーマットという理解がしっくりきます。当然ですが、対応されていないブラウザでは画像が表示されません。実際に確認してみます。各画像形式のデモこちらが今現在広く使われるPNG形式です。この画像をそれぞれの形式に変換しています。参考になるかは分かりませんが、ウィズディブ旧サイトへアクセスしてくるユーザーの各ブラウザ比率はこんな感じ。Chrome圧倒!とはいえ、他のブラウザを無視するわけにはいかない模様。結局どうするのがいいのか結論:WebP導入しましょうWebPの導入方法まず、前提として、ChromeやFireFoxなど以外のブラウザでは対応していないため、訪問ユーザーの使用ブラウザに合わせて形式を切り替える(=プログレッシブエンハンスメント)する必要があるので一括で拡張子を変えたりしないようにする必要があります。切り替えであるため、jpg/pngなどと同時にwebp形式も用意しなければなりません。同じ画像を2つの形式で用意する必要があるということです。それなりに面倒な作業ですので、下記サイトでWebP導入でどれくらいの圧縮効果が得られるか見てみましょう。https://sim.lightfile.net/webp当サイトの旧バージョンの場合はこんな感じ。WordPressであれば導入方法は以下の3通り。src="xxx.jpg"><!--webp非対応ブラウザではこちらが表示される--></picture>pictureタグでWebP用のコードと通常のimgタグを囲むという方法です。こちらの方法だといちいちhtml編集しなければならないのでブログでは面倒臭いですね。.htaccessを編集する注意:.htaccessファイルはWPにおいて重要なファイルです。ダウンロードしてコピーをローカルのPC内に控えておいたりするなどバックアップしておきましょう。Express」でWebP画像へ対応こちらの記事を参照すると幸せ。無料のWordPressテーマです。✒️たかさきしがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。キャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。内容をご確認の上、送信してください。お名前メールアドレス次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。👘CreatedBy。