画質を崩さず無料で画像圧縮する方法

多くのサイトで画像はページ重量の約40%を占めます。モバイル表示が3秒を超えると53%が離脱しうる一方、Core Web Vitalsを通過しているモバイルサイトは48%しかありません。

画像圧縮が重要な理由

• ページ速度は1秒あたり約3%の成果差を生みます。
• 画像検索は発見トラフィックの22.6%に関わることがあります。
• 韓国のような高速市場でも、最近の指標で約385 Mbpsのモバイル速度があっても重い画像は体感を遅くします。

画像圧縮がLCP、INP、CLSに与える影響

目標はLCP 2.5秒以内、INP 200ms以内、CLS 0.1以下です。2025年のWeb Almanacでは、デスクトップのLCP要素の85.3%が画像でした。 これによりLCPが良くなり、CLSも安定しやすくなります。

• ヒーロー画像をlazy loadしない。
• ヒーローのlazy loadは良好LCP率を約27ポイント下げる恐れがあります。
• まず最大画像を圧縮し、寸法を固定してCLSを防ぎます。

JPEG、PNG、WebP、AVIFの選び方

写真はJPEGよりWebPやAVIFのほうが効率的なことが多く、透過や輪郭のはっきりした図版にはPNGが向いています。大切なページで見た目を比べ、十分きれいに見える最も軽い形式を選びましょう。 WebPは安全な標準、AVIFはさらに小さくしたい時の選択です。WebPはJPEGより通常25%から34%小さく、対応率は約95%。AVIFはWebPより20%から30%小さいか、JPEG比で約50%小さく、対応率は約94%です。

画像圧縮と検索での見つかりやすさ

軽い画像ファイルは表示を速め、離脱を減らし、重要な内容を早く見せます。こうした使いやすさの改善は、検索での見つかりやすさにもつながりやすくなります。

画像圧縮の確認項目

• 実際に表示される最大サイズに合わせて画像寸法を先に整える
• 写真の多くはWebPまたはAVIFで書き出す
• 透過やくっきりした図版が必要なときだけPNGを使う
• 最初に見える大きな画像は小さな飾り画像より慎重に圧縮する
• 表示ずれを防ぐために幅と高さを指定する
• srcset と sizes を使って画面ごとに適切な画像を配信する

よくある画像圧縮の失敗

• 撮影元の大きな画像をそのまま載せる
• すべての画像に同じ圧縮率を使う
• 明確な理由なしに写真をPNGで保存する
• 電話向けにも大きすぎる画像をそのまま送る
• 幅と高さを入れずに表示位置が動くままにする
• 見た目の劣化が出た後も容量だけを削ろうとする

画像圧縮が特に役立つ場面

Rakuten 24は良好なLCPが最大61.13%のコンバージョン増と関係すると報告し、最適化テストではCVR 33.13%増、訪問者あたり売上53.37%増を確認しました。 その結果、ページはより速く、より信頼できる印象になります。

• VodafoneはLCPを31%改善し、売上8%増、リード15%増、カート訪問11%増。
• Tokopediaは性能改善でCTR 35%増、CVR 8%増。
• EC全体では最速サイトが最遅サイトより最大302%高い成果を出すという指標もあります。

よくある質問

Q1. 画像圧縮をすると必ず画質は落ちますか。 A. 必ずではありません。適度な圧縮なら、多くの利用者が気づく前に容量だけを大きく減らせることがあります。

Q2. すべての画像をWebPやAVIFにすべきですか。 A. 多くの写真には向いていますが、透過や非常にくっきりした単純な図形ではPNGが適している場合があります。

Q3. サイズ変更と圧縮は別ですか。 A. はい。サイズ変更は画像の寸法を変え、圧縮はその寸法のままで容量を減らします。

Q4. ページ上部の主要画像はどの程度圧縮すべきですか。 A. 無駄な容量は減らしつつ、顔や文字、商品の輪郭が甘く見え始める前で止めるのが安全です。

Q5. 画像圧縮は電話での表示にも役立ちますか。 A. はい。軽いファイルは遅い回線でも早く届き、小さな端末への負担も抑えられます。

Q6. 形式と寸法ではどちらが大事ですか。 A. どちらも大事です。まず正しい寸法にし、その後で最適な形式と圧縮率を選びましょう。