ホームページの画像が重いとき、最初に見直す3つのこと

ホームページに写真を追加したあと、「表示が遅くなった気がする」「画像がきれいなのに、ページが重い」と感じることがあります。こういうとき、いきなり圧縮ツールを探す必要はありません。

まず見るのは、画像そのものの大きさ、保存形式、圧縮後の見え方です。この順番に分けると、画質を落としすぎずに整理しやすくなります。

この記事では、ホームページの画像を軽くしたいときに、最初に見直す3つを説明します。

画像を軽くする前に、重さの理由を分ける

「画像が重い」といっても、原因は一つではありません。スマホやカメラで撮ったままの写真は、ページで表示する幅より何倍も大きいことがあります。PNGで保存した写真、同じような写真を何枚も並べたページも、読み込む量を増やします。

そこで、次の順番で見ます。

1. ページに出す大きさより、元画像が大きすぎないか
2. 写真とロゴで、保存形式を分けているか
3. 圧縮したあと、実際のページで見え方を確認したか

容量だけを見て「もっと小さく」と進めると、文字が読めない、商品の細部がつぶれる、といった別の困りごとが出ます。ページで何を見せる画像なのかを残しながら、不要な重さを減らすのが目的です。

制作で画像を受け取るとき、最初に確認すること

制作でサイト用の画像を受け取るときは、まず画像の大きさとファイル形式を確認します。画面で見ると十分きれいでも、カメラやスマホから出したままの画像は、数MBになることがあります。一方で、ロゴや文字を含む画像を強く圧縮すると、輪郭がにじむ場合があります。

ここで先に決めるのは「この画像を何ピクセルまで小さくするか」ではなく、「ページのどの場所で、どのくらいの大きさで見せるか」です。トップの横長写真、本文の説明写真、ロゴでは、必要な見え方が違います。

1. 表示する大きさより、元画像が大きすぎないか

最初に確認したいのは、アップロードする画像の縦横のサイズです。たとえば本文で横幅800px程度に表示する写真に、横幅6000pxの元画像をそのまま使うと、表示に使わない情報まで一緒に送ることになります。

やることは単純です。ページで大きく見せる場所を決めて、その場所より少し余裕を持たせた幅に縮小してからアップします。元画像だけを保存用に残し、サイト用のコピーを作ると、後から撮り直しや再利用もしやすくなります。

横長のアイキャッチ、本文の横長写真、スマホで縦に見せる写真を同じ大きさのまま流用しないようにします。どの場所で使うかが決まっていれば、必要以上に大きなファイルを避けられます。

2. 写真とロゴで形式を分ける

写真にはJPEGやWebP、透過が必要なロゴや図にはPNGやSVGが向くことがあります。どれか一つに統一するより、画像の役割で選ぶ方が扱いやすくなります。

WebPは、写真の見た目を保ちながらファイルを軽くできることがある形式です。ただし、WebPに変換するだけで元画像の縦横が小さくなるわけではありません。先に表示寸法を整え、その後に形式と圧縮の具合を試す方が判断しやすいです。

形式ごとの細かな仕組みは、web.dev のWebP解説でも確認できます。更新する人がまず覚えておくなら、「写真はWebPも候補、ロゴや透過のある画像は見え方を確認して選ぶ」で十分です。

3. 圧縮したあと、実際のページで見え方を確かめる

圧縮後のファイルサイズだけで終わらせず、公開前のページで画像を見ます。スマホでは問題なく見えても、パソコンで大きく表示すると、人物の輪郭や商品についた細かな文字が崩れていることがあります。

確認したいのは次の4点です。

• 写真の中で見せたい部分が暗くなったり、ざらついたりしていないか
• ロゴや文字のふちがにじんでいないか
• スマホとパソコンの両方で、意図した位置に収まっているか
• 画像を差し替えたページを開いたとき、以前より待たされる感じが増えていないか

「一番軽い画像」を探すより、ページの役割を果たせる範囲で軽くする方が失敗しにくいです。圧縮前の元データを残しておけば、画質が足りなかったときにも戻せます。

WordPressに任せる範囲と、アップ前に整える範囲

WordPressには、アップロードした画像から表示用のサイズを作る仕組みがあります。テーマや設定によっては、WebPへの変換や画像最適化を補助する場合もあります。

ただし、元画像が極端に大きい、写真とロゴを同じ形式で扱っている、不要な画像を大量に並べている、といった点までは自動で判断できません。アップ前に「使う場所」「表示したい大きさ」「元データの保存先」を決めておくと、更新が続いたときも迷いません。

すでに画像の多いサイトで、どこから整理するか迷う場合は、ページを見ながら直す範囲を決めるWebなおしが向いています。これからサイトを作り、写真の扱いも含めて整えたい場合は、おてがるホームページplusで相談できます。あんなホームページがいいなを29,800円で実現するため、必要な写真と更新のルールから組み立てます。まず掲載先を用意したい段階なら名刺サイトも選べます。具体的な画像を見ながら相談したい場合は、お問い合わせから送ってください。

よくある質問

画像は1枚あたり何KBにすればよいですか？

一律の数字だけでは決められません。アイキャッチ、本文写真、ロゴでは必要な見え方が違うためです。まず表示寸法を見直し、圧縮後に実際のページで確認する順番にすると判断しやすくなります。

WebPにすれば必ず速くなりますか？

WebPは有力な選択肢ですが、元画像が大きすぎる場合や、ページに大量の画像がある場合は、変換だけで解決しないことがあります。サイズ、形式、圧縮を分けて確認してください。

すでに投稿した古い画像も直すべきですか？

すべてを一度に直す必要はありません。トップページ、よく見られるサービスページ、画像の多い記事から、実際の表示を見て優先順位をつけると進めやすくなります。

まとめ

ホームページの画像を軽くするときは、圧縮だけに頼らず、表示寸法、形式、圧縮後の見え方を順に確認します。画像をアップするたびにこの順番を使えば、更新作業も少しずつ整っていきます。