PNGの透明な余白を削除する方法

結論：Imgovoの透明な余白を削除を開き、PNGか WebPを選んで、プレビューの下に表示される新しいサイズを確認し、結果をダウンロードします。見えているピクセルをすべて含む最小の長方形を探し、ぴったりそこで切り抜きます。

PNGの周りに透明な空きができる理由

PNGは透明な背景を保存できます。ただし画像そのものは長方形のままなので、大きなキャンバスの中央にあるロゴは、四方に透明な余白を持っています。白いページでは見えませんが、確かにあります。この余白のせいでロゴが実際より小さく見え、隣の要素から離れてしまい、ボタンやヘッダー、アイコンの中でスペースがむだになります。

余白は、たいてい次のような原因でできます。

• デザインソフトが、作品だけでなくアートボード全体を書き出した、
• 切り抜いた画像が元の写真のサイズのままになっている、
• スクリーンショットやステッカーに、消えていくやわらかい影がある。

手順

1. 透明な余白を削除を開き、ファイルを選びます。
2. 左側の破線の枠を見てください。見つかった「見えている部分」を示しています。
3. プレビューの下の行を読みます。内容のサイズと、上・右・下・左から何ピクセル取り除いたかが表示されます。
4. うすい影のせいで余白が広いままなら、アルファのしきい値を少し上げて、枠が小さくなるのを確かめます。
5. ロゴの周りに少しゆとりがほしいときは、余白を追加します。追加される余白は透明です。
6. PNGか WebPを選び、画像をダウンロードを押します。

実際の例

Imgovoのロゴマークは 300 × 279 pxの PNGで、四方に 13 pxずつ透明な空きがあります。しきい値 0なら、ツールは 274 × 253 pxに切り抜きます。上・右・下・左の 13 pxがすべて取り除かれ、ロゴ自体には手が加わりません。

	ビフォー	アフター
サイズ	300 × 279 px	274 × 253 px
透明な余白	四方に 13 pxずつ	なし

アルファのしきい値と余白

すべてのピクセルには 0（完全に透明）から 255（完全に不透明）までのアルファ値があります。初期値の 0では、アルファが 0を超えた時点で「見えている」と数えるので、目に見えるものは失われません。切り抜き画像の中には、被写体から離れた場所にほぼ見えないピクセルが残っているものがあります。しきい値を上げると、それらを空として扱えます。上げるときは少しずつにしてください。値が高いと、影のやわらかい縁まで切ってしまうことがあります。

余白は、切り取りとは逆の働きをします。見えている部分の四方に、同じ数の透明なピクセルを足します。元の画像にそれだけの空きがなければ、足りない分は新しい透明なキャンバスとして追加されます。

透明な余白と白い余白の違い

透明な余白は「存在しないピクセル」でできています。白い余白は白いピクセルでできていて、これは見えているので、ツールは残します。画像の空きが白い場合は、画像のトリミングで切り取るか、先に背景を削除で背景を消してから余白を削除してください。

アイコンとファビコン

透明な余白が厚いアイコンは、16 pxではとても小さく見えます。先に余白を削除し、そのあと小さな余白をつけて正方形に配置します。使うサイズは、ファビコン作成ツールとガイド「ファビコンの作り方」で確認できます。

制限

• JPGには透明がないので、取り除くものはありません。
• アニメーションの GIFや WebPは、最初のフレームを使って 1 枚の画像として処理されます。
• 非常に大きな画像は、ブラウザが扱える大きさに制限されます。大きすぎる場合は Imgovoがお知らせします。
• 出力形式は PNGと WebPです。どちらも透明を保てるためです。

プライバシー

余白の検出はブラウザ内で行われます。何もアップロードされません。

今すぐ試す

透明な余白を削除を開き、ロゴをドロップして、どれだけ空きがあるか確かめてみましょう。