PNG vs JPEG vs WebP vs AVIF: 이미지 형식을 의도적으로 고르기

무손실 형식은 모든 픽셀을 정확히 보관하고, 손실 형식은 눈이 거의 알아채지 못하는 디테일을 버리는 대가로 훨씬 작은 파일을 얻습니다. 이 선택은 품질 취향의 문제가 아니라 파일의 용도 문제입니다. 다시 편집할 마스터인가, 한 번 납품하는 산출물인가.

브라우저 파이프라인에 대한 솔직한 주의점 하나: Canvas 인코더에는 무손실 WebP 스위치가 없으므로, 로컬 도구에서 “무손실 출력”은 실질적으로 PNG를 뜻합니다. 가짜 무손실 단계를 제공하는 워크스페이스는 자신의 정직함에 대해 무언가를 말해주고 있는 것입니다.

• 무손실은 전부 보존무손실(PNG, 그리고 WebP와 AVIF의 무손실 모드): 디코딩하면 원본 픽셀이 비트 단위로 재현되므로, 아무리 자주 열고 다시 저장해도 열화되지 않습니다.
• 손실은 디테일을 소비손실(JPEG, 그리고 WebP와 AVIF의 손실 모드): 인코더가 인간의 시각을 모델링해 알아차리지 못할 것이라 예측한 정보를 버립니다. 그 절감은 영구적이며, 나중에 벗겨낼 수 있는 층이 아닙니다.
• 마스터와 납품물실무적인 구분: 마스터는 무손실로 보관하고, 납품물은 손실로내며, 손실보내기를 다음 편집의 소스로 쓰지 마세요.

압축 형식은 각자 전문 분야가 있습니다. JPEG의 코사인 변환은 부드러운 사진 그러데이션을 좋아하고 날카로운 가장자리를 망가뜨리며, PNG의 deflate는 평탄한 색 면적과 정확한 선을 좋아하고 노이즈 많은 사진을 부풀립니다. WebP와 AVIF는 비디오 코덱의 기법을 빌려 둘 다 그럭저럭 잘 처리합니다.

잘못된 짝은 양방향으로 비쌉니다. 사진 PNG는 동급 JPEG보다 다섯에서 열 배 무거울 수 있고, JPEG로 저장한 로고는 품질을 아무리 올려도 완전히 사라지지 않는 후광이 생깁니다.

• 사진사진과 그러데이션: 적당한 품질의 JPEG는 PNG보다 극적으로 작고, 납품 크기에서는 손실이 보이지 않습니다. 바로 손실 형식이 만들어진 작업입니다.
• 플랫 그래픽로고, 아이콘, 인터페이스 스크린샷, 선화: 평탄한 영역과 선명한 가장자리는 PNG에서 완벽하게 압축되고, JPEG는 만나는 모든 경계 주변에 눈에 보이는 링잉을 남깁니다.
• 혼합 콘텐츠사진이 들어간 스크린샷 같은 혼합 콘텐츠: 둘 다 시험하세요. WebP는 종종 두 옛 형식 사이에 자리하지만, 결정하는 것은 라벨이 아니라 픽셀 구성입니다.

레이아웃에서 배경이 비쳐야 한다면 형식은 알파 채널을 가져야 합니다. PNG, WebP, AVIF는 모두 투명도를 지원하고 JPEG는 지원하지 않습니다. 단색 배경 위로 평탄화하는 것은 선택이 아니라 필수입니다.

• 알파는 픽셀 단위알파 채널은 색과 함께 픽셀별 불투명도를 저장하며, 덕분에 로고가 흰 사각형 위가 아니라 어떤 배경 위에도 깔끔하게 놓입니다.
• JPEG는 평탄화투명 PNG를 JPEG로 변환하면 알파가 단색 매트로 대체됩니다. 그 매트 색은 픽셀에 영구히 남으므로 의도적으로 선택하세요.
• 매트 색 선택이미지 형식 변환기는 이 평탄화를 명시하고 사용할 배경색을 묻습니다. 나중에 레이아웃에서 발견되는 것이 아니라 트레이드오프가 처음부터 명확합니다.

