이미지 둥근 모서리

둥근 사각형(또는 원, 스쿼클) 경로로 이미지를 잘라 투명 PNG에 구워 넣습니다. 아바타 정사각형, 섬네일 타일, CSS를 쓰지 않고 border-radius 스타일에 맞춰야 하는 모든 이미지에 씁니다. 모서리별 모드에서는 네 반지름을 따로 지정할 수 있고(좌상, 우상, 우하, 좌하), 여백을 주면 잘린 부분 둘레에 불투명한 테두리가 생기며, JPEG 모드는 알파를 담을 수 없으므로 투명한 부분을 지정한 배경색으로 평탄화합니다.

모서리를 파일에 구워 넣는 것은 CSS가 닿지 않는 자리에서 정확히 옳은 선택입니다. 스타일을 대부분 걷어내는 메일 클라이언트, PDF, 슬라이드, 인쇄물, 원본 이미지를 그대로 그리는 앱이 그렇습니다. 그 밖의 곳에서는 border-radius가 낫습니다. 같은 자산이 어느 크기에서도 통하고 모서리가 상자에 맞춰 커지기 때문입니다. 24픽셀로 구워 넣은 반지름은 이미지를 절반 크기로 표시하는 순간 어색해집니다.

스쿼클은 반지름을 더 키운 둥근 사각형이 아닙니다. 초타원이며, 직선 변과 호가 만나는 지점이 없는 연속 곡선입니다. 반지름이 클 때 보통의 둥근 모서리에서 눈에 띄는 것이 바로 그 불연속입니다. iOS 아이콘이 스쿼클을 쓰는 이유이고, 스쿼클로 그린 아이콘을 둥근 사각형으로 자르면 옆 아이콘들과 나란히 놓였을 때 미묘하게 어긋나 보이는 이유이기도 합니다.

알파는 이미지가 아니라 형식의 성질입니다. PNG와 WebP는 담고 JPEG는 담지 않으므로, JPEG 경로가 조용히 검정으로 채우는 대신 배경색을 묻는 것입니다. 결과물이 어떤 배경 위에 놓일지 모른다면 PNG로 두십시오.

캔버스는 픽셀 경계에서 앤티앨리어싱을 적용해 자르므로, 곡선은 단단한 경계가 아니라 부분적으로 투명한 픽셀 몇 개입니다. 그 덕에 매끄러워 보이는 것이고, 나중에 출력물을 축소하면 원래 배경의 옅은 테가 남을 수 있는 이유이기도 합니다.