투명 이미지에 배경 넣기

투명한 PNG와 WebP 이미지는 웹사이트에서는 멋지게 보이지만 일부 앱, 마켓플레이스, 메신저에서는 검은색이나 체크무늬로 보이고, 많은 양식은 JPG만 받습니다. 이 도구는 투명한 부분 뒤에 단색, 그라데이션, 다른 사진, 이미지 자체를 흐리게 한 사본 중 하나를 깔고, 누끼 딴 상품 사진에 숨 쉴 공간을 주는 것처럼 균일한 여백도 더할 수 있습니다. 여러 이미지를 한꺼번에 처리해 PNG, JPG, WebP로 저장할 수 있으며, 모든 작업은 브라우저 안에서 이뤄집니다.

사용 방법

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 이미지가 됩니다. 투명하지 않은 흰 배경 상품 사진을 요구하는 마켓플레이스에 바로 쓸 수 있습니다.