WebP는 현재의 모든 브라우저에서 디코딩되고, AVIF는 현재의 Chrome, Firefox, Safari에서 디코딩되지만 오래된 브라우저나 모든 하류 도구에서는 되지 않습니다. 지원은 형식이 아니라 도착지의 속성입니다. 납품 세트 전체를 확정하기 전에 실제 파이프라인을 확인하세요.

웹 납품의 표준 답은 폴백 체인입니다. picture 요소로 AVIF나 WebP에 JPEG 또는 PNG 폴백을 곁들이면, 최신 브라우저는 절감을 챙기고 나머지도 그대로 렌더링됩니다.

• 도착지가 결정인코딩 지원은 디코딩에 뒤처집니다. WebP를 표시하면서도 Canvas로 인코딩하지 못하는 브라우저가 있으므로, 변환기는 능력을 가정하지 말고 탐지해야 합니다.
• 인코딩은 탐지 필요이미지 형식 변환기는 정확히 그 탐지를 미리 수행하고, 인코딩이 없는 환경에서는 WebP보내기를 비활성화합니다. .webp라는 이름의 PNG를 몰래 건네지 않습니다.
• 정직한 AVIF 처리AVIF 입력은 브라우저가 실제로 디코딩할 수 있을 때만 받습니다. 못 하면 워크스페이스가 그 사실을 알리고, 파일 시그니처를 믿는 대신 먼저 PNG나 JPEG로내라고 요청합니다.

손실 저장은 이미 근사된 이미지를 다시 양자화하므로 아티팩트가 쌓입니다. 같은 사진의 세 번째 JPEG 저장은 같은 품질 설정에서도 첫 번째보다 눈에 띄게 나쁩니다. 변환은 파이프라인 끝에서, 가진 것 중 최상의 소스로, 한 번만 하세요.

누적 규칙은 작업 순서도 정합니다. 리샘플링과 재인코딩은 각각 독립된 손실 사건이므로, 가장 저렴한 파이프라인은 손실 단계가 가장 적은 것입니다.

• 한 번만 변환무손실 마스터에서 편집하고 손실 사본보내기를 마지막 단계로 두세요. 중간의 손실 저장은 하나하나가 되돌릴 수 없는 세대의 손상입니다.
• 부수 효과Canvas 재인코딩은 ICC 색 프로필, EXIF 메타데이터, 모든 애니메이션도 버립니다. GIF는 첫 프레임으로 들어오며, 워크스페이스가 파일 옆에 그 사실을 명시합니다.
• 원본 보관변환 후에는 원본을 보관하세요. 변환된 파일은 납품 산출물이지 마스터가 아니며, 되돌리는 변환으로 소비된 디테일이 돌아오는 일은 없습니다.

바이트가 말하기 전까지 형식 조언은 가설일 뿐입니다. 이미지 형식 변환기는 생성된 그대로의 전후 바이트 크기를 보고하고, JPEG와 WebP 품질은 0.50에서 0.95 사이로 조절됩니다(기본값 0.85). 트레이드오프가 격언이 아니라 화면 위의 숫자가 됩니다.

• 실제 파일로 변환샘플이 아니라 실제 파일로 변환하세요. 바이트 절감은 실제 내용에 따라 달라지며, 보고서는 두 크기를 나란히 보여줍니다.
• 픽셀이 레버그래도 바이트가 예산을 넘으면 다음 레버는 픽셀입니다. 너비와 높이를 절반으로 줄이면 픽셀의 약 4분의 3이 사라져, 어떤 형식 변경보다 큰 절감이 되는 경우가 흔합니다.
• 알려진 한계두 도구 모두 최대 12 MiB, 한 변 8,192픽셀까지의 파일을 받으며, 크기 조절 도구는 종횡비를 고정해 한 치수가 다른 치수를 따르게 할 수 있습니다.