← ツールに戻る

Web用に画像を圧縮する方法(画質を損なわずに)

ページ速度はGoogleのランキング要因であり、画像はページ全体の重さの50〜80%を占めるのが一般的です。画像を適切に圧縮することは、サイトのパフォーマンス向上に最も効果的な施策です。正しい方法を解説します。

変換の準備はできましたか?今すぐお試しください - 無料、登録不要。

スマート圧縮 - 自動で最適化 →

画像圧縮が重要な理由

数字は明らかです:

画像圧縮チェックリスト

  1. 適切な形式を選ぶ:WebにはWebP、写真にはJPG。PNGは透過が必要でWebPを使えないときだけ
  2. 先にリサイズ:800pxの枠に4000pxの画像を配信しないこと。表示サイズ(Retinaなら2倍)に画像をリサイズしましょう。
  3. 圧縮する:非可逆形式なら画質75〜85に。ほとんどの人は違いに気づきません。
  4. WebPを使う:WebPに変換すれば、すぐに25〜35%削減できます。
  5. 遅延読み込み:スクロールしないと見えない画像にloading="lazy"を付けましょう。
  6. サイズを指定:レイアウトのずれを防ぐため、widthとheight属性を必ず付けましょう。

無料の画像圧縮ツール

ブラウザで完結(アップロード不要)

コマンドライン

# Convert and compress with cwebp
cwebp -q 80 photo.jpg -o photo.webp

# Compress existing WebP
cwebp -q 75 image.webp -o image-compressed.webp

# Batch convert a folder
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

画質設定早見表

用途 JPG画質 WebP画質 メモ
ヒーロー画像 85-90 80-85 目立ち、影響が大きい - 数KB増えても価値あり
ブログ画像 75-85 70-80 画質とパフォーマンスのバランスを取る
サムネイル 60-75 55-70 表示が小さい = 画質を下げてもOK
背景画像 50-70 45-65 ぼかしや重ねが多い - 強めの圧縮でOK

よくある質問

画質を落とさずにどこまで圧縮できますか?

非可逆のJPG/WebPなら、画質75〜85で元画像と見分けがつかないのが普通です。60を下回ると圧縮ノイズが目立ち始めます。スマート圧縮ツールなら最適なポイントを自動で見つけます。

画像はCMSにアップロードする前と後、どちらで圧縮すべきですか?

前です。一部のCMS(WordPress、Shopify)はアップロード時に画像を圧縮しますが、標準ではWebPに変換しません。事前に圧縮すれば、画質と形式を完全にコントロールできます。

Webページに理想的な画像サイズは?

一般的なコンテンツは1枚200 KB以下、ヒーロー画像やバナーは500 KB以下を目安にしましょう。Core Web Vitalsで良いスコアを出すには、ページ全体の画像を1.5 MB以下に抑えるべきです。

今すぐ画像を変換 - 100%無料、ブラウザで動作します。

スマート圧縮 - 自動で最適化 →

関連ガイド

JPGからWebPへのガイド PNGからWebPへのガイド WebPからJPGへのガイド 画像圧縮ガイド WebPとは?