
ホームページの写真を軽くしたいときは、元画像を残し、掲載する場所に合わせて大きさを調整したコピーを比較するところから始めましょう。一律に小さくすると、商品の質感や店内の様子まで伝わりにくくなります。この記事では、店舗や小さな会社のWordPressサイトを想定し、写真の選び方、圧縮後の確認、画像の意味を伝えるaltまで、更新担当者が判断しやすい順番で整理します。
まず「重い」と「ぼやける」を分けて確認する
画像のサイズには、縦横の画素数(px)とファイル容量(KB・MB)があります。画素数は画像の細かさ、容量は保存・転送するデータの量に関係します。どちらか一つの数字だけで、掲載に適しているとは判断できません。
最初に、気になるページをスマートフォンで開き、「写真が出るまで待つ」のか「表示は早いが輪郭がぼやける」のかを記録してください。写真以外の部分も遅い場合は、画像の圧縮だけで解決するとは限りません。
Googleは画像の画質と読み込み速度の両立を勧めています。画像の説明にはaltだけでなく、ページ本文などの情報も使うと説明しています。これは画像検索の基本的な指針であり、特定の容量にすれば順位が上がるという保証ではありません。出典:Googleの画像SEOガイド(確認日:2026年9月15日)。
全部の写真を加工する前に、代表の1枚で比べる
ここからは、はるこHP制作が提案する更新時の進め方です。まず店内・商品・人物など、実際に多く使う種類から1枚を選びます。元画像を別に保管し、掲載用のコピーで作業すると、調整をやり直せます。
- 掲載場所を決める。横長のメイン画像か、本文中の写真か、一覧の小さな画像かを確認します。
- 見せたい範囲を決める。入口の案内なら看板や扉を残し、余白を整理します。スマホで左右が切れても必要な部分が残るかも見ます。
- 縮小した候補を作る。表示幅を確認し、細部が必要な写真は高密度画面での見え方も比較します。
- 圧縮の強さを変えた候補を保存する。同じ掲載サイズで、容量と見た目を並べて比べます。
- 実際のページで確認する。文字の読みやすさ、色の変化、輪郭のにじみを確認してから、ほかの写真に展開します。
たとえば本文で幅600px程度に表示する写真なら、比較用として幅1200pxのコピーを作ってみる方法があります。これは作業の出発点となる仮定例です。全画面表示や拡大閲覧に使う写真まで、この大きさに統一するものではありません。
圧縮率より「お客様が確かめたい部分」を優先する
美容室なら髪の質感、飲食店なら料理の内容、施設なら入口や通路の様子など、写真ごとに必要な情報が違います。小さくなった数字だけを見て選ばず、その部分が読み取れるかを判断基準にしましょう。
比較例として、料理写真の候補Aは容量が小さいものの具材の輪郭が崩れ、候補Bは少し容量が増えても料理の内容が分かる場合、Bを選ぶ理由があります。反対に、背景の飾りとして使う写真に、拡大用と同じ精細さが必要とは限りません。
JPEGやWebPなどで書き出した候補も、同じ大きさで比較します。形式を変えるだけで必ず軽くなると決めつけず、容量と表示結果で選んでください。WordPressでの対応状況や変換設定が分からない場合は、追加のプラグインを入れる前に制作担当者へ確認しましょう。
既存サイトの写真差し替えやスマートフォンでの表示調整を検討している方は、はるこHP制作の更新・修正サービスもご覧ください。画像点数と修正範囲によって、必要な作業を確認します。
altには写真の意味を短く、利用条件は本文に書く
alt(代替テキスト)は画像の情報を文字で伝えるためのものです。W3Cは、情報を伝える画像には必要な説明を付け、純粋な装飾画像は空のaltにするなど、用途に応じた使い分けを示しています。出典:W3C WAIの画像チュートリアル(確認日:2026年9月15日)。
以下は、入口の段差とスロープが写っている店舗写真を想定した文例です。実際の店舗の事例ではありません。
- 写真のalt例:「入口の段差の右側に設けたスロープ」
- 写真の近くの本文例:「スロープは建物入口の右側です。入口までの経路について確認したい方は、ご来店前にお問い合わせください。」
「相模原・町田・おすすめ・人気店」のように、写真の説明にならない単語を重ねる必要はありません。また、写真で確認できない設備や、実際には用意していない対応を付け足さないでください。
料金、予約条件、営業時間などは、画像内の文字だけにせず本文にも書くことを提案します。人が情報を探しやすく、修正時の確認もしやすくなります。AI検索を意識する場合も、まずページ上で内容を明確に伝えることを優先しましょう。altの追加だけでAIからの引用が決まるものではありません。
更新後は実際のページを見て、相談内容を絞る
掲載前後の画像容量、スマホでの見え方、必要な部分の切れ方を確認します。代表の1枚で問題がなければ、同じ用途の写真に順番に適用してください。全画像を一度に差し替えるより、変化の理由を確かめやすくなります。
はるこHP制作では、WordPressサイトの画像の差し替え・追加や、表示に関する修正をご相談いただけます。「どのサイズにすればよいか分からない」という段階でも、まず対象ページと困っている箇所をお知らせください。
相談文例:「このページの店内写真が、スマホで出るまで時間がかかります。写真は8枚あり、元データは手元にあります。画質を保った差し替えと、スマホ表示の確認について相談したいです。」対象ページのURLと、特に残したい細部も添えると確認を進めやすくなります。
