透過イラスト
透明やアウトラインを忠実に残したい場合、PNG（高精細）か WebP ロスレス（小容量）を選ぶ。
- 主題ぎりぎりでクロップし余白を減らす
- 必要なら @2x Retina 版を併せて書き出す
Format Guide
なぜこのフォーマットを選ぶのか？
ImgEasyResize は PNG・JPEG・WebP・AVIF・ICO をサポート。速度・透明度・互換性の観点から、案件ごとの最適解を素早く選ぶためのメモです。
ラスタとベクター
Web 画像の多くはピクセルで構成されたラスタ。ベクター（SVG など）は数式で線や面を描きます。ImgEasyResize はラスタ後処理に特化していますが、元データがベクターであるメリットを保つべきかを事前に確認してください。無限に拡大したいアイコンは SVG のまま、高度な写真・テクスチャは PNG / JPEG / WebP / AVIF に落とし込むのが無難です。
ラスタ：写真・テクスチャ向きベクター：アイコン・ロゴ向きハイブリッド：互換性重視ならラスタ化
主要フォーマット比較
| 形式 | 特徴 | ブラウザー対応 | 適した内容 |
|---|---|---|---|
| PNG | ロスレス圧縮・完全なアルファ・Indexed Color 対応。 | すべてのモダンブラウザー（旧 IE 含む）。 | UI、ロゴ、ドット絵、透過が必要な素材。 |
| JPEG | ロッシー圧縮。品質 0〜1、0.75 以上でほぼ無劣化。 | すべてのモダンブラウザー。 | 写真、ヒーローバナー、グラデーション背景。 |
| WebP | ロッシー / ロスレス・アルファ対応。JPEG / PNG より高圧縮。 | Chrome / Edge / Firefox / Safari 14+。 | 透過が必要で小容量にしたい UI / イラスト、モバイル画像。 |
| AVIF | AV1 ベース。HDR・10bit・アルファを備え圧縮率は最高。 | Chrome 85+、Firefox 93+、Safari 16+。 | ヒーロー画像、フルスクリーン写真、帯域制限が厳しいモバイル。 |
| ICO | Windows favicon 標準。複数サイズを内包。 | ブラウザーの favicon 用。 | サイトアイコン、manifest の補完。 |
推奨手順：まず AVIF / WebP でモダン版を出力し、PNG / JPEG をフォールバックとして控える。ImgEasyResize のバッチダウンロードならファイル名を保ったまま拡張子だけ変えられます。
大量の写真
まず AVIF を 0.45〜0.65 品質で出力し、対応しないブラウザー向けに JPEG を用意して色再現を守る。
- 品質スライダーで素早く比較
- 「画面サイズに合わせる」で細部を確認
アプリ内スクリーンショット
UI テキストを鋭く保つには PNG / WebP ロスレスに Retina 倍率を組み合わせる。
- 幅・高さを固定して端末差をなくす
- バッチ出力でファイル名ルールを統一
二重フォーマットのポイント
旧端末や組み込み環境も考慮するなら「モダン + 後方互換」戦略を：
- まず AVIF / WebP（例: hero.avif）を出力し、同じ設定で JPEG / PNG を作成。
- HTML では
<picture>とtypeを使い、対応フォーマットをブラウザーに選ばせる。 - 2 種類のファイルは同じ CDN ディレクトリに置き、キャッシュ管理を簡単にする。
ImgEasyResize のバッチダウンロードは元ファイル名を保ったまま拡張子だけ切り替えるので、この手法と相性抜群です。