JPG, PNG, WebP, 또는 AVIF?

형식을 비교하기 전에 그들을 모두 운전하는 분할을 알아보세요. 무손실 형식은 모든 픽셀을 정확히 저장하고 품질 저하 없이 언제든지 다시 열고 저장할 수 있습니다 — PNG가 주요 형식입니다. 손실 형식은 눈이 알아채기 어려운 정보를 버려서, 약간의 품질을 훨씬 더 작은 파일로 교환합니다 — JPG, WebP, AVIF는 모두 이를 수행합니다. 이미지가 사진, 로고, 또는 스크린샷인지, 그리고 크기 vs. 호환성을 얼마나 소중히 여기는지에 따라 올바른 선택이 결정되기 때문에 단일 "최고" 형식은 없습니다.

JPG(또는 JPEG)는 베테랑입니다. 사진을 위해 만들어졌고, 실제 이미지의 매끄러운 그래디언트에 맞춘 손실 압축을 사용합니다. 투명성이 없으며, 압축은 날카로운 모서리와 텍스트 주변에 블록 모양의 아티팩트를 남길 수 있으며, 이것이 로고와 스크린샷에 잘못된 이유입니다. 슈퍼파워는 보편적인 지원입니다: 모든 장치, 편집기, 웹사이트가 JPG를 수락합니다.

PNG는 무손실 선택입니다. 모든 픽셀을 보존하고 전체 투명성을 지원하므로, 날카로운 모서리, 텍스트, UI 스크린샷이 있는 그래픽 및 투명 배경이 있는 모든 것의 표준입니다. 비용은 파일 크기입니다: PNG 사진은 같은 사진의 JPG보다 종종 몇 배 더 큽니다. 따라서 PNG는 웹의 사진 콘텐츠에 대한 나쁜 선택입니다.

Google의 WebP는 최신 올라운더입니다. 손실 및 무손실 모드, 투명성, 애니메이션을 모두 제공하며, 비슷한 품질에서 JPG보다 대략 25-35% 더 작은 파일과 종종 PNG보다 훨씬 작은 파일을 생성합니다. 모든 현재 브라우저가 지원하므로, 오늘날 빠른 웹사이트의 실용적인 기본값입니다.

AVIF는 최신 비디오 코덱 기술을 기반으로 하는 4가지 중 가장 새로운 것입니다. 일반적으로 모든 것 중 가장 작은 파일을 달성합니다 — 사진에서 WebP를 큰 차이로 이기는 경우가 많습니다 — 투명성, 넓은 색상, 높은 동적 범위를 지원합니다. 지원은 이제 광범위하지만 완전히 보편적이지는 않으므로, 사이트는 일반적으로 마지막 몇 오래된 클라이언트를 위해 WebP 또는 JPG 폴백이 있는 AVIF를 제공합니다.

잘 최적화된 웹 페이지는 거의 모든 것을 위해 하나의 형식을 사용하지 않습니다. 사진은 속도를 위해 WebP 또는 AVIF로 나가며, JPG 폴백이 있습니다. 로고, 아이콘, 투명성이 필요한 모든 것은 PNG로 유지됩니다 — 또는 더 나으면, 벡터 아트인 경우 SVG로 유지됩니다 — 손실 형식이 날카로운 모서리를 흐리게 하기 때문입니다. 텍스트의 스크린샷은 같은 이유로 PNG로 가장 잘 보입니다.

전환이 가치가 있는지 확실하지 않으면, 대표 이미지를 변환하고 파일 크기와 전체 확대 시점의 모양을 비교하세요. JPG에서 WebP 또는 AVIF로의 크기 감소는 눈에 띄는 품질 손실 없이 종종 극적이며, 이것이 정확히 페이지가 더 빠르게 로드되도록 하는 승리입니다. 호환성이 바이트보다 더 중요한 경우 — 이메일 첨부, 오래된 시스템, 인쇄 샵 — JPG 또는 PNG로 돌아가세요. 이 두 형식은 어디서나 작동합니다.