「ポイント活動/マインドフルネス/プログラミング」

訪問ありがとうございます。

「超効率的」なマニュアル風入門記事、まとめました。

準備中です!

「次世代フォーマットで画像を提供する」を解決する

PageSpeedInsights
この記事に書かれている内容はあくまで個人的な意見になります。
コメントよりツッコミお待ちしております。

どうも、まふとら(@maft7a)です。今更Twitterを開設しました。イェーイ。

さて、Googleが提供するPageSpeedInsightsが刷新され、新たなサイト監査項目が増えました。刷新後のスコアはかなり厳しいものがあり、モバイルは3G環境が基準で計測され、画像を多用しているサイトでは70点はおろか、50点を狙うのも厳しい状況です。

とりあえず、ご自身でサイトをお持ちの方はPageSpeedInsightsに通してみてください。絶望です。が、「つまり…絶望では希望を殺せないんだって!」

監査結果に着目する

「次世代フォーマットでの画像の配信」

まあ、3G回線主体であればこうなるよね。とも思いますが、それよりも気になるのは、「次世代フォーマットでの画像の配信」です。当サイトではTinyPNGを使って画像サイズの削減をしています。しかし、その状況下でも表示されるコレ。Googleさんによると、

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

とある。コレについて調べてみます。

次世代フォーマットでの画像の配信

軽く調べてみたところ、現在では次世代フォーマットのブラウザサポートはかなり限定的となっているようです。

次世代フォーマット「WebP」の対応状況(緑:対応)

その他にも、MicrosoftEdgeや、Safariに対応した次世代フォーマットがありますが、要は次世代フォーマットが乱立する、次世代フォーマット戦国時代が私の知らない所で密かに幕を開けていたみたいです。おお怖い。

解決方法は?

対応したい方向けに書きます。(参考:colissさん)

Image and Video Upload, Storage, Optimization and CDN
Manage web and mobile media assets with the leading cloud service: image and video upload, storage, manipulation, optimization and digital asset management.

参考サイトで紹介されている、cloudinaryを使います。cloudinaryは、メディアファイルを保存しておけるクラウドストレージ、また加工や配信などの機能を兼ね備えたサービスになります。

価格設定。次世代フォーマット対応はFreeで可能。

画像フォーマットに対応したいだけであれば、Freeアカウントで構いません。会員登録を済ませてしまいましょう。メールアドレスとパスワードを入力するだけ、であるので簡単かと思います。

ログイン後に出てくる謎のアンケート

謎の画像のアンケートは無視してもらって、次にメディアライブラリ(写真を保存しておく場所)に移ります。GoogleDrive利用者の方であれば、インターフェースが似ているのですぐ馴染むかと思います。

メディアライブラリを開く

以下の画面が開けたらOKです。今後使っていく場合はこのページをメインで使っていくこととなります。ココに写真をドラッグドロップしてください。

この画面に写真をドラッグドロップ

はい。コレで準備完了です。cloudinaryをブックマークに入れておくと良いかと思います。実際使い勝手は凄く良いですし。このサービス2011年からあるみたいで、全く知らなかった自分が少し恥ずかしかった所もありますね。

自動フォーマット対応の実力

ここまでお疲れ様でした。ここからが本番となります。

まずは、アップロードした画像を開いてください。すると、以下の画像の画面になるので、「Transform」をクリック。

Transformを選ぶ。

したらば、以下のように画像のFormatを「Auto」にしましょう。

FormatをAutoに。

そうすると、画面右側に表示されているリンクが変わります。以下のリンクを使うことで、自動でフォーマットが変わる画像を使うことが可能になります。お疲れ様でした!

このURLを使う。

(WordPressエディタによってはこのリンクを貼るだけで画像が表示されるようです。)

フォーマットの再確認

さて、長々と対策を書きなぐった…自分用なメモでもありますのでご容赦頂きたいですが、この手順は覚えておいて損は無いでしょう。いずれ必要になります。

それでは、実際にフォーマットを確認してみましょう。以下にサンプルの手順で使った画像を用意しました。手順で生成したリンクを貼り付けただけの状態となっています。

サンプルで作成したリンク

GoogleChromeを使っている方は、キーボード上のF12を押してください。開発者用オプションが開きます。開いた後に、「Network」タブを開き、自前のサイトを「再読込」してください。このサイトで同じ事をして頂いても構いません。

image/webpと表示される。(chromeの場合)

すると、無事「image/webp」と表示される事が分かるかと思います。サンプルで解説した画像は、全てpng形式なので、同画像を探して比べてもらうと分かるのですが、webpは15.6kb、pngは37.8kbと確かに削減できている事が分かります。

比較的簡単な一手間で次世代フォーマットに対応出来る事は分かりましたが…実際のところ、手間が増える事には変わりないので、悩む所ですが、しっかり対応すれば他サイトと差が付く部分となるかと思います。頑張って対策していきましょう。

参考文献

cloudinaryリファレンス

コメント