이미지 및 사진 · 브라우저 이미지 및 그림 편집기
무손실 JPEG 자르기 vs 브라우저 자르기: 재인코딩이 발생하는 이유
· 배경
이미지 편집 캔버스 브라우저 처리 중
명령줄 도구는 디코딩하지 않고 JPEG을 자를 수 있지만 8- 또는 16-픽셀 그리드에서만 가능합니다. 대신 브라우저 편집기가 디코딩하고 다시 인코딩합니다. 이 게시물에서는 두 가지 접근 방식이 모두 존재하는 이유와 다시 인코딩해야 할 때 품질 손실을 제한하는 방법을 설명합니다.
두 가지 자르기, 두 가지 파일 크기 — 동일한 직사각형을 두 가지 방법으로 자르면 다른 파일이 생성되며 그 이유는 JPEG 형식 자체에 있습니다.
두 개의 JPEG 자르기는 동일한 크기를 가질 수 있으며 여전히 다른 바이트 시퀀스를 생성할 수 있습니다. 인코더가 다른 테이블, 헤더, 양자화된 값 또는 메타데이터를 쓰는 동안 사각형은 동일할 수 있습니다. 주요 차이점은 선택한 경로입니다. 무손실 JPEG 유틸리티는 때때로 압축된 블록을 재배열할 수 있는 반면, 이 편집기는 이미지를 디코딩하고 픽셀을 래스터 레이어에 복사하며 canvas.toBlob에 새로운 파일을 인코딩하도록 요청합니다.
대체할 수 없는 스캔이 아닌 복제본을 사용하여 그 차이를 테스트하세요. 직사각형을 자르고 내보내고 치수, 보이는 가장자리 및 측정된 얼룩 크기를 비교합니다. JPEG 품질은 브라우저 인코더로 전달됩니다. PNG은 손실 품질 인수를 받지 않으며 WebP는 자체 브라우저 코덱을 따릅니다. 다운로드는 모서리가 제거된 원본 압축 스트림이 아닌 새로운 인코딩입니다.
JPEG 구성 방법 — 8×8 블록, 최소 코딩 단위 및 그리드가 절단에 중요한 이유
JPEG는 변환된 이미지 정보를 8x8 블록에 저장하며, 샘플링 및 파일 구성에 따라 더 큰 코딩 단위가 형성됩니다. 해당 그리드는 특수한 무손실 작업에 중요합니다. 컷의 가장자리가 파일에 이미 포함된 구조와 정렬될 때만 깨끗할 수 있기 때문입니다. 이는 브라우저 편집기가 블록 좌표를 노출하거나 최소 코딩 단위를 이해한다는 주장이 아니라 유용한 형식 컨텍스트입니다.
편집기의 자르기 도구는 디코딩된 픽셀 위에 있는 소스 직사각형을 생각합니다. 따라서 JPEG 블록 경계 사이에 있는 선택을 포함하여 임의 선택을 나타낼 수 있지만 소스는 서브샘플링 컨트롤, 블록 정렬 또는 바이트 수준 보존을 노출하지 않습니다. 그 결과 픽셀이 그려진 후 인코더로 돌아가는 비용으로 편리한 기하학적 자유를 얻을 수 있습니다.
JPEG 블록 구조는 배경 컨텍스트입니다. 이 편집기는 압축된 블록을 구문 분석하거나 자르지 않습니다.
jpegtran과 같은 도구는 다른 거래를 나타냅니다. 모든 블록을 일반 픽셀로 먼저 변환하지 않고도 JPEG 구조에서 작동할 수 있습니다. 자르기 가장자리가 관련 블록 그리드에 맞으면 도구는 나머지 압축 데이터를 그대로 유지하거나 전체 손실이 있는 재인코딩을 방지하면서 전체 영역을 삭제할 수 있습니다. 해당 작업 흐름은 이 편집기 외부에 있으므로 일반 브라우저 자르기 버튼으로 암시되어서는 안 됩니다.
무손실은 임의적이라는 의미가 아닙니다. 블록 정렬 도구는 자르기 직사각형을 제한할 수 있으며 메타데이터 처리에는 여전히 자체 검증이 필요합니다. 편집기는 다른 선택을 합니다. 즉, 사용자에게 디코딩된 이미지에 자유 사각형을 제공하고 해당 사각형을 새 레이어 캔버스에 복사한 다음 나중에 결과를 인코딩합니다. 바이트 보존 또는 블록 수준 보관 동작이 요구되는 경우 전용 JPEG 유틸리티를 사용하십시오.
무손실 JPEG 자르기는 이 구현 외부에 있으며 다른 도구가 필요합니다.
캔버스 편집은 JPEG 변환 계수가 아닌 픽셀용으로 제작되었습니다. 브라우저는 이미지를 HTML 이미지로 로드하고, 편집기는 선택한 소스 직사각형을 새 레이어 캔버스에 복사하며, 표시되는 래스터는 내보내기를 위해 구성됩니다. 해당 디자인은 모든 자르기 형상을 허용하며 동일한 작업 흐름으로 그림, 텍스트 및 기타 레이어를 처리할 수 있습니다. 이는 또한 원본 JPEG 블록이 더 이상 내보내기 재료가 아니라는 것을 의미합니다.
세션을 내보낼 때 canvas.toBlob은 브라우저에 새 PNG, JPEG 또는 WebP 파일을 요청합니다. JPEG 다운로드의 경우 이는 디코딩 및 편집된 래스터를 브라우저에서 다시 인코딩하는 것입니다. 소스는 최소 코딩 단위 정렬, 계수 복사, 하위 샘플링 선택 또는 메타데이터 및 프로필에 대한 보장을 노출하지 않습니다. 이 동작은 무손실 블록 자르기가 아닌 의도적인 래스터 편집입니다.
브라우저 자르기는 픽셀을 디코딩하고 직사각형을 복사한 후 합성물을 다시 인코딩합니다.
웹 이미지에는 단일 재인코딩이 허용될 수 있지만 비용은 소스, 자르기, 브라우저 인코더, 선택한 품질 및 콘텐츠에 따라 다릅니다. 미세한 텍스트, 하프톤 스캔, 선명한 라인 아트 및 반복되는 대비 가장자리는 일반 사진보다 더 빨리 변화를 드러낼 수 있습니다. 손실에 대해 고정된 비율을 할당하거나 파일 크기 감소를 보장하지 마십시오. 저장소는 그러한 약속을 제공하지 않습니다.
가능하면 워크플로를 의도적으로 한 번만 내보내도록 유지합니다. JPEG 다운로드를 다시 열고, 또 다른 래스터 편집을 하고, 다시 인코딩하면 아티팩트에 대한 기회가 늘어나는 반면, PNG을 내보내면 JPEG 바이트를 보존하기보다는 크기와 형식의 절충안이 변경될 수 있습니다. 범용 숫자를 신뢰하는 대신 유용한 배율로 실제 출력을 비교하고, 소스를 유지하고, 대상에 대한 형식과 품질을 선택하십시오.
재인코딩 결과는 인코더에 따라 다릅니다. 고정된 크기나 품질 비율은 약속되지 않습니다.
실제 비교를 위해 스캔한 페이지를 사용하십시오. 원본을 보존하고 크기와 파일 크기를 기록한 다음 편집기에서 원하는 직사각형을 표시하십시오. 선택한 품질의 JPEG로 자르기를 한 번 내보내고 작은 활자, 직선 테두리 및 종이 질감을 검사합니다. 출력 크기는 페이지가 잘렸는지 여부에 대한 응답입니다. 육안 검사를 통해 새 래스터가 여전히 유용한지 여부를 알 수 있습니다.
무손실 블록 인식 유틸리티는 별도의 실험입니다. 정렬된 가장자리만 허용하고 페이지 디코딩을 피할 수 있지만 브라우저 자르기는 사용자가 그린 직사각형을 허용합니다. 두 제품이 동일한 보증을 받은 것처럼 비교하지 마세요. 여기서 canvas.toBlob은 새 파일을 생성하며 소스는 바이트 ID, 메타데이터 보존, 프로필 보존 또는 고정 품질 비용을 약속하지 않습니다.
작업 확인: 바이트 보존을 기대하지 않고 크기와 표시되는 세부 정보를 비교합니다.
비교는 특히 JPEG 입력과 브라우저 래스터 자르기에 관한 것입니다. PNG은(는) 다른 압축 동작을 가지며 이 편집기에서 손실 품질 인수를 받지 않습니다. WebP는 자체 브라우저 코덱을 따릅니다. 회전, 메타데이터 재작성, ICC 처리 및 특수 무손실 JPEG 변환은 별도의 질문입니다. 한 형식으로 성공적으로 내보내기를 수행해도 다른 형식에 대해서는 응답하지 않습니다.
보관 소유권 주장에도 동일한 주의가 적용됩니다. 편집기는 최소 코딩 단위 정렬, 서브샘플링 컨트롤, 무손실 회전 작업 또는 포함된 메타데이터가 유지된다는 보장을 노출하지 않습니다. 소스가 구조적으로 그대로 유지되어야 하는 경우 이를 유지하고 형식 인식 도구를 사용하십시오. 목표가 임의의 직사각형이 포함된 편리한 새 그림이라면 브라우저 작업 흐름이 더 직접적으로 적합합니다.
요점: 어떤 거래를 하고 있는지 파악하세요. 브라우저 이미지 및 그림 편집기가 기기에서 직사각형을 자르는 방법과 무손실 도구가 보관 작업에 더 적합한 경우
거래는 간단합니다. 이 편집기는 래스터 자르기를 수행한 후 새로운 브라우저 인코딩을 수행합니다. 이미지를 디코딩하고, 선택한 사각형을 레이어 캔버스에 복사하고, 표시되는 결과를 합성하고, 요청된 형식에 대해 canvas.toBlob을 사용합니다. 이는 장치에서 임의의 자르기를 제공하지만 원래의 압축된 바이트 스트림을 유지하거나 무손실 JPEG 의미를 주장하지 않습니다.
공유, 검토 또는 추가 일반 편집을 위한 실용적인 이미지인 경우에 사용하세요. 보관 충실도, 블록 보존 또는 메타데이터 보장이 중요한 경우 소스를 유지하고 형식 인식 무손실 유틸리티를 선택하세요. 최종 치수를 측정하고 눈에 보이는 세부 사항을 검사합니다. 이러한 검사는 모든 브라우저 인코더가 동일한 바이트 수준 거래를 하는 것처럼 가장하지 않고 받은 파일을 설명합니다.