브라우저는 어떻게 이미지를 보여주는가 — 파일에서 화면까지의 여정

웹 페이지에서 이미지를 클릭하거나 사진을 업로드하면 순식간에 화면에 표시됩니다. 이 과정이 실제로 어떻게 이루어지는지 알고 나면 웹이 다르게 보입니다.

---

1단계 — URL 요청: 이미지 파일의 위치를 찾습니다

HTML 코드에 이런 태그가 있다고 합시다.

<img src="https://example.com/photo.jpg">

브라우저는 이 태그를 발견하면 example.com 서버에 photo.jpg 파일을 달라고 요청합니다. 이것이 HTTP 요청입니다.

서버는 파일을 찾아서 바이트 데이터로 전송합니다. 네트워크를 통해 이 데이터가 브라우저에 도착합니다.

---

2단계 — 디코딩: 압축을 풉니다

서버에서 받은 데이터는 JPG, PNG, WEBP 같은 압축 형식입니다. 브라우저는 이 압축을 풀어야 합니다.

JPG 디코딩: 압축된 주파수 데이터를 역변환해서 픽셀 색상값으로 변환합니다.

PNG 디코딩: 무손실로 압축된 데이터를 원본 픽셀값으로 복원합니다.

디코딩이 완료되면 이미지는 픽셀 배열 형태가 됩니다. 각 픽셀은 RGBA(빨강, 초록, 파랑, 투명도) 4바이트로 표현됩니다. 1920×1080 이미지라면 약 8MB의 픽셀 데이터가 메모리에 올라갑니다.

---

3단계 — 레이아웃: 화면의 어디에 그릴지 계산합니다

이미지를 어떤 크기로, 어디에 배치할지 계산합니다. CSS에서 width, height, position 같은 속성이 이 단계에 영향을 줍니다.

이미지 파일의 원본 크기가 1000×800이더라도 CSS에서 width: 300px로 지정하면 300×240 크기로 그려야 합니다. 스케일링이 필요합니다.

---

4단계 — 페인팅: GPU에 전달해서 화면에 그립니다

최종적으로 이미지 데이터를 GPU(그래픽 처리 장치)에 전달합니다. GPU는 픽셀 데이터를 화면에 그립니다.

현대 브라우저는 이미지를 GPU 메모리에 텍스처로 올려두고, 화면에 그릴 때마다 GPU가 직접 처리합니다. 스크롤하거나 애니메이션이 있어도 빠른 이유입니다.

---

이미지 로딩이 느린 이유

파일 크기가 크면: 네트워크 전송 시간이 깁니다. 10MB 이미지는 느린 인터넷에서 수십 초가 걸릴 수 있습니다.

디코딩 비용: JPG 디코딩은 비교적 빠르지만, 고해상도 이미지를 많이 디코딩하면 CPU 사용량이 높아집니다.

메모리 부족: 디코딩된 픽셀 데이터는 압축 파일보다 훨씬 큽니다. 많은 이미지를 한 페이지에 올리면 메모리 부족으로 느려집니다.

---

지연 로딩(Lazy Loading)

이미지를 화면에 보이는 시점에만 로드하는 기술입니다. 스크롤하지 않으면 보이지 않는 이미지는 미리 로드하지 않습니다. HTML에서 이렇게 설정합니다.

<img src="photo.jpg" loading="lazy">

---

브라우저에서 이미지를 처리하는 기술들

최근에는 브라우저 자체적으로 이미지를 처리할 수 있는 API가 많아졌습니다.

Canvas API: 이미지를 픽셀 단위로 처리할 수 있습니다. 밝기 조절, 필터 적용, 크기 변경 같은 작업이 가능합니다. 서버 없이 브라우저에서 이미지를 편집할 수 있는 이유입니다.

ImageBitmap API: 이미지를 비동기로 디코딩해서 UI가 멈추지 않게 합니다.

WebP, AVIF 지원: 최신 브라우저는 새로운 이미지 포맷을 직접 디코딩합니다.

---

정리

브라우저가 이미지를 보여주는 과정은 요청, 다운로드, 디코딩, 레이아웃 계산, GPU 렌더링으로 이루어집니다. 이 과정이 0.1초 이내에 일어나기도 하지만, 파일이 크거나 이미지가 많으면 지연이 생깁니다. 이미지 최적화가 웹 성능에 중요한 이유가 여기 있습니다.