なぜ画像を最適化するの？

Webサイトのデータ容量のうち、大半を占めるのが画像ファイルです。画像ファイルが重い（＝ファイルサイズが大きい）ほど、読み込みに時間がかかり、サイトの表示は遅くなります。

訪問者は、3秒以上表示されないページは「重いサイト」と判断し、見るのをやめて離脱してしまうと言われています。これはビジネスにとって大きな損失ですよね。

最適化の基本1：リサイズ（大きさの調整）

まず、画像の「寸法（幅と高さ）」を、サイトで表示したいサイズにきっちり合わせます。これを「リサイズ」と言います。

• 悪い例
  スマホで撮った写真（例：幅4000px）を、サイトの幅600pxの場所にそのまま表示する。

→ この場合、ブラウザは律儀に4000pxの巨大な画像を読み込んでから、無理やり600pxに縮小して表示します。これは通信容量の完全なムダ遣いです。

• 良い例
  あらかじめPCの画像編集ソフトなどで「幅600px」にリサイズしてから、サーバーにアップロードする。

これだけで、ファイル容量は数MB（メガバイト）から数十KB（キロバイト）へと、劇的に軽くなります。

最適化の基本2：圧縮（容量の調整）

リサイズした画像を、さらに「圧縮」してファイルサイズを小さくします。画像圧縮とは、画質を「人間が見て分からないレベル」で少しだけ落とす代わりに、ファイル容量をグッと減らす技術です。

「TinyPNG」や「Optimizilla」といった、Web上で無料で使える画像圧縮ツールがたくさんあります。画像をアップロードするだけで、自動で最適化してくれるので、サーバーにアップする前の習慣にしましょう。

JPGとPNGの使い分け

画像形式の使い分けも重要です。

• JPG (ジェイペグ)
  「写真」に使う。フルカラー（約1677万色）を扱え、圧縮率も高い。ただし、背景を透明（透過）にはできません。
• PNG (ピング)
  「ロゴ」や「イラスト」に使う。背景を透明にできるのが最大の特徴。写真も保存できますが、JPGよりファイルサイズが大きくなりがちです。