Webサイトの画像が重い原因は？初心者でもできる書き出しのコツ

2026年8月7日 2026年8月7日

dhs_admin

Photoshopでデザインを組んでいると、ついつい写真を大きく、きれいに見せたくなります。
その気持ちはよくわかります。
ただ、その一枚をそのまま書き出してWebサイトに置くと、思わぬ形で足を引っ張ることがあるんです！

見た目はきれいなのに、開くたびにワンテンポ遅れる。
そんなサイト、見たことはないでしょうか。
実はその原因はネット環境もありますが、「画像の書き出し方」にることが少なくありません。
この記事では、Webサイトの画像がなぜ重くなるのか、そしてJPEG・PNGをどう使い分ければいいのかを、初心者の方にもわかる言葉で整理してみます。

画像が重いと、サイトで何が起きるのか

画像のファイルサイズが大きいと、ページの表示に時間がかかります。
数秒の遅れと聞くと、たいしたことはないように思うかもしれません。

ですが！！
実際には、この数秒でユーザーの多くが離脱してしまうと言われています。
特にスマートフォンで見ている人は通信環境が不安定なことも多く、その差はより顕著に出てくるものです。

表示が遅いサイトは、検索エンジンからの評価にも影響します。
せっかく丁寧にデザインしても、表示速度が原因で正しく評価されないとしたら、もったいない話ですよね。

💡 ここがポイント

画像が重いと「離脱率アップ」「SEO評価の低下」「操作感の悪化」の3つが同時に起きやすくなります。見た目の完成度とは別に、表示速度もWebサイトの品質の一部です。

デザインの完成度と、Webサイトとしての完成度は、実はイコールではありません。
画面の中でどれだけ美しく見えても、開くまでに時間がかかる時点で、ユーザー体験としては減点されてしまう。
この感覚は、紙のデザインから入った人ほど見落としやすいポイントかもしれません。

なぜ画像は重くなるのか

原因の多くは、実はシンプルです。
表示したいサイズよりもずっと大きい画像を、そのまま使ってしまっているケースがほとんどなんです。

たとえば、幅600px(pxは画面上の大きさを表す単位で、数字が大きいほど元のデータも重くなります)で表示する予定のバナーに、一眼レフで撮影した4000px超えの写真をそのまま配置する。
画面上では小さく縮小されて見えるので、一見問題なさそうに見えます。
ですが、ブラウザは裏側でその巨大なデータを読み込んでいて、表示サイズが小さくなっても、ファイル自体の重さは変わりません。

👤 講師の声（Webデザイン専攻）

課題の提出物で、スマホで撮影した写真をそのままトップページの背景に使っていた受講生がいました。画面上ではきれいに見えていたのですが、書き出したファイルを確認すると1枚あたり8MBを超えていて。「見た目は問題なさそうなのに、なぜここまで重いんですか」と聞かれることが、実はよくあるんです。

「きれいに見せたい」という気持ちが先に立つと、容量のことは後回しになりがちです。
ですが、表示サイズに対して必要以上に大きな画像を使うことは、画質の向上にはほとんど寄与せず、ただ重くなるだけという結果を招きやすい、という点は覚えておいて損はありません。

JPEGとPNG、どちらを選べばいいのか

形式選びで迷ったときの、ざっくりとした目安があります。

⚠️ 注意点

「PNGのほうが高画質だから」という理由だけで、写真にもPNGを使ってしまうケースがあります。写真をPNGで書き出すと、JPEGに比べてファイルサイズが数倍に膨らんでしまうことも珍しくありません。

画質を守りたい気持ちはよくわかりますが、Web上で公開する画像である以上、容量とのバランスを考える視点も持っておきたいところですね。

書き出す前後に確認しておきたいこと

Photoshopで書き出す際は、いくつか確認しておくと安心なポイントがあります。

①画像のピクセルサイズを、実際に表示するサイズに近づけておくこと。
表示幅が600pxなら、書き出す画像も800px程度(高解像度ディスプレイ用に少し余裕を持たせる程度)にとどめておくと、無駄なデータを持たずに済みます。

②Photoshopの「Web用に保存」機能を使うこと。
(画質と容量のバランスを見ながら書き出せる機能です)
数値を下げすぎると画質が荒れてしまいますが、多くの場合、見た目にはほとんど差がわからない範囲まで圧縮しても問題ないことが多いんです。
最初はどのくらい下げていいのか分かりにくいと思いますが、プレビューを見比べながら、ちょうどいいラインを探ってみてください。

💡 ここがポイント

書き出したあとは、実際のファイルサイズを一度確認する習慣もつけておきましょう。1枚あたり数百KB程度に収まっていれば、まずは目安として安心です。