細部を制御し、さらに速く届ける

圧縮と品質パラメータ

quality スライダーで結果を即確認できます。おすすめ手順：

• PNG 無損：もっと小さくしたいなら WebP 無損へ。256 色以内なら Indexed PNG も検討。
• JPEG：0.7 から段階的に下げ、0.4 以下に一気に落とさない。バンディング発生を避ける。
• AVIF / WebP：0.45 / 0.6 / 0.75 を試し、サイズと見た目のメモを残す。

バッチ出力時は「ファイル名 / 形式 / 品質 / サイズ」を記録すると、関係者への説明が楽になります。

色空間とダイナミックレンジ

ブラウザーは基本的に SDR / sRGB で表示します。Display P3 や HDR ソースの場合：

• 書き出し前にデザインツールで sRGB に変換し、ブラウザー側の変換で色ズレしないようにする。
• HDR を維持したいなら AVIF (10-bit) を <picture> + type="image/avif" で提供し、sRGB 版も併せて用意。
• スクリーンショットに Gamma / ICC プロファイルが含まれるか確認し、必要なら ImgEasyResize で再出力する。

命名・バッチ・バージョン管理

Queue を活用すると複数画像への設定コピーが素早く行えます：

• 素材をすべて追加 → 1 枚目でクロップ・形式・品質を決め → 「次へ」で設定を引き継ぐ。
• バッチダウンロードはファイル名を維持するので、hero-homepage@2x.avif などの命名ルールを崩さない。
• 出力パラメータを README や issue に残しておくと、後日の調整がスムーズ。

配信戦略：読み込みとキャッシュ

最適化されたファイルも配信方法次第で効果が変わります：

• HTML：<picture> + srcset で複数サイズを用意し、loading="lazy" を併用。
• CDN：30 日以上の長期キャッシュとバージョン付き URL で、必要時に即更新できるようにする。
• Retina：2x / 3x サイズの画像を書き出しつつ、CSS では表示サイズを実寸に設定しシャープさを保つ。

セキュリティとインラインエンコード

Base64 や data URI を使う場合は次を確認：

• ファイルサイズ：Base64 は約 33% 膨らむため、小さな UI 要素に限定する。
• キャッシュ：インライン画像は HTML / CSS 更新と同時に再配布されるため、高頻度で変わる少量の要素に向く。
• CSP：Content Security Policy を使うなら img-src data: を許可に追加。

ドメインのホワイトリストを採用しているサイト（ImgEasyResize も同様）では、使用する CDN / サイトをすべて許可に入れ、画像がブロックされないようにしてください。