PNG를 JPEG나 WebP 대신 사용해야 하는 경우는 언제인가요?

WebP를 사용할 수 없는 상황에서 투명도(알파 채널)가 있는 이미지, 픽셀 정확도가 중요한 경우(UI 스크린샷, 픽셀 아트), 또는 JPEG 압축이 뭉개버릴 선명한 텍스트나 선 그림이 있는 이미지에 PNG를 사용하세요. 웹의 대부분의 사진에는 JPEG나 WebP가 거의 항상 더 나은 선택입니다.

JPEG나 WebP로 변환할 때 어떤 품질 설정을 사용해야 하나요?

웹의 사진에는 75~85% 품질이 표준 최적 구간입니다. 품질 손실은 대부분의 사람에게 눈에 보이지 않으면서 파일 크기는 100%에 비해 크게 줄어듭니다. 세부 사항이 중요한 제품 이미지에는 85~90%가 더 안전합니다. 추가 편집이나 인쇄를 위한 이미지에만 100% 근처의 품질을 사용하세요. 70% 미만으로 내려가면 대부분의 사진에서 눈에 보이는 압축 아티팩트가 나타나기 시작합니다.

JPEG vs PNG vs WebP: 어떤 이미지 형식을 써야 하고 언제 변환해야 할까

Q: JPEG와 PNG의 차이는 무엇인가요?

JPEG는 손실 압축을 사용합니다. 일부 이미지 데이터를 버려 파일 크기를 줄이므로, 미세한 품질 손실이 눈에 보이지 않는 사진에 이상적입니다. PNG는 무손실 압축을 사용합니다. 모든 픽셀이 정확히 보존되므로 스크린샷, 로고, 텍스트나 투명도가 있는 이미지에 적합합니다. 사진의 PNG는 보통 동등한 JPEG보다 3~5배 크며 눈에 보이는 품질 차이는 없습니다.

Q: WebP가 JPEG보다 낫나요?

대부분의 경우 그렇습니다. WebP는 동등한 화질에서 JPEG보다 파일 크기가 25~35% 작으며, 투명도와 애니메이션도 지원합니다. 브라우저 지원은 이제 보편화됐습니다. 모든 주요 브라우저가 2020~2021년부터 WebP를 지원합니다. 주요 제약은 일부 오래된 편집 도구가 WebP를 기본적으로 지원하지 않고, 일부 CMS 플랫폼에 여전히 빈틈이 있다는 것입니다.

Q: JPEG를 WebP로 변환하면 품질이 손실되나요?

80% 이상의 품질 설정으로 JPEG에서 WebP로 변환하면 보통 더 작은 파일 크기에서 시각적으로 동일한 품질이 유지됩니다. 손실-손실 변환이므로 이미 압축된 데이터를 다시 압축하는 것입니다. 최상의 결과를 위해서는 항상 가장 높은 품질의 소스에서 변환하세요. 심하게 압축된 JPEG에서 변환하지 마세요.

몇 년 전, 저는 소규모 비즈니스 사이트에 대한 일상적인 성능 감사를 진행하고 있었습니다. 특별한 것은 없었습니다. 그냥 Lighthouse 점수가 왜 낮은지 확인하는 것이었습니다. 답은 바로 명확했습니다. 홈페이지에 이미지가 열한 개 있었는데, 전부 PNG였고, 전부 제품 사진이었습니다. 가장 큰 것은 4.2MB였습니다. 히어로 이미지 하나만 2.8MB였습니다.

아무도 의도적으로 잘못한 것이 없었습니다. 사진들이 PNG를 기본값으로 사용하는 디자인 도구에서 내보내졌고, 아무도 의문을 품지 않았습니다. 이미지들이 훌륭해 보였으니까요. 실제로도 훌륭해 보였습니다. 하지만 그 크기는 완전히 불필요했습니다. 80% 품질의 JPEG로 변환했다면 시각적으로 어떤 사람에게도 구별할 수 없으면서 전체 이미지 용량이 약 18MB에서 약 2.5MB로 줄었을 것입니다.

이런 종류의 문제는 웹 어디에나 있으며, 각 형식이 실제로 무엇을 하는지 이해하면 완전히 해결할 수 있습니다.

JPEG: 사진을 위한 표준 형식

JPEG(Joint Photographic Experts Group)는 1992년부터 있었으며 여전히 인터넷에서 가장 널리 사용되는 이미지 형식입니다. 이렇게 오래 지속된 이유는 의도된 목적인 사진 압축에 실제로 잘 맞기 때문입니다.

