サイトの画像が重いときに直す順番｜サイズ・形式・代替テキスト

写真を全部消さずに読みやすさと表示を整えるために。用途ごとの画像整理、圧縮後の確認、altの書き分けを紹介します。

写真を減らす前に、何のための画像かを分ける

店の入口を見せる写真、料金を説明する図、雰囲気を伝える背景では、必要な解像度も説明も変わります。容量だけを見て強く圧縮すると、小さな文字や商品の質感が読めなくなることがあります。まず画像一覧に「用途・表示する場所・元の大きさ・ファイル容量」を書き出しましょう。

編集部が勧める順番は、不要な重複を減らす、表示用途に合う寸法にする、形式と圧縮を調整する、実画面で確認する、の4段階です。写真を多く使う記事でも、読者に必要な画像を残して改善できます。

WebPやAVIFなどを検討する場合も、利用するCMSが扱えるか、表示と保存の動作を確認します。透明背景が必要なロゴと写真を、同じ設定で一括処理しないようにします。

スマホで小さく見える画像でも、元ファイルが大きければ取得量は増えます。対応するサービスでは、表示幅に応じた画像の配信を使います。自作のHTMLならsrcsetやsizesなどが関連しますが、CMSが自動処理する場合はその仕様を先に確認してください。

MDNは画像のwidth・heightを明示することを勧めており、読み込み時のレイアウト変化を抑えるための情報になります。画像を読み込んだ瞬間に本文やボタンが押し下げられる場合は、容量だけでなく表示領域の確保も見直します。

すべてを遅延読み込みにすればよいわけではありません。最初の画面に必要な画像は、ページの表示を見ながら読み込み方を選びます。

altには、画像が伝える意味を、その文脈に合う言葉で記述します。本文ですでに同じ説明をしている装飾画像と、操作に不可欠な画像は扱いが異なります。装飾だけなら空の代替テキストが適切な場合もあります。

例	書き方の考え方
店舗入口の写真	「青い看板の左にある店舗入口」のように位置を伝える
操作手順の画像	「公開設定で独自ドメインを選ぶ画面」のように目的を伝える
料金比較の図	図の要点を説明し、細かい数値は本文の表でも読めるようにする

何KB以下なら必ず速いという一律の値だけでは、端末・回線・ページ全体の重さを評価できません。変更前後を同じページ・同じ条件で見比べ、容量が減ったことと必要な情報が残ったことを記録します。測っていない読み込み時間や改善率を、成果として掲載しないでください。

写真中心のサイトを作るなら、SITE PORTの完成例をスマホでも見て、画像の見え方と編集時の差し替え方法を確認しましょう。自分で写真を更新しやすいかを先に試せると、公開後の運用を具体的に考えられます。

SITE PORTの完成例を見る・編集のデモを見る。自分で更新する場面を想像しながら、利用できる機能とサポート範囲を申込前に確認してください。

[スマホの公開前チェック](/articles/mobile-website-prelaunch-check)・[画像を含む公開前SEO](/articles/small-business-seo-before-launch)