画像を最適化して優れたユーザ体験を実現！最適化におけるポイントとは…

ウェブ上に画像を表示する場合、そこには窮屈な制限があります。 画像が大きすぎたり、解像度が高すぎたりすると、ウェブサイトのクロールが遅くなります。 それらを小さく、解像度を低くするようにすると、ユーザを苛立たせるかもしれません。 優れたユーザ体験とは、意味を持ち明確に識別できるイメージを持つウェブサイトをすばやく読み込むことを意味します。

なぜイメージを最適化するのでしょう？

画像の中には巨大なものもあります。 巨大な画像は、Webページ（バイト単位とスペース単位の両方）でたくさんのスペースを占めます。 すべての画像ができるだけ小さいサイズになるようにすることで、Webデザイナーは読み込み時間ができるだけ速くなるようにしています。 読み込み時間が速いほど、ユーザー体験は向上します。

「最適化」が真に意味するものには、すべてのことを取り入れるアプローチがないかもしれません。あなたのウェブサイトでイメージの使用を監査する際には、いくつかの問いがあります。

• ・この画像も必要ですか？ ウェブサイトのコミュニケーションやインタラクションの目標を強化していないのであれば、画像を含めないでください。
• ・自分が抱くイメージに合ったフォーマットを使用していますか？ 時には、適切に配置された活字要素やCSS効果が、より重い画像の代わりに仕事を完了させることがあります。
• ・画像はさまざまな画面解像度で正しく表示されますか？ 小さなファイルを保存するだけといったように必ずしも簡単ではありません。 ピクセルの古いモニタから新しい4Kディスプレイまで、すべての画面を考慮してください。

画像を最適化するときには他にも多くの考慮事項があります。私は以下の優れたリソースを提供しますが、最初の点については十分に強調することはできません。イメージを含めるために画像を含めないでください。 言葉のようにイメージは意図的なものでなければならず、ウェブサイトやデジタル製品の全体的な体験やメッセージングに関わっているはずです。

画像最適化のための情報源

ここでは、画像の最適化を検討する際におけるUXデザイナーのための優れた情報源を紹介します。

• ・GoogleはWebの基礎的なガイドで素晴らしく、簡潔なガイドを用意しています。
• ・NNGroup.comのAmy Schade氏による「小さな画面上の大きな写真：削除、サイズ変更または再編成」
• ・A Better Lemonade Standにも優れたガイドがありますが、デザイナーよりもマーケティング担当者をターゲットにしているかもしれません。
• ・Shopifyには画像の最適化に関する要点があり、アクセシビリティのヒントが含まれています。
• ・Jakob Nielsenの「Webコンテンツとしての写真」

※本記事は、Image Optimization for Websitesを翻訳・再構成したものです。