이미지 포맷 설명: PNG, JPEG, WebP, SVG & AVIF

2026년 3월 31일 · 12분 읽기

올바른 이미지 포맷을 선택하면 웹사이트의 성능, 시각적 품질 및 사용자 경험에 큰 영향을 미칠 수 있습니다. AVIF 및 WebP와 같은 최신 포맷이 JPEG 및 PNG와 같은 기존 표준과 함께 주목받고 있는 가운데, 각 포맷을 언제 사용해야 하는지 이해하는 것이 그 어느 때보다 중요해졌습니다.

이 종합 가이드는 오늘날 웹에서 사용되는 모든 주요 이미지 포맷의 기술 사양, 실용적인 사용 사례 및 성능 특성을 분석합니다. 트래픽이 많은 웹사이트를 최적화하든 이미지가 흐릿하게 보이는 이유를 이해하고 싶든, 여기에서 실행 가능한 인사이트를 찾을 수 있습니다.

전체 포맷 비교

개별 포맷을 자세히 살펴보기 전에, 주요 기준에 따라 각 포맷이 어떻게 비교되는지에 대한 포괄적인 개요입니다. 이 표는 특정 요구 사항에 적합한 포맷을 빠르게 식별하는 데 도움이 됩니다.

JPEG: 사진 표준

JPEG(Joint Photographic Experts Group)는 1992년부터 사진 이미지의 지배적인 포맷이었습니다. 손실 압축 알고리즘은 인간의 눈이 미세한 색상 변화에 덜 민감한 연속 톤 이미지에 특별히 최적화되어 있습니다.

JPEG 압축 작동 방식

JPEG는 이산 코사인 변환(DCT)이라는 기술을 사용하여 공간 이미지 데이터를 주파수 데이터로 변환합니다. 그런 다음 인간이 덜 정확하게 인식하는 고주파 정보를 버려 시각적 품질을 유지하면서 상당한 파일 크기 감소를 달성합니다.

이 포맷은 사진, 그림 및 복잡한 자연 장면에서 뛰어나지만 압축 아티팩트가 매우 눈에 띄는 날카로운 가장자리, 텍스트 및 평평한 색상 영역에서는 어려움을 겪습니다.

JPEG 품질 수준 설명

파일 크기와 시각적 충실도의 균형을 맞추려면 품질 설정을 이해하는 것이 중요합니다:

• 품질 95-100: 최소 압축, 매우 큰 파일. 보관 목적이나 파일 크기가 중요하지 않을 때만 사용하세요. 대부분의 경우 원본과 시각적으로 구별할 수 없습니다.
• 품질 85-95: 대부분의 사진에서 시각적으로 무손실. 품질이 파일 크기보다 중요한 고품질 웹 이미지의 최적 지점입니다.
• 품질 70-85: 웹 사용을 위한 탁월한 균형. 합리적인 파일 크기로 좋은 품질의 이미지를 생성합니다. 대부분의 웹사이트는 이 범위를 목표로 해야 합니다.
• 품질 50-70: 특히 세부 영역에서 눈에 띄는 아티팩트가 나타납니다. 썸네일이나 대역폭이 심각하게 제한된 경우 허용 가능합니다.
• 품질 50 미만: 상당한 품질 저하. 작은 썸네일이나 극단적인 대역폭 제약이 있을 때만 사용하세요.

프로그레시브 vs 베이스라인 JPEG

프로그레시브 JPEG는 여러 패스로 로드되며 점차 선명해지는 저해상도 버전으로 시작합니다. 베이스라인 JPEG는 단일 패스로 위에서 아래로 로드됩니다.

프로그레시브 JPEG의 장점:

• 더 나은 체감 성능—사용자가 즉시 무언가를 봅니다
• 10KB 이상의 이미지에서 종종 2-10% 더 작은 파일 크기
• 느린 연결에서 향상된 사용자 경험

베이스라인을 사용해야 하는 경우:

• 프로그레시브 인코딩이 오버헤드를 추가하는 매우 작은 이미지(10KB 미만)
• 처리 능력이 제한된 매우 오래된 장치를 대상으로 할 때
• 일부 클라이언트가 프로그레시브를 잘 처리하지 못하는 이메일 첨부 파일

JPEG를 사용하지 말아야 하는 경우

JPEG는 다음의 경우 잘못된 선택입니다:

• 텍스트가 있는 스크린샷 (대신 PNG 사용)
• 투명도가 필요한 이미지 (PNG 또는 WebP 사용)
• 선 아트, 다이어그램 또는 일러스트레이션 (SVG 또는 PNG 사용)
• 여러 번 편집될 이미지 (저장할 때마다 품질이 저하됨)
• 단색 영역이 큰 이미지 (압축 아티팩트가 매우 눈에 띔)

PNG: 무손실 정밀도

PNG(Portable Network Graphics)는 1996년에 GIF의 특허 없는 대체품으로 만들어졌습니다. 무손실 압축을 사용하므로 모든 픽셀이 원본 이미지와 정확히 동일하게 보존됩니다. 저장 횟수에 관계없이 말입니다.

PNG 색상 깊이

PNG는 각각 다른 사용 사례에 적합한 여러 색상 깊이를 지원합니다:

• PNG-8: 최대 256색(8비트), GIF와 유사하지만 압축이 더 좋습니다. 간단한 그래픽, 아이콘 및 제한된 색상 팔레트가 있는 이미지에 이상적입니다. 파일 크기는 일반적으로 동등한 GIF보다 30-50% 작습니다.
• PNG-24: 1,670만 색상(24비트), 전체 RGB 색상. 투명도가 없는 복잡한 그래픽에 완벽합니다. PNG-8보다 훨씬 크지만 완벽한 품질을 유지합니다.
• PNG-32: 24비트 색상과 8비트 알파 채널(투명도). 대부분의 사람들이 "PNG"라고 말할 때 의미하는 것입니다. 픽셀당 256단계의 투명도를 지원하여 부드러운 가장자리와 반투명 효과를 가능하게 합니다.

알파 투명도 설명

PNG의 알파 채널은 킬러 기능입니다. 픽셀이 완전히 투명하거나 완전히 불투명한 GIF의 이진 투명도와 달리 PNG는 픽셀당 256단계의 투명도를 지원합니다.

이를 통해 다음이 가능합니다:

• 모든 배경과 매끄럽게 혼합되는 부드러운 안티 앨리어싱 가장자리
• 반투명 오버레이 및 효과
• 모든 배경색에서 자연스럽게 보이는 그림자 및 글로우
• 복잡한 합성 및 레이어링 효과

PNG 압축 수준

PNG 압축은 무손실이지만 조정 가능합니다. 더 높은 압축 수준은 인코딩하는 데 더 오래 걸리지만 동일한 시각적 품질로 더 작은 파일을 생성합니다:

• 레벨 0: 압축 없음 (가장 빠름, 가장 큰 파일)
• 레벨 1-3: 빠른 압축, 중간 파일 크기
• 레벨 6: 대부분의 도구에서 기본값, 좋은 균형
• 레벨 9: 최대 압축 (가장 느림, 가장 작은 파일)

웹 사용의 경우 항상 레벨 9 압축을 사용하세요. 개별 이미지의 인코딩 시간 차이는 무시할 수 있으며 파일 크기 절감은 상당합니다.

PNG를 사용해야 하는 경우

PNG는 다음의 경우 최선의 선택입니다:

• 스크린샷 및 화면 녹화
• 텍스트 또는 날카로운 가장자리가 있는 그래픽
• 로고 및 브랜드 자산 (SVG가 적합하지 않을 때)
• 투명도가 필요한 이미지
• 여러 번 편집될 이미지
• 평평한 색상 또는 그라디언트가 있는 그래픽
• JPEG 압축 전 모든 이미지의 마스터 사본

PNG 파일 크기 고려 사항

PNG 파일은 사진 콘텐츠의 경우 동등한 JPEG보다 5-10배 클 수 있습니다. 2MB JPEG가 15MB PNG가 될 수 있습니다. 이로 인해 WebP 또는 AVIF와 같은 최신 포맷을 대안으로 사용하지 않는 한 PNG는 사진 갤러리나 히어로 이미지에 적합하지 않습니다.

WebP: 구글의 범용 포맷

구글이 개발하고 2010년에 출시한 WebP는 손실 및 무손실 이미지 모두에 대해 우수한 압축을 제공하고 투명도 및 애니메이션 지원을 제공하는 단일 포맷으로 JPEG와 PNG를 모두 대체하도록 설계되었습니다.

WebP 압축 성능

WebP는 레거시 포맷에 비해 인상적인 파일 크기 감소를 제공합니다:

손실 vs 무손실 WebP

WebP는 두 가지 압축 모드를 모두 지원하며,