사진은 연속적인 색조 변화를 가집니다. 색상과 빛이 서로 섞이는 부드러운 그라디언트입니다. JPEG 압축은 이미지를 8x8 픽셀 블록으로 나누고 인간의 시각 시스템이 상대적으로 민감하지 않은 고주파 세부 정보를 버림으로써 이것을 활용합니다. 결과는 눈에 보이는 품질 저하 없이 비압축 이미지의 10분의 1 크기가 될 수 있는 파일입니다.

JPEG가 잘 작동하는 경우:

제품 사진, 편집 사진, 히어로 이미지
부드러운 그라디언트와 자연스러운 색상 변화가 있는 이미지
소셜 미디어 업로드, 이메일 첨부 파일, 파일 크기가 중요한 곳

JPEG가 취약한 경우:

선명한 가장자리와 텍스트가 있는 이미지(로고, 스크린샷, 다이어그램) — 압축이 고대비 가장자리 주변에 보이는 링 아티팩트를 생성
투명도가 필요한 이미지 — JPEG는 알파 채널을 지원하지 않음
반복적으로 편집될 이미지 — 저장할 때마다 추가 품질 손실이 발생

80% 법칙. "80% 품질"이 웹 성능 조언에서 계속 언급되는 이유가 있습니다. 대략 70~~75% 미만에서 JPEG 아티팩트가 대부분의 사진에서 보이기 시작합니다. 약 85~~90% 이상에서는 눈에 보이는 이점은 최소화되면서 파일 크기가 크게 증가합니다. 75~85% 범위에서 눈에 보이는 품질을 희생하지 않으면서 대부분의 압축 이점을 얻을 수 있습니다. 대부분의 웹 이미지에는 80%가 완전히 안전한 기본값입니다.

PNG: 픽셀이 정확해야 할 때

PNG(Portable Network Graphics)는 1990년대 중반 GIF의 특허 없는 대안으로 만들어졌습니다. ZIP 파일과 동일한 알고리즘인 Deflate를 사용한 무손실 압축을 씁니다. PNG의 모든 픽셀은 그대로 정확히 보존됩니다.

이것이 PNG를 특정 유형의 이미지에 필수적으로 만들고 다른 유형에는 완전히 잘못된 선택으로 만드는 것입니다.

PNG가 올바른 선택인 경우:

인터페이스, 코드, 텍스트의 스크린샷 — 모든 픽셀을 읽을 수 있어야 함
단색과 선명한 가장자리가 있는 로고와 아이콘
투명도가 필요한 이미지(PNG는 완전한 알파 채널 지원, 이진 투명도만이 아님)
추가 편집을 위한 이미지 — 세대 손실 없이 품질 저하 없이 계속 편집 가능
픽셀 아트와 다이어그램

PNG가 잘못된 선택인 경우:

사진. 사진의 PNG는 눈에 보이는 품질 차이 없이 동등한 JPEG보다 거의 항상 3~5배 큽니다. 이것이 제가 처음에 설명한 실수입니다. 이미지가 실제 세계의 장면 사진이고 투명도가 필요 없다면, PNG는 아마 해를 끼치고 있는 것입니다.

역설적으로 PNG의 무손실 압축은 사진이 효율적으로 패킹하기에 너무 다양한 색상 정보를 포함하기 때문에 실제로 사진 파일을 JPEG보다 더 크게 만듭니다.

WebP: 이제 기본값이 되어야 할 형식

WebP는 Google이 개발해 2010년에 출시했습니다. 역사의 대부분 동안 일관성 없는 브라우저 지원으로 채택이 저해됐습니다. Safari가 특히 늦게 2020년에야 지원을 추가했습니다. 2021년까지 모든 주요 브라우저가 WebP를 지원하게 됐고, 이는 10년 동안 사람들을 막았던 "브라우저 지원" 우려가 사실상 해결됐음을 의미합니다.

WebP 지원 사항:

손실 압축(JPEG와 유사하지만 동등한 품질에서 보통 25~35% 더 작음)
무손실 압축(PNG와 유사하지만 보통 26% 더 작음)
투명도(손실 및 무손실 모드 모두에서 알파 채널)
애니메이션(모든 편집기에서 완전히 지원되지는 않음)

실제로 WebP는 대부분의 사진 콘텐츠에서 JPEG를 엄격히 업그레이드합니다. 동일한 이미지, 더 작은 파일, 동등한 품질. 투명도 때문에 PNG가 필요했던 이미지에는 WebP가 훨씬 더 작은 파일 크기에서 투명도를 제공합니다.

주의사항: 일부 오래된 CMS 플랫폼, 이메일 클라이언트, 디자인 도구는 여전히 WebP 지원이 제한적입니다. 뉴스레터용 이미지를 내보낸다면, 해당 형식을 모든 자산에 적용하기 전에 이메일 플랫폼이 WebP를 처리하는지 확인하는 것이 좋습니다.

