メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
画像・軽量ファイル
/
圧縮率比較
▨
圧縮率比較
image/image-compression-comparison
JPEG Q80 を基準に、WebP、AVIF、JPEG XL、ロスレス形式の目安を表で比較する静的リファレンスです。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
圧縮率比較では、JPEG Q80 を基準に、WebP、AVIF、JPEG XL、ロスレス形式の目安を表で比較する静的リファレンスです。
関連する観点として 圧縮率比較、compression ratio、画像変換 を確認し、結果をコピーして別の作業に使えます。
項目
内容
JPEG Q80
基準
WebP
約25-35% 小さい
AVIF
約50% 小さい
JPEG XL
約30-60% 小さい
ロスレス
PNG / WebP lossless / AVIF lossless
使い方
表の「項目」列で JPEG Q80、WebP、AVIF などの形式を確認します。
「内容」列で JPEG Q80 基準、約25-35%小さい、約50%小さいなどの目安を読みます。
実ファイルの変換やダウンロードはないため、形式選定の初期メモとして使います。
入力例・出力例
INPUT
WebP
OUTPUT
約25-35% 小さい
INPUT
AVIF
OUTPUT
約50% 小さい
INPUT
ロスレス
OUTPUT
PNG / WebP lossless / AVIF lossless
よくある利用シーン
Web サイトの画像配信最適化(LCP・CWV 対策)
EC サイト商品画像の容量削減
ブログ記事のアイキャッチ画像最適化
アプリ内画像の容量削減(バンドルサイズ削減)
結果確認のポイント
出力サイズ、縦横比、ファイル形式、画質が用途に合っているか確認してください。
圧縮率比較、compression ratio、画像変換の観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
重要な元画像は別に保存し、必要に応じて元データと比較してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
圧縮率比較の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
WebP と AVIF どちらを使えばいいですか?
AVIF の方が圧縮率は高い (JPEG 比 50%減) ですが、対応ブラウザが少なめ (Chrome / Firefox / Safari 16+)。互換性重視なら WebP (JPEG 比 25-35%減、Safari 14+ で対応) が無難です。
ロスレス・ロッシーとは?
ロスレス (lossless) は画質を完全保持する圧縮、ロッシー (lossy) は画質を少し落として大幅にサイズを削減する圧縮です。Web 用途は通常ロッシーで品質 75-85 が一般的。
PNG はどんなときに最適ですか?
透過 (アルファチャンネル) が必要なロゴ・アイコン、ピクセルパーフェクトな図表、二値画像 (白黒) などです。写真には WebP / AVIF の方が小さくなります。
画像はサーバーにアップロードされますか?
ブラウザ内 (Canvas API) で変換しているため、画像はサーバーに送信されません。
関連ツール
画像圧縮
画像をブラウザ上で圧縮・軽量化。JPEG/WebP出力、品質スライダーで調整。サーバーにアップロード不要で安全。
alt属性チェックリスト
装飾画像、情報画像、リンク画像、キャプション重複、125文字目安など alt 属性の判断項目を表で確認できます。
バナーサイズ一覧
Leaderboard、Medium Rectangle、Mobile Banner など代表的な広告バナー寸法を一覧表示します。
ダミー画像生成
指定サイズのダミー画像(プレースホルダー)をCanvas APIで生成。色・テキスト・フォーマット指定可能。Webデザインに。
favicon生成
1〜2文字またはアップロード画像から 16/32/48/180/192/512px の PNG favicon を canvas で生成します。
ファビコンサイズ一覧
16×16 から 512×512 までの favicon 用途、HTML link タグ、manifest icons の雛形を確認できます。
<figure>タグ生成
入力した画像 URL を src に入れ、loading と decoding を付けた figure/figcaption の雛形を生成します。
アイコンサイズ一覧
favicon、Apple Touch、Android Chrome、Windows Tile、iOS/Android アプリの代表アイコンサイズを用途別に確認できます。