画像形式と圧縮（WebP/JPEG/PNG/AVIF/HEIC）
用途に応じて最小容量で画質を保つための形式選びと圧縮の原則。写真/図/ロゴ/透過での実務の落とし所、Q値・サブサンプリング、運用のテンプレまで。
代表ツール
厳選記事
- WebP/JPEG/PNGの使い分け早見表写真/UI/ロゴ/スクショでの最短意思決定のための実務チャート。2024-09-05
- AVIF vs WebP — 画質・圧縮・互換性の比較フォト/UIでの画質差、10bitや4:4:4の要否、配信設計の比較表。2025-06-20
- 圧縮品質の決め方 — Q値/ビットレートからの逆算被写体別の目安と判定手順（bpp/SSIM/PSNR/感性評価）。2025-02-27
- GIF→WebP最適化ガイド可逆/非可逆・パレット・フレーム調整で容量と画質を両立。2024-10-08
- 文字滲みを防ぐエンコード（WebP/JPEG）4:4:4・前処理・Q値の目安でUI文字のにじみを最小化。2024-09-14
- 画像最適化チェックリスト設計/生成/配信の各段階で落とし込むべき項目を網羅。2025-04-03
- WebP/AVIFの典型的な破綻と対処法にじみ・バンディング・モスキート・ブロッキングの原因と、量子化・サブサンプリング・前後処理の実践策。2025-08-25
- ノイズ除去とシャープの最適バランスNR→USM→再圧縮の順序と数値目安。破綻を避ける前処理。2024-12-18
- PNGとWebPロスレスの比較—どちらを使う？UI/スクショはWebPロスレスが平均20〜35%小。色数が極端に少ない場合はPNG（インデックス）も有効。2025-08-28
- AVIFエンコード・チートシート（実務デフォルト集）用途別のcq/speed/yuv/bit-depthの推奨、コマンド例、アーティファクト対策を1枚に。2025-08-28
- SVGとラスター画像（PNG/JPEG/WebP/AVIF）の使い分け完全ガイドロゴ/アイコン/UIはSVG、写真はAVIF/WebP。パス数・容量・描画コストの閾値と具体フロー、落とし穴まで解説。2025-08-28
- PNGインデックスカラー＆ディザリング徹底ガイドパレット設計（1/2/4/8bit）とFloyd–Steinberg/Ordered/Sierraの選び方、CLIレシピとチェックリスト。2025-08-28
- HEIC/HEIFのWeb最適化—アップロードから配信までアップロード時にAVIF/WebP/JPEGへ変換、EXIF回転・sRGB正規化、運用フローと注意点を整理。2025-08-28
よくある質問
WebPとJPEGはどちらを選ぶ？
互換重視の場面はJPEG、画質/容量バランスはWebP。文字や図が多い場合はPNG/WebP Lossless。
Q値の目安は？
写真80–85%、文字/図含む85–90%。にじみが出る場合はQを+5%または4:4:4を検討。