변환 시나리오: 무엇을 변환하고 왜

PNG to JPEG — 가장 흔하고 가장 큰 영향을 주는 변환입니다. 제품 또는 히어로 사진이 PNG로 저장되어 있다면, 80% 품질로 JPEG로 변환하면 눈에 보이는 품질 손실 없이 파일 크기가 60~80% 줄어드는 것이 일반적입니다. 포기하는 한 가지는 투명도입니다. PNG가 알파 채널을 사용한다면 JPEG로 변환하기 전에 배경 색상으로 채워야 합니다.

PNG to WebP — 두 가지의 장점을 모두 얻습니다. 투명도 지원(PNG와 동일)과 더 작은 파일 크기(JPEG보다 나음)를 얻습니다. 투명 배경의 로고에는 고품질 WebP가 동일하게 보이면서 파일 크기에서 PNG를 앞섭니다.

JPEG to WebP — 탄탄한 일상적 최적화입니다. 기존 JPEG 사진 아카이브의 대부분을 최신 브라우저 방문자에게 WebP로 제공해 눈에 보이는 품질 변화 없이 25~35% 대역폭을 절약할 수 있습니다. 많은 프레임워크와 CDN이 이것을 이제 자동으로 합니다.

WebP to JPEG or PNG — WebP를 받지 않는 플랫폼이나 도구에 이미지를 제출할 때 필요합니다. 고품질로 WebP에서 JPEG나 PNG로 변환하면 시각적으로 무손실이어야 합니다.

JPEG-to-WebP에 대한 솔직한 참고 사항: 손실-손실 변환이므로 이미 압축된 데이터를 다시 압축하는 것입니다. 원본 비압축 또는 무손실 압축 소스(RAW 파일, TIFF, 고품질 PNG)가 있다면 항상 압축된 JPEG가 아닌 그것에서 변환하세요. 심하게 압축된 JPEG에서 변환하면 기존 아티팩트가 증폭됩니다.

ToolboxHubs의 이미지 형식 변환기 사용 방법

toolboxhubs.com의 이미지 형식 변환기는 Canvas API를 사용해 완전히 브라우저에서 실행됩니다. 사용 방법은 다음과 같습니다.

이미지를 업로드합니다. 드래그 앤 드롭하거나 클릭해서 선택합니다. JPEG, PNG, WebP, GIF 입력이 모두 허용됩니다.
출력 형식을 선택합니다. 형식 드롭다운에서 JPEG, PNG, 또는 WebP를 선택합니다.
품질을 설정합니다. JPEG 및 WebP 손실 출력에는 품질 슬라이더(기본값 80%)가 있습니다. PNG 무손실 출력에는 품질 설정이 없습니다.
변환된 파일을 다운로드합니다. 변환을 클릭하고 결과를 다운로드합니다.

품질 설정을 변경하면 미리보기가 업데이트되므로 다운로드하기 전에 트레이드오프를 확인할 수 있습니다.

알아야 할 제한 사항:

이 도구는 변환에 브라우저 내장 Canvas API를 사용하므로 출력 품질은 사용하는 브라우저에 따라 약간 달라집니다. Chrome의 WebP 인코더와 Firefox의 WebP 인코더는 약간 다른 결과를 생성합니다. 둘 다 좋지만 비트 단위로 동일하지는 않습니다.

애니메이션 GIF는 업로드할 수 있지만 정적 이미지(첫 번째 프레임)로 변환됩니다. 애니메이션 WebP 출력은 지원되지 않습니다. GIF에서 애니메이션 WebP가 필요하다면 더 특화된 도구가 필요합니다.

SVG는 입력으로 지원되지 않습니다. Canvas API는 임의의 SVG 파일을 안정적으로 렌더링할 수 없으므로 도구는 래스터 입력(JPEG, PNG, WebP, GIF)이 필요합니다.

매우 큰 이미지 — DSLR에서 나온 2000만 픽셀 이상의 이미지 — 는 일부 브라우저에서 특히 모바일에서 변환이 느려지거나 메모리 경고가 발생할 수 있습니다. 고해상도 소스 파일의 대규모 배치 변환에는 ImageMagick이나 Squoosh CLI 같은 데스크톱 도구가 더 적합합니다.

품질 설정: 숫자가 실제로 의미하는 것

품질 백분율은 객관적인 무언가의 직접적인 척도가 아니라 인코더가 다르게 사용하는 압축 매개변수이기 때문에 사람들이 혼란스러워합니다.

백분율이 제어하는 것은 인코더가 정보를 얼마나 공격적으로 버리는지입니다.

