웹 브라우저 크롬에서 아주 작게 표시된 JPEG 이미지가 파이어폭스에서보다 더 두껍고 원본에 덜 충실하게 보이는 현상이 발생합니다. 이는 크롬이 이미지 디코딩 과정에서 메모리 효율성을 위해 적용하는 최적화 방식, 즉 '부분 IDCT 스케일링(partial IDCT scaling)'과 이후 적용되는 축소(downsampling) 알고리듬의 상호작용 때문입니다. 특히 15픽셀(px) 같은 작은 크기의 로고에서 이러한 차이가 두드러지게 나타나며, SVG 형식으로 이미지를 교체하면 이러한 시각적 차이가 사라지는 것을 확인할 수 있습니다.
JPEG 압축은 이미지를 8x8 픽셀 블록으로 나누고 이산 코사인 변환(DCT)을 적용하여 주파수 성분별 계수로 저장합니다. 크롬은 이미지 디코딩 및 렌더링을 담당하는 Skia 엔진과 libjpeg-turbo 라이브러리를 사용하는데, 이들은 목표 크기에 가장 가까운 분모가 8인 비율로 저주파 데이터만 디코딩하는 부분 IDCT 스케일링을 구현합니다. 예를 들어, 1/8 크기로 이미지를 줄여야 할 경우, 8x8 블록을 하나의 픽셀로 나타내면서 상수 성분(가장 낮은 주파수)만 유지하고 고주파 정보를 건너뛰어 메모리 사용량과 압축 해제 속도를 최적화합니다. 이 과정에서 경계의 부드러움이나 미묘한 그라데이션 같은 고주파 정보가 손실되어 이미지가 두껍거나 뭉개져 보일 수 있습니다. 파이어폭스 또한 전체 이미지를 버퍼에 디코딩하지 않고 스트리밍 방식으로 디코딩하며 즉시 축소하는 방식을 사용하지만, 8x8 블록을 부분 디코딩하지는 않는 것으로 알려져 있습니다.
이러한 현상은 JPEG 형식이 사진과 같이 사람이 인지하는 방식에 맞춰 설계되었기 때문에 발생합니다. 아이콘처럼 작은 크기에서 선명한 경계와 미세한 그라데이션이 중요한 경우에는 JPEG보다 SVG(Scalable Vector Graphics)와 같은 벡터 기반 형식이 훨씬 적합합니다. SVG는 해상도에 독립적이어서 어떤 크기로든 선명하게 렌더링될 수 있기 때문입니다. 웹 개발자들은 작은 아이콘이나 로고에 JPEG 대신 SVG나 PNG를 사용함으로써 브라우저 간 렌더링 품질 차이를 줄이고 사용자에게 일관된 시각적 경험을 제공할 수 있습니다. 또한, CSS의 `image-rendering` 속성을 활용하여 브라우저의 이미지 축소 알고리듬을 제어하는 것도 한 가지 방법이 될 수 있습니다.