視覚的に豊かなサイトが、必ず遅くなるわけではありません。問題は美しい写真の枚数より、準備と読み込みの方法にあることが多いものです。小さなカードのために大きな原本をスマートフォンへ送れば、見た目の利益がないまま通信量が増えます。一方、圧縮しすぎると素材の質感が失われ、雑な印象になります。目標は抽象的な最小容量ではなく、各画像の役割に合ったバランスです。
最初に用途を決める
画像を、主役、情報説明、装飾に分けます。主役の写真は第一印象を左右するため、品質が重要です。図は読める必要があり、サムネイルに大きなポスターと同じ細かさは必要ありません。種類ごとに縦横比と想定最大表示サイズを決めます。これにより、編集者が毎回ルールなしで切り抜きを試すのではなく、一貫した素材準備ができます。
複数のサイズを用意する
レスポンシブ画像では、ブラウザーが表示条件に合った素材を選べます。web.devの資料には、その仕組みが説明されています。実装では、モバイル利用者がデスクトップと同じ大きなファイルを不必要に取得していないか確認します。スタイルで画像を小さく見せるだけでは、転送量は減りません。別サイズのファイルを実際に用意するか、対応した処理システムで生成する必要があります。
実際の素材で形式を比較する
写真、文字入りのイラスト、透明なマークでは、圧縮の影響が異なります。適切な新しい形式と、実装上必要なら代替形式を試します。容量だけで設定を選ばず、対象画面でグラデーション、輪郭、小さな細部を確認します。重要な言葉は画像に埋め込まず、ページ上の実際のテキストにするほうが、読み取り、コピー、画面への適応に向いています。
読み込みの順序を考える
最初の画面よりかなり下にある画像は、後から読み込めることがあります。ただし中心となるビジュアルを、他のすべてと一緒に機械的に遅延させてはいけません。一つの万能ルールではなく、ページを確認して決めます。また、画像用の空間をあらかじめ確保し、表示時に本文やボタンが飛び跳ねないようにします。読み込みの間も、訪問者が位置を見失わないことが大切です。
意味のある説明を付ける
代替テキストは、その文脈での画像の意味を伝えるもので、キーワードを反復する場所ではありません。仕事の重要な特徴を示す写真なら、その特徴を短く説明します。装飾は、支援技術の利用者に不要な情報を増やさないようにします。ファイル名や説明も、公開後に何百件も直すより、素材準備の段階で整理するほうが簡単です。
最適化後は、遅めの回線と実際のスマートフォンでもう一度確認します。主要な内容が現れる速さ、配置の安定、写真の見え方を比較します。目的は一つの報告書でよい数値を得ることではなく、重要な細部を失わずに、必要な内容を素早く見られるようにすることです。