90~100%: 거의 무손실. 파일 크기가 큽니다. 다시 편집하거나 인쇄하거나 아티팩트가 전문적으로 허용되지 않는 맥락에서 사용할 이미지에 유용합니다.
75~85%: 표준 웹 최적 구간. 눈에 보이는 아티팩트는 최소화되고 파일 크기는 크게 줄어듭니다. 거의 모든 웹 이미지에 적합한 범위입니다.
60~75%: 눈에 띄게 작은 파일. 고대비 영역이나 자세히 보면 아티팩트가 보일 수 있습니다. 썸네일, 작은 UI 이미지, 빠른 로딩이 완벽한 품질보다 더 중요한 소셜 미리보기에 허용 가능합니다.
60% 미만: 눈에 보이는 블록 모양과 뭉개짐. 매우 작은 썸네일이나 대역폭이 심각하게 제한된 상황에서만 가치 있습니다.

대부분의 사람들이 대부분의 것을 하는 경우 — 제품 이미지 업로드, 블로그 사진 준비, 랜딩 페이지 최적화 — 에는 80%가 시작할 숫자이고 특정 문제가 보일 때만 조정하면 됩니다.

성능 영향은 실제로 큽니다

구체적인 규모를 알려드리겠습니다. 최적화되지 않은 PNG로 가득한 전형적인 사진 중심 랜딩 페이지에는 15~~25MB의 이미지 데이터가 있을 수 있습니다. 80% 품질의 WebP로 변환하면 2~~4MB로 줄일 수 있습니다. 평균 모바일 대역폭 10Mbps에서 이것은 12~~20초의 이미지 로드 시간과 1.6~~3.2초의 로드 시간의 차이입니다. 이 숫자들은 이탈률에 직접 영향을 줍니다.

Google의 Core Web Vitals — 특히 Largest Contentful Paint(LCP) — 는 이미지 크기에 크게 영향을 받습니다. LCP 요소가 이미지(보통 그렇습니다)라면, 해당 이미지의 형식과 압축이 성능 점수에 직접적으로 영향을 주는 가장 직접적인 레버 중 하나입니다.

함께 쓰면 좋은 도구들

이미지 압축기 — 형식을 변경하지 않고 파일 크기를 줄이고 싶다면, 압축기를 사용해 동일한 형식 내에서 더 공격적인 압축을 적용할 수 있습니다.

이미지 리사이저 — 브라우저에서 400px로 축소되어 표시되는 3000px 넓이 이미지를 제공하고 있나요? 제공하기 전에 리사이징하는 것이 형식 선택만큼 중요합니다. 실제 표시 크기로 리사이징한 다음 형식을 변환하세요.

FAQ

JPEG와 PNG의 차이는 무엇인가요? JPEG는 손실입니다. 더 작은 파일을 위해 일부 세부 정보를 버리므로 사진에 좋습니다. PNG는 무손실입니다. 모든 픽셀이 정확히 보존되므로 스크린샷, 로고, 투명도가 있는 이미지에 적합합니다. 사진에 PNG를 사용하는 것이 가장 흔한 웹 성능 실수 중 하나입니다.

WebP가 JPEG보다 낫나요? 대부분의 웹 사용 사례에서 그렇습니다. WebP는 동등한 화질에서 25~35% 더 작은 파일을 제공하고, 투명도를 지원하며, 브라우저 지원이 이제 보편화됐습니다. 남은 제한은 WebP를 처리하지 못할 수 있는 오래된 CMS 플랫폼과 이메일 클라이언트에 관한 것입니다.

JPEG를 WebP로 변환하면 품질이 손실되나요? 이미 압축된 데이터를 다시 압축하므로 어느 정도의 세대 손실이 있습니다. 80% 이상 품질 설정에서 결과는 시각적으로 구별되지 않습니다. 최상의 결과를 위해서는 심하게 압축된 JPEG가 아닌 가장 높은 품질의 소스에서 변환하세요.

PNG를 JPEG 대신 사용해야 하는 경우는 언제인가요? 정확한 픽셀 정확도가 필요한 이미지(스크린샷, 로고, 픽셀 아트), 이미지의 선명한 텍스트, 또는 투명도 레이어의 경우입니다. 웹의 사진에는 PNG가 거의 항상 잘못된 선택입니다. 눈에 보이는 품질 이점 없이 동등한 JPEG보다 3~5배 더 클 것입니다.

웹 이미지에 어떤 품질 설정을 사용해야 하나요? 사진에는 75~85%가 표준 최적 구간입니다. 80%는 대부분의 상황에서 안전한 기본값입니다. 아티팩트가 보이면 높이고, 파일 크기가 중요하고 썸네일 작업 중이라면 낮추세요.