이미지 및 사진 · 이미지 변환기 및 압축기
canvas.toBlob이 브라우저 내에서 PNG를 WebP로 변환하는 방법
· 작동 원리
이미지 형식 캔버스 웹
브라우저 이미지 변환기는 디코더, 비트맵 및 인코더가 함께 연결되어 있으며 전체 체인이 브라우저에 내장되어 있습니다. 이 게시물은 디코드, 캔버스 및 toBlob을 통해 하나의 PNG를 거쳐 WebP 파일로 이동하며 그 과정에서 손실된 내용을 기록합니다.
서버가 없을 때 WebP는 어디에서 오는가 - 오프라인으로 작동하는 변환기 뒤에 있는 구체적인 질문
WebP는 서버측 변환 대기열에서 제공되지 않습니다. 귀하의 브라우저에는 이미 이미지 디코더, 그리기 가능한 픽셀 표면 및 인코더가 있습니다. ToolAcre 변환기가 이들을 연결합니다. 그렇기 때문에 사이트가 로드된 후 탭에서 PNG가 변환될 수 있습니다. "업로드 없음"은 소스 이미지 및 변환 출력을 의미하며 네트워크 활동이 전혀 없는 웹 사이트를 의미하지 않습니다.
1단계: 디코딩 — 브라우저가 PNG 바이트를 RGBA 비트맵으로 변환하는 방법 및 모든 형식이 동일한 그리드로 끝나는 이유
먼저 PNG가 이미지 비트맵으로 디코딩됩니다. PNG 압축, 팔레트 선택 및 색상 메타데이터에 따라 바이트가 픽셀이 되는 방식이 결정되지만 캔버스는 PNG 파일 청크가 아닌 디코딩된 래스터에서 작동합니다. 1600×900 스크린샷은 파일 자체가 훨씬 작더라도 1.44백만 픽셀 위치를 생성합니다. ToolAcre는 createImageBitmap을 사용하고 픽셀 예산을 시행합니다. 큰 디코딩 이미지는 업로드 문제이기 이전에 메모리 문제입니다.
2단계: 스테이징 영역으로서의 캔버스 — 일치하는 크기의 캔버스 또는 OffscreenCanvas에 비트맵 그리기
비트맵은 요청된 출력 크기로 캔버스 또는 OffscreenCanvas에 그려집니다. 해당 크기가 소스와 일치하고 자르기가 선택되지 않은 경우 drawImage는 인코딩을 위해 픽셀을 준비합니다. 크기가 변경되면 캔버스는 크기를 다시 샘플링하고 WebP 인코딩이 시작되기 전에 픽셀 값이 변경될 수 있습니다. 동일한 렌더링 루틴이 대화형 미리 보기와 작업자 경로를 제공하여 두 출력이 관련 없는 알고리즘을 따르지 않도록 합니다.
3단계: MIME 유형 및 품질이 포함된 toBlob — 인코더 선택 방법, 품질 번호 제어 항목, PNG에서 인코더가 무시되는 이유
일반 캔버스에서 toBlob(callback, "image/webp", quality)는 브라우저에 WebP를 인코딩하도록 요청하고 Blob으로 다시 호출합니다. OffscreenCanvas를 사용할 수 있는 경우 ToolAcre는 동일한 작업에 대해 ConvertToBlob({type,quality})를 사용합니다. 품질은 손실이 있는 인코더를 제어합니다. 특정 바이트 수를 약속하는 것은 아닙니다. PNG 내보내기는 무손실이며 품질 매개변수는 JPEG와 같은 압축 수준을 설정하지 않습니다. 인코더 가용성은 브라우저에 따라 다르므로 항상 실제 반환된 형식을 검사하세요.
파이프라인이 버리는 것 - 메타데이터, 색상 프로필 및 16비트 정밀도, 이것이 버그가 아닌 기술의 속성인 이유
디코딩된 래스터를 다시 인코딩하면 원본 PNG 컨테이너의 모든 사실이 보존될 수 없습니다. 텍스트 청크, 카메라 또는 편집기 메타데이터, 일부 색상 프로필 세부 정보 및 소스 비트 깊이는 캔버스 왕복에서 유지되지 않을 수 있습니다. 16비트 채널은 입력이 채널을 전달한다고 해서 16비트 WebP가 되는 것은 아닙니다. WebP는 인코더가 지원하는 경우 투명도를 유지할 수 있는 반면, JPEG 내보내기에는 투명한 영역을 채워야 합니다. 파일 크기만으로는 변환으로 미세한 선이나 색상이 보존되는지 여부를 알 수 없습니다.
작업된 예: WebP에 대한 1.8 MB PNG 스크린샷 — 파일을 따라 3단계를 따라가며 결과 읽기
텍스트, 그라데이션 및 투명한 모서리가 포함된 1.8 MB PNG 스크린샷을 고려해 보세요. 디코딩하고 크기를 변경하지 않고 WebP를 선택한 다음 Blob 크기 및 MIME 유형을 내보내고 원본과 비교합니다. 결과 크기는 예측할 수 없이 측정된 것입니다. 깨끗한 스크린샷은 잘 압축될 수 있지만 노이즈가 많은 콘텐츠는 압축되지 않을 수 있습니다. 더 작은 파일을 수용하기 전에 작은 문자 모양과 투명한 모서리를 확대합니다. 선명한 UI 텍스트가 흐릿해지면 WebP가 항상 더 좋다고 주장하기보다는 PNG를 유지하거나 인코더 품질을 조정하세요.
여기서 다루지 않는 내용 - 애니메이션 이미지, 브라우저가 디코딩할 수 없는 형식, API가 노출하지 않는 인코더 설정
이 파이프라인은 애니메이션 보존, 모든 장치의 HEIC 디코딩 또는 WebP 인코더의 서브샘플링 및 노력 매개변수에 대한 완전한 제어를 약속하지 않습니다. 또한 JPEG 소스를 PNG 또는 WebP로 저장하여 이미 손실된 세부 정보를 복구할 수 없습니다. 디코딩/재인코딩 주기가 반복되면 손실이 누적될 수 있습니다. 원본을 보관하고 운영 체제가 알고 있는 모든 형식이 여기에서 허용된다고 가정하는 대신 실제 도구 페이지에 나열된 지원되는 입력/출력 형식을 사용하십시오.
요점: 3단계, 업로드 없음 — 이미지 변환기 및 압축기가 장치에서 이 파이프라인을 실행하는 방법
메커니즘은 디코드 → 그리기 → 인코딩이며 브라우저 API를 통해 수행되며 이미지 업로드는 없습니다. ToolAcre는 대상 형식과 크기를 노출하므로 단순히 컨테이너만 변경하는지 아니면 픽셀 크기도 조정하는지 알 수 있습니다. 전체 배치를 처리하기 전에 이미지 변환기 및 압축기에서 대표적인 스크린샷 하나를 테스트한 다음 사람들이 볼 수 있는 크기로 다운로드된 결과를 검사하십시오.