이미지 및 사진 · 이미지 변환기 및 압축기
크로마 서브샘플링: JPEG이 빨간색 텍스트와 얇은 컬러 선을 흐리게 하는 이유
· 작동 방식
이미지 형식 JPEG 이미지 품질
JPEG 및 손실이 있는 WebP 색상을 밝기보다 낮은 해상도로 저장합니다. 이는 사진에서는 보이지 않으며 빨간색 텍스트에서는 분명합니다. 이 게시물에서는 4:2:0 서브샘플링, 인코더가 이를 수행하는 이유, 색상 가장자리가 중요한 경우 형식을 선택하는 방법에 대해 설명합니다.
빨간색 라벨이 흐릿하게 나오고 검은색 텍스트는 선명하게 나타납니다. 크로마 서브샘플링이 바로 나타나는 증상입니다.
빨간색 레이블은 스크린샷에서 선명한 벡터로 시작된 경우에도 인접한 어두운 텍스트보다 부드럽게 나타날 수 있습니다. 해당 증상은 조사해 볼 가치가 있지만 그 자체만으로는 정확한 크로마 서브샘플링 모드를 식별할 수 없습니다. ToolAcre는 소스를 디코딩하고 캔버스에 픽셀을 그리고 브라우저에 JPEG 또는 WebP 바이트를 요청합니다. 결과적인 가장자리는 증거이지만 인코더의 개인적인 결정은 증거가 아닙니다.
한 배경에 좁은 빨간색, 파란색, 회색 및 검은색 선이 포함된 제어된 이미지로 시작하세요. 크기를 변경하지 않고 각 대상을 한 번 내보내고 기본 픽셀 크기로 다운로드를 검사합니다. 손실이 있는 출력만 포화 경계를 번지게 하는 경우 형식 선택이 관련됩니다. 모든 출력이 소프트인 경우 먼저 크기 조정이 발생했는지 확인하십시오. 계획에서는 변경된 차원을 리샘플링으로 분류하기 때문입니다.
루마 및 크로마: 픽셀을 밝기와 색상으로 분할 — YCbCr 변환 및 인코더가 두 가지를 분리하는 이유
개요에서는 루마 및 채도 변환을 설명하지만 이 저장소에는 변환 코드가 표시되지 않습니다. 애플리케이션은 디코딩된 RGBA 픽셀을 브라우저 인코더에 제공하며 별도의 밝기나 색상 평면을 수신하지 않습니다. 따라서 브라우저의 계수 계산이나 내부 색상 표현을 드러내는 척하지 않고도 손실이 있는 출력으로 인해 눈에 보이는 세부 정보가 삭제될 수 있는 실질적인 구별을 문서화할 수 있습니다.
해당 경계는 결함 보고서 작성 방법을 변경합니다. 소스 MIME 유형, 대상 MIME 유형, 품질, 원본 및 출력 크기, 브라우저, 영향을 받은 가장자리를 표시하는 자르기를 기록합니다. 인코더 검사를 통해 입증되지 않는 한 특정 채널이 절반으로 줄었다고 명시하지 마십시오. 정확한 관찰을 재현할 수 있습니다. 숨겨진 구현 설정에 대한 차용된 설명으로 인해 관리자는 자신이 갖고 있지 않은 제어 기능을 갖게 될 수 있습니다.
색상 세부 정보 손실이 관찰되지만 이 저장소는 YCbCr 변환을 구현하거나 노출하지 않습니다.
익숙한 4:4:4, 4:2:2 및 4:2:0 레이블은 이 인터페이스의 컨트롤이 아닙니다. `encodeCanvas`는 MIME 유형만 전달하며, JPEG 또는 WebP의 경우 정규화된 품질 값을 전달합니다. 패널이나 변환 계획 모두 하위 샘플링 필드를 포함하지 않습니다. 해당 모드를 선택 가능한 것으로 제시하는 섹션은 배송된 제품과 모순되므로 해당 선택 사항이 없다는 것이 유용한 교훈입니다.
색상 가장자리 충실도가 요구사항인 경우 슬라이더에서 모드를 가정하는 대신 결과를 검사할 수 있는 경로를 선택하십시오. PNG는 사용 가능한 무손실 인코더이며 크기가 고정된 경우 알파를 유지합니다. JPEG 및 ToolAcre의 WebP 출력은 모든 품질에서 손실이 있는 것으로 명시적으로 설명됩니다. 이러한 소스 기반 구별은 지원되지 않는 지원 매트릭스를 게시하지 않고도 다이어그램에 대한 더 안전한 후보를 선택하기에 충분합니다.
브라우저 인코더는 4:4:4, 4:2:2 또는 4:2:0 선택기를 노출하지 않습니다.
사진은 질감, 조명 및 불규칙한 경계에 걸쳐 세부 사항을 분산시키므로 작은 색상 가장자리 변경은 1픽셀 인터페이스 규칙에서보다 덜 눈에 띌 수 있습니다. 이는 인간의 시각이 ToolAcre에 인코딩된 비율을 따른다는 주장이 아니라 검사 경험적 방법입니다. 애플리케이션은 인지적 유사성을 계산하거나 콘텐츠를 분류하거나 손상이 시청자에게 보이지 않을 것임을 인증하지 않습니다.
대표적인 자료를 사용하십시오. 초상화만으로는 컬러 활자로 가득한 디자인 시스템에 대한 테스트가 좋지 않으며, 합성 차트만으로는 사진 라이브러리에 대한 테스트가 좋지 않습니다. 변환기는 측정된 바이트 크기를 보고하고 첫 번째 결과에 대한 전후 미리 보기를 제공하지만 수락에는 실제 레이아웃에서 파일을 여는 것이 포함되어야 합니다. 미리보기 크기 조정을 통해 검토 중인 경계 손상을 정확하게 숨길 수 있습니다.
사진은 그래픽보다 색상 가장자리 손실을 더 잘 숨길 수 있습니다. 여기에는 비전 모델이 주장되지 않습니다.
그래픽은 하드 전환 시 의미를 집중시킵니다. 빨간색 경고 밑줄, 차트의 파란색 계열 또는 흰색의 컬러 텍스트입니다. 손실이 있는 인코딩 중에 인접한 샘플이 혼합되거나 둥글게 되면 위치가 변경되지 않더라도 가장자리가 번지는 것처럼 보일 수 있습니다. `drawImage`은 인코딩 전에 높은 스무딩으로 소스를 다시 그리기 때문에 크기를 조정하면 또 다른 메커니즘이 추가됩니다.
첫 번째 비교를 위해 치수를 일정하게 유지하여 이러한 메커니즘을 분리합니다. PNG이 선명하게 유지되고 JPEG 및 WebP가 부드러워지면 손실이 있는 인코딩 단계가 차별화 요소입니다. 다음으로 의도적인 크기 조정을 반복하여 리샘플링이 추가하는 내용을 알아보세요. 이 2단계 실험은 각 라운드에서 하나의 결정만 이동하므로 품질, 크기, 형식을 함께 변경하는 것보다 강력합니다.
브라우저 인코더를 통해 제어할 수 있는 것 — 품질 수치는 있지만 서브샘플링 스위치는 없고 손실이 있는 WebP이 항상 4:2:0인 이유
ToolAcre는 JPEG 및 WebP에 대해 0.01부터 1까지 고정된 품질 번호를 브라우저에 제공합니다. 색상 샘플링, 변환 테이블 또는 인코더 작업을 위한 스위치는 제공되지 않습니다. 손실이 있는 WebP가 항상 하위 샘플링 모드라는 이름의 통합 문서 주장은 검사된 구현 외부에 있으므로 이 문서에서는 의도적으로 이를 제품 보증으로 반복하지 않습니다.
숨겨진 인코더 선택에 대한 실제적인 대응은 문서화되지 않은 확인란을 찾는 것이 아닙니다. 실제 출력을 비교하고, 소스를 보존하고, 작은 파일보다 정확한 색상의 가장자리가 더 중요한 경우 PNG를 선택하세요. 프로덕션 파이프라인에 지정된 샘플링 모드가 필요한 경우 문서화된 API가 이를 노출하는 인코더를 사용하세요. 캔버스 편의 API는 결코 수락하지 않는 계약을 충족할 수 없습니다.
도구는 품질만 통과합니다. 인코더의 서브샘플링 정책은 숨겨진 상태로 유지됩니다.
얇은 빨간색과 파란색 대각선, 어두운 라벨, 부드러운 중성 그라데이션 및 하나의 투명한 모서리가 있는 1200x800 테스트 차트를 구축합니다. 크기를 조정하지 않고 PNG, JPEG 및 WebP로 내보냅니다. 저장소는 총 바이트 수나 정확한 아티팩트를 예측할 수 없으므로 약속된 비율을 테스트 계획에 삽입하는 대신 패널에 표시되는 측정 결과를 기록해 두십시오.
100%에서 색상 획을 어두운 컨트롤과 비교하고 투명한 모서리가 유지되었는지 확인합니다. PNG은 지원되는 무손실 인코더를 통해 알파를 유지해야 합니다. JPEG는 알파를 저장할 수 없기 때문에 선택한 매트를 받습니다. WebP은 알파를 유지하지만 여전히 손실로 표시됩니다. 이 세 가지 눈에 띄는 결과는 별도의 속성을 테스트하고 "더 작은"을 "더 나은"의 동의어로 취급하지 않습니다.
요약: 콘텐츠별로 형식을 선택하세요. 색상 가장자리가 선명해야 할 때 이미지 변환기 및 압축기를 사용하여 PNG과 동일한 이미지를 내보낼 수 있는 방법
형식 선택은 모든 다운스트림 애플리케이션이 색상을 렌더링하고, 이미지를 확대/축소하거나 표시를 위해 크기를 조정하는 방식을 보장할 수 없습니다. ToolAcre는 또한 출력에서 서브샘플링 메타데이터를 노출하거나 픽셀 차이 측정항목을 제공하지 않습니다. 이러한 누락은 최종 검사가 변환 패널 내부에만 있는 것이 아니라 대상 페이지, 문서 또는 응용 프로그램에 속한다는 것을 의미합니다.
포화된 텍스트와 좁은 색상 규칙의 경우 무손실 후보로 시작하고 직접 검사를 통해 손실이 있는 교체를 정당화합니다. 이미지 변환기 및 압축기를 사용하면 동일한 소스, 고정 크기, 세 가지 출력 형식 및 측정된 바이트를 하나의 장치에서 반복적으로 비교할 수 있습니다. 공유된 슬라이더 번호나 추정된 서브샘플링 모드가 아닌 결과에 따라 배송되는 제품이 결정되어야 합니다.