透過画像に背景を追加

透過PNGやWebP画像はウェブサイトではきれいに見えますが、アプリやマーケットプレイス、メッセンジャーによっては黒や市松模様になり、JPGしか受け付けないフォームも多くあります。このツールは、透明な部分の後ろに、単色、グラデーション、別の写真、画像自体をぼかしたコピーのいずれかを敷き、切り抜いた商品写真にゆとりを持たせるときのように、均等な余白も加えられます。たくさんの画像をまとめて処理し、PNG、JPG、WebPで保存できます。すべてブラウザ内で行われます。

使い方

1. 透過部分のある画像を1枚以上選びます。
2. 背景を選びます。単色、グラデーション、別の画像、ぼかしのいずれかです。
3. 色、グラデーションの向き、または背景画像を設定します。
4. 必要なら画像の周囲に余白を加えます。
5. 形式を選んで結果をダウンロードします。

計算式

余白（px）= 余白% ÷ 100 × min(幅, 高さ)；新しいサイズ = (幅 + 2 × 余白) × (高さ + 2 × 余白)

グラデーションはCSSのlinear-gradientに従います。角度は「to top」から時計回りに測り、中心を通るグラデーション線の長さは|W·sin a| + |H·cos a|なので、最初の色と最後の色が角まで届きます。背景画像は枠全体を覆うように拡大縮小して中央に配置します。

計算例

1000 × 800の商品PNGに10%の余白を付けると、四方に80 px（800の10%）が加わり、白い背景の1160 × 960 pxの画像になります。透明でない白背景の商品写真を求めるマーケットプレイスにそのまま使えます。