Web用に画像を軽くする考え方｜PNG・JPEG・WebPの使い分け

最終更新: 2026-07-19

「画像が重くてページ表示が遅い」「アップロードの上限に引っかかる」——画像の最適化は、フォーマット選びとサイズ調整の2点を押さえるだけで大きく改善します。難しい理屈は不要です。

まず「サイズ(px)」と「容量(KB)」を区別する

「サイズ」には2つの意味があります。寸法(px)とファイル容量(KB/MB)です。表示に必要な寸法より大きい画像は、容量だけ無駄に食います。SNS用なら推奨寸法（例: OGPは1200×630px）に合わせるのが第一歩です。

フォーマットの使い分け

• JPEG：写真・グラデーションが多い画像向き。容量を小さくしやすい。透過は不可。
• PNG：文字・図・透過が必要な画像向き。くっきりするが写真では重くなりがち。
• WebP：JPEG/PNGより高圧縮で、近年のブラウザはほぼ対応。対応環境なら第一候補。

文字入りのシンプルなOGP画像やロゴはPNG、写真主体ならJPEGかWebP、と覚えておけば大きく外しません。

SNS画像での実践

• 推奨寸法ちょうどで作る（大きすぎる画像を貼らない）。
• 写真背景のOGPはJPEG/WebPで書き出すと軽くなる。
• SNSは内部で再圧縮するため、過度に作り込むより「推奨寸法・適正容量」を守るほうが結果が安定する。

画像を作るところから

当サイトのOGP・サムネイル画像ジェネレーターは、用途ごとの推奨寸法で書き出せるので「大きすぎ画像」を避けられます。SNSごとの寸法はサイズ一覧にまとめています。