次世代フォーマットでの画像の配信?拡張子jp2やwebp奮闘記

ども!ポンちゃんです(後厄)

今日は11月12日にリニューアルされたGoogleの、
PageSpeedInsights(ページスピードインサイツ)」で実験してみようと思います。

あ、この記事で「次世代フォーマットでの画像の配信?拡張子jp2やwebp」の問題が全て解決されるわけではないので、あしからず。

この記事でわかること。

  • 画像を次世代フォーマットに変更する方法。
  • ワードプレスにアップできるファイル(拡張子)を増やす方法。

■未解決
・次世代フォーマットをブラウザごとに出し分ける方法。

(※閉鎖した以前のサイトで計測しています。)

モバイル

PageSpeedInsights初回の結果

パソコン

PageSpeedInsightsのPCの速度評価

あれ?モバイルがギリギリ「平均」という感じ。

以前他のサイトで試した時はモバイルもパソコンも8割以上ОKだったし、環境もそんな違いないはず。

かなりシビアになったっぽいですね。
(PCは大丈夫そうですね)

成績の下には「改善できる項目」が表示されます。

改善項目

まず「オフスクリーン画像の遅延読み込み」に関してはLazyLoad的なプラグインで対応できそうだし、「レンダリングを妨げるリソースの除外」もCSSの圧縮でなんとかなりそう。

次世代フォーマットでの画像の配信」というのがひっかかるので、開いてみると「JPEG 2000」とか普段扱ってない画像フォーマットの名前が。

今回はここにフォーカスしてみたいと思います。

対応の前に、PageSpeedInsights自体を計測。

モバイル

PageSpeedInsights自体の評価

パソコン

PageSpeedInsightsのPCの速度評価

さすが。

改善するためには画像を次世代フォーマットにした方が良いみたいですね。

XnConvertで既存の画像ファイルを次世代フォーマットに変換する。

まずはすでにサイトにアップされている画像を簡単に変換したいので、無料ツールを使用。

ツール名は「XnConvert
https://www.vector.co.jp/soft/winnt/art/se493068.html
(ベクターのダウンロードページにリンクしています。)

直感的に操作できるので、ここにポコポコ画像を入れていきます。

XnConvert01

「出力」のタブに切り替えて今回は「jp2」にして「変換」。

XnConvert

あっという間に「次世代フォーマット」の完成です。

次世代フォーマットに変換した画像がワードプレスにアップできない。

ここまで順調にPageSpeedInsights対応できたと思ったんですが、問題が発生。

普段通りワードプレスにドラッグ&ドロップで「次世代フォーマット画像」をアップしようとすると…

セキュリティ上の理由によりこのファイル形式は許可されていません。
とのこと。

方法を検索してみるとワードプレスの「function.php」に追加したいファイルタイプ(MIMEタイプ)を記述すればいけるっぽい。

でもちょっとそういうのめんどくさいな、と思ったのでプラグインを使用しました。

Enhanced Media Library

こんな感じで追加したいファイルタイプを既に入力されているものを参考に追加します。
(それってfunction.phpに直接追記するのと同じことしてるよ。って感じる方もいらっしゃるかと思います。その通りです。)

この後、普段通りワードプレスに画像をアップできました。

ここまでくれば、後は記事の画像を「次世代フォーマット」に対応した画像と入れ替えればОKですよね!

次世代フォーマットに対応したら画像が表示されやしない件

ここまで、本当は紆余曲折あっての作業だったんですが、なんとか次世代フォーマットに対応できたかな、というところ。ワードプレスにアップしてみると…

こんなん。
(「大小あります。」の上に画像が表示されるはず。でした。)

調べてみると各次世代フォーマットには対応ブラウザがありました。

■JPEG 2000
Safariのみ

■JPEG XR
⇒IEとEdgeのみ

■WebP
⇒Chrome、Edge、Firefox、Opera

今回の調査ではファイルタイプを「jp2」にしておきながら、IEとChromeとFirefoxで確認するという始末。

ここで「次世代フォーマット」に対する熱い思いは絶たれてしまいました。

「TinyPNG」で通常通り画像圧縮して終了。

次世代フォーマットを半分あきらめて、普段使っている「TinyPNG」で圧縮してから記事の画像を入れ替えました。

tinypng

このサイトは会員登録が必要なく、画像編集ソフトなどを起動する手間もなくWeb上にドラッグ&ドロップするだけで画像圧縮ができるので便利です。

再度PageSpeedInsightsで計測

今回PageSpeedInsightsを試した記事は当初圧縮されていない状態で成績は「ギリギリ平均の55

画像圧縮した後の成績はこちら。

微増。

まとめ:次世代フォーマットはpictureで表示切替ができそう

こ、今回の収穫は次世代フォーマットはそれぞれ対応ブラウザが違うというところですね。

その後、ちょっと調べてみると閲覧されているブラウザごとに表示を切り替える「picture要素の指定」ができるようです。

が、今はやる気がないので、また知ってる人に聞いてみたいと思います。

■今回の残尿感。

  • 既存の画像ファイルはXnConvertで良いが、無料の画像編集ソフト「GIMP」で次世代フォーマットに変換したい。
  • ブラウザごとに表示する画像を切り替えるのが面倒。一つの画像をワードプレスにアップするとXnConvert的に勝手に次世代してくれるプラグインが欲しい。


この記事を書いた人

ポンちゃん

TriggerWORKS:Webマーケティング担当。
基本的には胃腸虚弱。