같은 JPEG가 브라우저마다 다른 이유

작은 JPEG 아이콘이 브라우저마다 미묘하게 다르게 보인 적이 있나요? 같은 파일이라도 Chrome에서는 선이 더 두껍고, Firefox에서는 원본에 가깝게 표현될 수 있어요.

단순한 렌더링 오류처럼 보이지만, 그 배경에는 작은 이미지를 빠르고 효율적으로 처리하기 위한 JPEG 디코딩 최적화가 숨어 있습니다.

브라우저마다 작은 JPEG가 달라 보이는 이유

15px 크기로 표시한 로고를 비교했을 때 Chrome에서는 형태가 조금 더 두껍게, Firefox에서는 상대적으로 얇고 원본에 가깝게 보였습니다. 이미지를 SVG로 교체하자 차이는 사라졌지만, 문제의 원인은 파일 자체가 아니었어요.

핵심은 Chrome이 작은 JPEG를 표시할 때 항상 원본 크기로 완전히 압축 해제하지 않는다는 점입니다. 목표 크기에 맞춰 일부 정보만 디코딩하는 과정에서 경계의 부드러운 변화나 미세한 그라데이션이 줄어들 수 있고, 그 결과 작은 로고의 선 굵기까지 달라 보이게 됩니다.

큰 이미지를 모두 압축 해제하는 것은 비효율적이에요

큰 JPEG를 아주 작게 표시한다면 원본의 모든 픽셀을 메모리에 펼칠 필요가 없습니다. 대부분의 정보는 축소 과정에서 사라지기 때문이에요.

예를 들어 2,000×2,000 JPEG를 20×20으로 표시한다고 가정해 보겠습니다. 전체 이미지를 비트맵으로 풀면 약 12MB가 필요하지만, 최종 20×20 이미지는 약 1.2KB에 불과해요.

브라우저가 원본을 모두 디코딩한 뒤 줄인다면 상당한 메모리와 연산이 낭비됩니다. 상품 목록이나 뉴스 피드처럼 썸네일이 많은 화면에서는 이러한 차이가 로딩 속도와 메모리 사용량에 직접적인 영향을 줄 수 있어요.

이미지 축소에서 사라지는 고주파 정보

이미지를 크게 축소할 때 없어지는 것은 주로 **고주파 정보(픽셀 사이에서 빠르게 변하는 세부 표현)**입니다. 나뭇잎, 거친 나무껍질, 가는 선처럼 작은 디테일이 대표적이에요.

나무 사진을 20×10 정도로 줄이면 무성한 잎은 초록색 덩어리로, 줄기는 갈색 막대처럼 보입니다. 즉, 축소 이미지에는 전체 윤곽과 평균적인 색처럼 변화가 적은 저주파 정보가 더 중요해져요.

물론 세부 정보가 완전히 사라지는 것은 아니며 일부는 주변 픽셀과 섞여 남습니다. 어떤 축소 알고리즘을 사용하는지에 따라 작은 이미지의 선명도와 형태가 달라지는 이유도 여기에 있어요.

JPEG의 8×8 블록과 DCT 구조

JPEG는 이미지를 8×8 픽셀 블록으로 나눈 뒤 DCT(이산 코사인 변환)를 사용해 공간 정보를 주파수 정보로 바꿉니다. 쉽게 말하면 각 블록에 어떤 패턴이 얼마나 포함됐는지를 계산하는 방식이에요.

가장 낮은 단계에는 변화가 없는 평평한 색상이 있고, 가장 높은 단계에는 값이 빠르게 바뀌는 체크무늬 같은 패턴이 있습니다. 각각의 패턴이 포함된 정도를 **계수(Coefficient)**라고 불러요.

JPEG는 이후 이 계수들을 효율적으로 저장하면서 일부 정보를 버리는 손실 압축을 수행합니다. 사진에서는 눈에 잘 띄지 않는 세부 정보를 줄여 용량을 절약할 수 있지만, 경계가 뚜렷한 아이콘에서는 손실이 상대적으로 잘 드러날 수 있어요.

Chrome의 partial IDCT scaling 동작

Chrome은 이미지 디코딩과 렌더링을 Skia에 맡기며, JPEG 처리에는 libjpeg-turbo를 사용합니다. 이 라이브러리는 **partial IDCT scaling(일부 역이산 코사인 변환 축소)**을 지원해요.

이미지를 1/8 크기로 줄일 때는 8×8 블록 하나를 결과 이미지의 한 픽셀로 표현할 수 있습니다. 따라서 고주파 계수를 모두 복원하지 않고, 축소 결과에 필요한 낮은 주파수 정보만 이용해 더 빠르게 디코딩할 수 있어요.

Chrome/Skia는 목표 크기에 가까운 8분의 1 단위 비율을 계산해 먼저 JPEG를 디코딩하고, 이후 일반적인 다운샘플링(픽셀 수를 줄이는 처리)으로 최종 크기를 맞춥니다. 15px처럼 매우 작게 렌더링하면 상수 성분 위주로 남아 가장자리의 부드러움이 사라지고 선이 두꺼워 보일 수 있습니다.

다만 최종적인 화질 저하는 partial IDCT만의 결과는 아닙니다. 원문에 추가된 정정처럼 후속 축소 알고리즘도 이미지 모양에 큰 영향을 주며, 실제 차이는 두 처리 과정이 결합된 결과로 봐야 해요.

작은 아이콘은 JPEG보다 SVG가 적합해요

이번 사례의 실무적인 결론은 명확합니다. 아이콘과 로고처럼 작고 경계가 중요한 그래픽에는 JPEG를 피하는 편이 안전해요.

• SVG: 해상도와 관계없이 선명해 로고, 아이콘, 심벌에 적합해요.
• PNG: 투명 배경이나 픽셀 기반 그래픽이 필요할 때 유용해요.
• JPEG: 사진처럼 색 변화가 복잡하고 자연스러운 이미지의 용량을 줄일 때 효과적이에요.

반응형 웹에서 하나의 큰 JPEG를 작은 아이콘처럼 축소해 사용하고 있다면 실제 Chrome, Firefox, 고해상도 디스플레이에서 비교해 보세요. 작은 그래픽의 형태가 중요하다면 파일 크기만 볼 것이 아니라 포맷과 브라우저 디코딩 방식까지 고려하는 것이 안정적인 선택입니다.