画像を軽くしてページを速くする

ページの表示が遅い原因は、たいてい画像が重いことです。スマホで撮った写真はそのままだと数MBもあり、Webに載せるには大きすぎます。この記事では、ブラウザだけで使える無料の圧縮ツール2つと、目指すファイルサイズの目安を紹介します。インストールも登録も不要です。

どのくらい軽くすればいい？

スマホの写真（3〜5MB）をそのまま載せると、この目安の10倍以上。でも安心してください——ツールに通すだけで、見た目はほぼ変わらないまま7〜8割軽くなるのがふつうです。

なぜ「見た目そのまま」で軽くなるのか

画像圧縮の多くは非可逆圧縮という方式で、人の目では判別しにくい色の変化や細部の情報を間引くことでファイルを小さくします。写真は色の情報量がもともと多く、少し間引いても見た目の印象はほとんど変わりません。だからこそ、圧縮ツールを通すだけで大幅に軽くできるのです。

TinyPNG

いちばん手軽な定番ツール。ページにドラッグ＆ドロップするだけで自動圧縮され、できあがったファイルをダウンロードするだけです。まとめて20枚まで一気に処理できます。

TinyPNG

「細かい設定はいらない、とにかく軽くしたい」ならこれ。PNG・JPG・WebPに加えて、AVIFやJPEG XLといった新しい形式にも対応しています（1枚5MBまで）。ただし別の形式へ変換するのは無料だと3枚までなので、WebP化がしたいなら次のSquooshのほうが向いています。

Squoosh

Googleが作った圧縮ツール。画質のつまみを動かすと、仕上がりをその場で見比べられるのが最大の特長です。左が元画像・右が圧縮後の分割ビューで、「どこまで画質を下げても平気か」を目で確かめながら決められます。

Squoosh

圧縮だけでなく、幅・高さの縮小（リサイズ）や、軽さに強いWebP形式への変換もここでできます。1枚をていねいに仕上げたいときはこちら。

圧縮の前に「大きさ」も見直す

意外と効くのが、圧縮より先に画像の縦横サイズを小さくすることです。スマホ写真は幅4000pxほどありますが、ページで幅400pxで表示するなら、そんなに必要ありません。

• 目安は「表示する幅の2倍」（幅400pxで表示→幅800pxあれば十分。2倍なのは高精細な画面のため）
• リサイズはSquooshの「Resize」でできる
• 縮小→圧縮の順で通すと、いちばん軽くなる

どっちを使う？使い分け早見表

2つとも無料でブラウザだけで完結しますが、得意なことが違います。

記事に載せる写真を10枚まとめてならTinyPNG、トップの大きな1枚を限界まで詰めるならSquoosh、という住み分けがいちばん実用的です。

圧縮しても速くならないときに見るところ

画像を軽くしたのに体感が変わらない——そんなときは、画像の枚数と読みこむタイミングのほうが原因になっています。

• 画面の外の画像を後回しにする——img タグに loading="lazy" を足すと、スクロールして近づくまで読みこまなくなります。ページ下部の画像が多いサイトでは、これが圧縮より効くことも
• 幅と高さを書いておく——width と height を書くと、画像が届く前に場所を確保できます。読みこみ中にレイアウトがガタッとずれるのを防げます
• 大きい画像をCSSで縮めていないか——幅2000pxの画像を width: 300px で小さく見せても、ダウンロードされる重さは2000px分のままです。ファイル自体を縮小します

つまり効く順番は「サイズを縮める → 圧縮する → 後回し読みこみにする」の3段階です。

WordPressに載せるなら

WordPressの場合、アップロードするときに自動で圧縮してくれるプラグインを入れておくのが確実です。手作業を挟むと必ず忘れる日が来るので、仕組みに任せてしまうほうが長続きします。加えて、WordPressはアップロードした画像から自動で複数サイズを作るので、記事に貼るときは元画像ではなく表示に合ったサイズを選ぶだけでも軽くなります。

まとめ

1. 写真は200KB以下が目安。スマホ写真そのままはNG
2. 手軽さのTinyPNG、仕上がり確認とリサイズのSquoosh
3. 順番は「縮小してから圧縮」。公開前の習慣にする
4. それでも遅いときは loading="lazy" と width／height の指定を足す
5. 元画像は必ず別に残す——非可逆圧縮は元に戻せない

画像が軽いだけで、ページの第一印象は「サクサク動くちゃんとしたサイト」になります。