PNG·JPG·WebP 이미지 포맷 차이와 웹 배포 형식을 고르는 기준

사진과 그래픽에서 압축 결과가 다른 이유

사진은 미세한 색 변화와 질감이 많아 일부 정보를 줄이는 손실 압축이 눈에 덜 띌 수 있습니다. 반면 로고, 픽셀 아트, 화면 캡처의 글자 가장자리는 작은 번짐도 쉽게 보입니다. 파일명이나 원본 형식이 아니라 이미지 안의 패턴을 보고 압축 방식을 정해야 합니다.

투명 배경과 색상 정보를 확인하는 기준

JPG는 알파 투명을 보존하지 않으므로 투명 영역이 필요한 자산을 변환하면 배경색이 합성됩니다. PNG와 WebP는 투명을 다룰 수 있지만 변환 도구의 색상 프로필 처리에 따라 모습이 달라질 수 있습니다. 브랜드 색상은 실제 브라우저와 대상 화면에서 비교하세요.

WebP를 웹 기본 후보로 쓸 때의 배포 구조

현대적인 브라우저 지원만 보고 원본을 삭제하지 말고 콘텐츠 관리와 외부 공유 환경까지 살펴봅니다. 호환성이 필요한 경우 picture 요소와 source를 사용해 우선 형식과 대체 이미지를 제공할 수 있습니다. 응답 Content-Type과 캐시 키가 확장자에 맞는지도 확인해야 합니다.

용량보다 먼저 확인할 시각 품질

대표 이미지 몇 장을 같은 표시 크기로 변환하고 얼굴, 글자, 얇은 선, 그라데이션을 확대해서 봅니다. 원본보다 큰 픽셀 크기로 내보내는 것은 압축 효율을 낮추므로 실제 렌더링 크기와 고밀도 화면 배율에 맞춘 후보를 만드세요. 자동 점수만으로 최종 품질을 결정하지 않습니다.

단계별로 확인하는 방법

1. 이미지 성격 분류하기

   사진, 로고·아이콘, UI 캡처, 투명 자산으로 나누고 반드시 보존할 요소를 표시합니다.

2. 후보 형식으로 각각 변환하기

   같은 픽셀 크기에서 PNG, JPG, WebP 후보를 만들고 손실 압축 품질을 단계별로 조정합니다.

3. 화질과 파일 크기 비교하기

   실제 표시 크기와 확대 화면에서 글자·윤곽·색 번짐을 보고 허용 가능한 후보를 고릅니다.

4. 배포와 원본 보관 확인하기

   Content-Type, 대체 형식, 캐시 동작을 점검하고 재편집 가능한 원본은 별도로 보관합니다.

함께 보면 좋은 글

• WebP·AVIF가 열리지 않을 때 JPG로 바꾸는 방법
• SVG viewBox와 이미지 표시 영역 맞추기

WebP는 항상 JPG보다 용량이 작은가요?

항상 그렇지는 않습니다. 이미지 내용, 픽셀 크기, 품질 설정, 메타데이터에 따라 결과가 달라지므로 같은 조건으로 직접 비교해야 합니다.

투명 PNG를 JPG로 바꾸면 배경은 어떻게 되나요?

JPG에는 알파 채널이 없어 변환기가 지정한 색으로 투명 영역을 합성합니다. 필요한 배경색을 먼저 정하거나 투명을 지원하는 형식을 사용하세요.

화면 캡처는 어떤 형식이 좋은가요?

작은 글자와 선명한 경계가 많으면 PNG나 무손실 WebP를 먼저 비교하세요. 사진 영역이 크다면 손실 후보도 실제 화면에서 검수할 수 있습니다.

확장자만 .webp로 바꾸면 변환되나요?

아닙니다. 파일 내부 인코딩을 실제로 변환해야 하며 서버의 Content-Type도 해당 형식과 맞아야 합니다.