이미지 및 사진 · 소셜 이미지 크기 조정 도구
리샘플링 필터 설명: Nearest, Bilinear, Bicubic 및 Lanczos
· 배경
이미지 크기 조정 리샘플링 캔버스
크기를 조정할 때마다 새 픽셀이 이전 픽셀에서 어떤 색상이어야 하는지 결정해야 합니다. 가장 가까운 이웃 복사본, 쌍선형 평균 4, 쌍입방 무게 16, Lanczos는 창 싱크를 사용합니다. 이 게시물에서는 각각의 흐림, 링잉, 앨리어싱 사이의 균형과 브라우저가 제공하는 기능에 대해 설명합니다.
동일한 사진, 세 가지 도구, 세 가지 결과 - 선명도와 반짝임이 다른 크기 조정된 이미지의 구체적인 퍼즐
두 가지 크기 조정 도구를 사용하면 치수가 동일하고 가장자리가 눈에 띄게 다른 파일을 생성할 수 있습니다. 샘플링은 다르지만 형상은 일치할 수 있습니다. 각 출력 픽셀에는 소스 정보에서 파생된 색상이 필요하며 해당 파생은 선명도, 부드러움 또는 앨리어싱에 대한 저항을 선호할 수 있습니다. 파일 크기만으로는 방법을 식별할 수 없습니다.
Social Image Resizer는 의도적으로 더 좁은 약속을 합니다. drawImage 이전에는 이미지 스무딩을 활성화하고 높은 스무딩 품질을 요구합니다. Canvas 2D API는 브라우저가 선택한 커널 이름을 앱에 알려주지 않으므로 제품은 출력에 가장 가까운, 쌍선형, 쌍입방체 또는 Lanczos를 소스 수준의 확실성으로 표시할 수 없습니다.
샘플링 문제 - 필터링 없이 이미지를 축소하면 모아레와 들쭉날쭉한 가장자리가 생성되는 이유
축소하면 샘플이 제거됩니다. 고주파수 줄무늬, 머리카락 또는 메시를 적절한 필터링 없이 매핑하면 들쭉날쭉하거나 희미해지거나 잘못된 패턴이 형성될 수 있습니다. 확대하면 기존 샘플 위치 사이에 새로운 샘플 위치가 생성됩니다. 양방향에서 리샘플러는 숨겨진 세부 정보를 드러내는 대신 유한 소스의 출력을 추정합니다.
유용한 테스트 이미지는 대각선, 1픽셀 선, 반복되는 격자 및 부드러운 그라데이션을 결합합니다. 여러 크기로 내보내고 일대일 픽셀과 일반 디스플레이 크기를 검사합니다. 관찰 결과는 테스트된 브라우저가 내부 구현을 리버스 엔지니어링하는 척하지 않고 어떻게 어려운 콘텐츠를 처리하는지 보여줍니다.
Nearest 및 Bilinear는 유용한 개념이지만 ToolAcre는 이를 선택 항목으로 표시하지 않습니다.
가장 가까운 이웃은 개념적으로 가장 가까운 소스 샘플을 선택하고 하드 픽셀 블록을 보존하는 경향이 있습니다. 이중선형 보간은 개념적으로 근처 샘플을 혼합하고 일반적으로 전환을 부드럽게 합니다. 이러한 설명은 눈에 보이는 극단을 설명하는 데 도움이 되지만 ToolAcre는 두 가지 방법 중 하나로 표시된 스위치를 제공하지 않으며 해당 테스트에서는 엔진 커널을 식별하지 않습니다.
하나의 가장자리에서만 명명된 필터를 추론하지 마십시오. 브라우저 구현은 규모에 따라 동작을 최적화하거나 변경할 수 있습니다. 신뢰할 수 있는 유일한 제품 설명은 스무딩이 활성화되고 품질 속성이 높게 설정되어 있다는 것입니다. 더 깊은 분류에는 이 모듈 외부의 브라우저별 증거가 필요합니다.
이 캔버스 구현에서는 쌍입방 동작이 보장되지 않습니다.
쌍입방 방법은 가장자리 오버슈트에 대해 부드러움을 교환하는 변형과 함께 더 넓은 이웃 및 입방 가중치를 사용합니다. 이는 전용 이미지 애플리케이션을 비교하는 데 유용한 배경입니다. render.js는 삼차 계수를 선택하지도 않고 쌍삼차 라이브러리를 가져오지도 않기 때문에 이는 캔버스 2D 출력에 대한 계약이 아닙니다.
프로덕션 작업 흐름에 특정 입방 커널이 필요한 경우 이름을 지정하고 테스트하는 도구를 사용하세요. Social Image Resizer는 기본 브라우저 가용성과 로컬 작업을 우선시합니다. 그 결과는 기록된 엔진 및 버전에 따라 브라우저에서 리샘플링된 출력으로 판단되어야 하며, 하나의 변형에 대한 통제된 과학적 구현으로 표현되지 않습니다.
Lanczos는 도구 계약 외부에 있으며 기본값으로 청구되지 않습니다.
Lanczos는 창 모드 동기화 아이디어를 사용하여 앨리어싱을 제어하면서 세부 사항을 보존하고 하드 가장자리는 일부 설정에서 링잉을 표시할 수 있습니다. 통합 문서에는 이것이 많은 사진 도구의 기본값이라고 나와 있지만 그 보급률은 여기에서 확인할 수 없습니다. 더 중요한 것은 ToolAcre의 어떤 것도 Lanczos의 이름을 요청하지 않는다는 것입니다.
후광을 진단할 때 이러한 누락이 중요합니다. 하나를 본다고 해서 Lanczos 커널을 증명하는 것은 아니며, 하나를 보지 않는다고 해서 다른 알고리즘을 증명하는 것도 아닙니다. 소스와 출력, 문서 규모 및 브라우저를 비교하고 애플리케이션이 관찰할 수 없는 원인을 지정하지 마십시오. 시각적 증상은 숨겨진 코드를 인증하지 않고도 테스트를 안내할 수 있습니다.
브라우저가 제공하는 것 — 명명된 필터 대신 부드러운 토글 및 품질 힌트, 브라우저와 버전에 따라 출력이 다른 이유
브라우저 캔버스는 필터 카탈로그 대신 imageSmoothingEnabled 및 imageSmoothingQuality를 노출합니다. ToolAcre는 크기 조정된 소스를 그리기 직전에 첫 번째 참과 두 번째 최고를 설정합니다. 엔진은 힌트를 다르게 해석하거나 버전 간에 발전할 수 있습니다. 이는 동일한 JavaScript가 브라우저 간 작은 차이를 낳을 수 있는 이유입니다.
샘플링이 아닌 경우에도 형상은 명시적으로 유지됩니다. ComputeFrame은 정확한 축척과 그리기 치수를 반환합니다. drawRect는 결과의 중심을 맞추고 오프셋합니다. 출력 캔버스에는 정수 대상 차원이 있습니다. 브라우저 간의 차이점을 검토할 때 알려진 사실과 숨겨진 샘플링 선택을 분리하세요.
여기서 다루지 않는 내용 — 크기 조정 후 선명화, 내용 인식 또는 기계 학습 스케일러
크기 조정 후 선명하게 하기, 내용 인식 방법 및 기계 학습 재구성은 존재하지 않습니다. 언샵 마스크 제어, 가장자리 감지기 또는 생성된 세부 모델이 없습니다. 출력 품질 제어는 크기 조정 후 선명화 단계가 아니라 손실이 있는 형식의 인코딩에 영향을 줍니다. 이를 별개의 작업으로 취급하십시오.
브라우저 기본 워크플로는 간단하고 사용 가능하기 때문에 여전히 유용합니다. 일상적인 소셜 크롭의 경우 실제 결과를 검사합니다. 과학적 이미징, 타이포그래피 마스터 또는 픽셀 아트 보존을 위해 해당 콘텐츠에 적합한 명시적 필터 제어 및 검증 기능이 있는 도구를 선택하세요.
요점: 필터가 모양을 설명합니다. Social Image Resizer는 브라우저 자체 리샘플링을 사용하므로 이러한 용어를 알면 무엇을 기대하고 무엇을 확인할지 알 수 있습니다.
리샘플링은 크기가 전체 이야기가 아닌 이유를 설명하지만 증거는 도구와 일치해야 합니다. Social Image Resizer는 매끄러운 고품질 캔버스 그리기를 요청하고 정확한 커널을 브라우저에 남겨둡니다. 이는 코드가 선택하지 않는 필터를 마케팅하지 않고도 유용한 작물을 생산하기에 충분합니다.
어려운 테스트 이미지를 유지하고, 브라우저 세부 정보를 기록하고, 품질이 중요한 경우 내보내기를 비교합니다. 용어는 당신이 보는 것을 설명하는 데 도움이 됩니다. 구현을 통해 정직하게 주장할 수 있는 것이 무엇인지 알려줍니다. 명명된 알고리즘은 코드나 신뢰할 수 있는 브라우저 증거가 이를 입증하는 곳에만 속합니다.