이미지 형식: PNG

PNG(Portable Network Graphics)가 다른 형식과 구분되는 몇 가지 사항이 있습니다. 그러나 오래 전 특허 분쟁 때문에 GIF를 대체할 목적으로 의도되었기 때문에 여러 면에서 GIF와 유사합니다. PNG는 또한 무손실 압축을 사용합니다. 즉, 이미지 데이터가 시각적 충실도 손실 없이 압축됩니다. 이미지의 색상 팔레트는 '색인이 생성된 색상'으로 양자화될 수 있으며 PNG는 GIF와 같이 256색으로 제한된 팔레트를 사용합니다. 훨씬 더 일반적인 '트루컬러' PNG는 최대 1, 600만 개까지 더 많은 색상을 포함할 수 있습니다.

PNG와 GIF는 모두 투명도를 지원하지만 큰 차이가 있습니다. GIF는 투명도를 이진법으로 취급합니다. 픽셀은 불투명한 색상이거나 완전히 투명한 것입니다. PNG는 '알파 채널' 투명도를 지원합니다. 즉, 각 픽셀은 0 (완전 투명)에서 255 (완전 불투명) 사이의 투명도 수준으로 설정할 수 있습니다.

2단계 투명도를 보여주는 분홍색 꽃 두 송이입니다.

실질적으로 상당한 양자화와 무손실 압축이 부족하면 이미지를 PNG로 저장해도 시각적 품질이 저하되지 않습니다. 하지만 이 경우 거의 예외 없이 최신의 웹 친화적인 인코딩에 비해 파일 크기가 과도하게 커집니다. PNG의 전송 크기는 사진 콘텐츠에 적합한 경우는 거의 없습니다.

JPEG와 PNG 비교

PNG는 반투명성을 지원하는 유일한 래스터 인코딩으로, 과거에는 대부분 단일 사용 사례에서 더 많이 사용되었습니다. 현재 PNG는 반투명성이 필요한 간단한 아트워크(예: 그림자가 포함된 회사 로고)에만 고려되어야 하며 WebP와 같이 반투명성을 지원하는 최신 형식과 신중하게 비교해야 합니다.

GIF와 마찬가지로 PNG는 확장성 및 파일 크기 면에서 SVG가 자주 사용하는 사용 사례를 해결하기 위해 설계되었습니다. 이러한 이유로 SVG를 지원하지 않는 소수의 브라우저에서 UI 요소의 대체 버전으로 PNG가 사용되는 것을 볼 수 있지만, 이러한 브라우저는 드물게 사용되고 있습니다.

PNG와 SVG 비교

실질적으로 PNG는 소스 이미지의 관리 가능한 크기의 '표준' 버전을 유지관리하는 데 적합한 선택입니다. 이 버전은 로컬 개발 환경에 저장하거나, 해당 이미지의 향후 버전을 대체 형식으로 수정하거나 다시 저장해야 하는 경우에 대비하여 프로젝트 저장소에 커밋합니다.

하지만 인코딩이 표준화되더라도 편집 도구마다 인코딩을 실행하는 다양한 메서드가 있으며, 그중 일부는 다른 메서드보다 훨씬 더 효율적입니다. 컨텍스트에서 PNG를 전송하기 전에 Squoosh 또는 ImageOptim과 같은 도구를 통해 파일을 실행해야 합니다.