用途、構図、未変更の元画像から始める
Webカード、SNS投稿、メール添付、商品一覧は、同じ画像からでも異なる形を求めることがあります。ピクセルを変更する前に、目標枠、表示場所、透明背景が必要かを決めます。
このガイドでは自作の 1600 × 1000 シーンを使います。想定するWeb枠は 1200 × 750 で同じ 8:5 比率のため、Fill はピクセルを作り出さずに正確な枠を作れます。元画像は残し、書き出したコピーは特定の用途に使います。
リサイズモードを意図して選ぶ
幅と高さは一方の寸法から元の形を保ちます。Fit は画像全体を枠内に収め、余白が残ることがあります。Fill は中央から切り抜いて正確な枠を作ります。被写体や重要な端が中央の切り抜き内にあることを確認してから使ってください。
| 必要なこと | より安全な選択 | 書き出し前の確認 |
|---|---|---|
| 一辺を固定 | 幅または高さ | もう一辺も適切か？ |
| すべてのピクセルを表示 | Fit | 余白を許容できるか？ |
| 正確なカード・バナー枠 | Fill | 中央トリミングは安全か？ |
| 透明な被写体 | 切り抜き後のPNG | 最終背景で縁は機能するか？ |
実測できるWeb用コピーを書き出す
実際の実行では Fill、1200 × 750、WebP、品質82、メタデータ削除を選びました。元画像から 12 KB が出力されます。WebP はWeb用の写真やイラストに適することが多い一方、容量と見た目の品質は元画像次第です。固定の割合を信じず、必ず出力を開いて確認してください。
結果を読み、元画像を分けて保管する
完了結果には 1600 × 1000 → 1200 × 750 と実際の容量が表示されます。新しいファイルとしてダウンロードしてください。元画像の代わりにはならず、同じ切り抜きがすべての配置に適するわけでもありません。
配置で必要な場合だけ透明化する
このガイドでは準備した WebP を背景削除に渡し、101 KB の透明PNGを生成します。輪郭がはっきりした被写体と単純な背景なら、最初の切り抜きは通常より使いやすくなります。髪、ガラス、細い影、半透明素材、近い色は念入りな確認が必要です。
透明PNGをダウンロードできる完了した背景削除。
完了は確認開始の合図であり、すべての縁が完璧という証明ではありません。
明るい背景と暗い背景で切り抜きを確認する
チェッカーボードで透明に見えても、実際のレイアウトでは縁取りや欠けた端が出ることがあります。PNG を明るい背景と暗い背景に置き、実際に近い表示サイズで輪郭、背景の残り、トリミング、より大きいPNGが配信先に適するかを確認します。
- 元画像と名前を付けた書き出しを分けて保管します。
- 任意の数字を満たすためだけに小さな画像を拡大しません。
- 公開前に、利用者が見る実際の場所で最終素材を開きます。
この手順が決めてくれないこと
リサイズや切り抜きが完了しても、画像の権利、代替テキスト、ブランド承認、見えるプライバシー、用途ごとの最適な圧縮は決まりません。出力は公開フロー内で確認できる素材として扱ってください。
よくある質問
Fit と Fill はどちらを使うべきですか？
画像全体を見せる必要があるなら Fit を使います。中央トリミングを確認済みで正確な枠が必要なときだけ Fill を使います。
透明PNGがWebPより大きいのはなぜですか？
PNG は透明ピクセルを非可逆圧縮せずに保持するため、切り抜き画像はかなり大きくなることがあります。透明が必要なときだけ使います。
メタデータの削除で見える個人情報も隠れますか？
いいえ。埋め込みメタデータに影響するだけで、見えるピクセルには影響しません。