images.tooling.report でサイトの画像を完璧に仕上げる

イメージツールの状態を確認する。

Patrick Kettner
Patrick Kettner

ウェブに画像を公開すること自体は重要ですが、それを適切に行うことは困難です。適切な形式、圧縮、1 インチあたりのドット数(DPI)、その他数百の設定を選ぶと、これらすべてを自分たちでやるだけでは忘れがちです。

幸いなことに、今日では、これらすべてを代行してくれるツールやサービスがたくさんあります。しかし、幸いなことに、たくさんの音楽があります。どのツールやサービスが適切か迷うこともあります。そこで Google は、images.tooling.report をリリースします。このサイトでは、本番環境で画像を配布する際に最も重要なものをリストアップし、最も人気のあるソフトウェアやサービス(有料、無料、ホスト型、自己ホスト型)を比較できます。

なぜでしょうか?

画像はサイトで転送されるバイト数の大部分を占めており、このバイト数が加算されます。実際に、最適化されていない画像がページの合計サイズの約 75% を占めていることがわかりました。このような無駄なバイトには代償が伴います。そこで、何百万もの実際のユーザー セッションを調査したところ、コンバージョンに至ったページの画像数が、至らなかったページよりも 38% 少ないことがわかりました。画像をすべて削除したほうがよいでしょうか?答えはもちろん「ノー」であり、ただし、送信する画像が、使用するデバイスに関係なく、すべてのユーザー向けに最適化されるようにする必要があります。

概要

最適化された画像を提供するには、[ウェブ用に保存] をクリックするだけでは不十分です。images.tooling.report でさまざまな機能をチェックするのはそのためです。さまざまなツールやサービスで提供される圧縮率などの基本事項や、長期保存キャッシュ ヘッダーなどのネットワークの最適化について説明します。

それだけではありません。Save-DataECT、その他のクライアントのヒントのサポートなど、より高度なオプションを探し、データモデルを使用して画像を繰り返し圧縮できる自動心理視覚的分析を探し、目に見える方法を変えずに必要なバイト数が最も少ないバージョンを見つけました。画像に写り込んだ非視覚的要素をすべて画像から絞り出して送信しているか?

ダークモードの images.tooling.report のランディング ページのスクリーンショット。

もちろん、どのサイトも雪の結晶です。私たちが求めていたものすべてを、どのツールやサービスでも実行したわけではありません。これは予想どおりです。そこで、テストした内容をカテゴリ別に分類しました。対象となるのは、コンテンツ配信ネットワーク(CDN)、自己ホスト型プロジェクト、コンテンツ マネジメント システム(CMS)プラグイン、サイト作成ツールです。これらはかなり大まかな定義であり、さまざまな選択肢を比較することの関連性を高めるために実際に存在します。

  • CMS プラグインは、WordPress などのプラットフォームで簡単に開発できるパッケージです。
  • サイト作成ツールは、ウェブサイトの作成に使用できるさまざまなサービスを比較したものです。
  • 自己ホスト型は、Git プロジェクトのクローンを作成することや、本番環境で独自の Docker イメージを実行することに慣れているデベロッパーを対象としています。
  • CDN はもう少し複雑です。こうしたサービスの中には、従来の意味での CDN のものもあれば、エッジで画像のプロキシやホストを行うサービスもあります。

常にすべての人に当てはまるわけではありませんが、評価中のテストと機能をチェックして、現在の画像オプティマイザーがどの程度優れているかを確認する必要があります。また、画像の最適化のためにまだ何かしらの手がかりがない場合はどうすればよいでしょうか。次に、画像ツールを確認し、サイトをすでに利用しているユーザーにとってどのようなメリットがあるか確認することをおすすめします。

次のステップ

画像ツールやサービスが見落とされていると思いますか?ぜひツールとサービス、そしてテスト自体はどちらも、常に更新し続ける生き物です。配送画像に関する最先端の情報をすばやく確認する必要がある場合は、まず images.tooling.report を使用します。

ヒーロー画像(作成者: Michael Maasen、Unsplash)