ページの表示が遅い原因は、たいてい画像が重いことです。スマホで撮った写真はそのままだと数MBもあり、Webに載せるには大きすぎます。この記事では、ブラウザだけで使える無料の圧縮ツール2つと、目指すファイルサイズの目安を紹介します。インストールも登録も不要です。
どのくらい軽くすればいい？
| 用途 | 目安 |
|---|---|
| 写真1枚（記事・カード用） | 200KB以下 |
| ヒーローの大きな写真 | 500KB以下 |
| アイコン・ロゴ | 50KB以下 |
スマホの写真（3〜5MB）をそのまま載せると、この目安の10倍以上。でも安心してください——ツールに通すだけで、見た目はほぼ変わらないまま7〜8割軽くなるのがふつうです。
TinyPNG
いちばん手軽な定番ツール。ページにドラッグ＆ドロップするだけで自動圧縮され、できあがったファイルをダウンロードするだけです。まとめて20枚まで一気に処理できます。
「細かい設定はいらない、とにかく軽くしたい」ならこれ。PNGもJPEGもWebPも対応しています。
Squoosh
Googleが作った圧縮ツール。画質のつまみを動かすと、仕上がりをその場で見比べられるのが最大の特長です。左が元画像・右が圧縮後の分割ビューで、「どこまで画質を下げても平気か」を目で確かめながら決められます。
圧縮だけでなく、幅・高さの縮小（リサイズ）や、軽さに強いWebP形式への変換もここでできます。1枚をていねいに仕上げたいときはこちら。
圧縮の前に「大きさ」も見直す
意外と効くのが、圧縮より先に画像の縦横サイズを小さくすることです。スマホ写真は幅4000pxほどありますが、ページで幅400pxで表示するなら、そんなに必要ありません。
- 目安は「表示する幅の2倍」（幅400pxで表示→幅800pxあれば十分。2倍なのは高精細な画面のため）
- リサイズはSquooshの「Resize」でできる
- 縮小→圧縮の順で通すと、いちばん軽くなる
まとめ
- 写真は200KB以下が目安。スマホ写真そのままはNG
- 手軽さのTinyPNG、仕上がり確認とリサイズのSquoosh
- 順番は「縮小してから圧縮」。公開前の習慣にする
画像が軽いだけで、ページの第一印象は「サクサク動くちゃんとしたサイト」になります。