사진 한 장의 무게

1. 페이지를 무겁게 만드는 건 대개 사진입니다

사이트가 느리다는 이야기를 듣고 들여다보면 원인이 의외로 단순한 경우가 많습니다. 메인 사진이 카메라에서 바로 꺼낸 몇 메가바이트짜리 원본 그대로 올라가 있는 식이죠. 화면에는 가로 1,000픽셀 남짓으로 보이는데 브라우저는 그보다 몇 배 큰 파일을 통째로 내려받고 있는 겁니다. HTTP Archive의 웹 연감(Web Almanac) 2024년판을 보면, 모바일 페이지의 68%에서 첫 화면에 가장 크게 그려지는 요소인 LCP 요소가 이미지였습니다. 구글은 이 LCP가 2.5초 안에 끝나야 좋은 페이지로 봅니다. 이 기준이 사진 한 장에서 갈리는 일이 그만큼 흔하다는 뜻입니다. 코드를 아무리 다듬어도 사진이 무거우면 소용없습니다.

2. 같은 사진도 형식만 바꾸면 가벼워집니다

가장 먼저 손댈 곳은 파일 형식입니다. 오랫동안 웹 사진은 JPEG, 투명한 이미지는 PNG가 기본이었지만 지금은 WebP와 AVIF라는 선택지가 있습니다. 둘 다 비슷한 화질을 더 작은 용량에 담는 형식이고, AVIF는 2020년 크롬 85를 시작으로 파이어폭스와 사파리를 거쳐 2024년 1월 엣지 121까지 지원하면서 주요 브라우저에서 모두 쓸 수 있게 됐습니다. 구글의 Squoosh 같은 도구에 사진을 넣고 형식을 바꿔 보면, 눈으로는 차이를 찾기 어려운데 용량은 확 줄어드는 게 보입니다. 다만 AVIF는 압축에 시간이 더 걸립니다. 같은 연감에서 웹 이미지 가운데 AVIF는 아직 1% 정도였으니 줄일 여지가 많이 남아 있습니다.

3. 화면에 맞는 크기를, 필요한 순간에

형식만큼 중요한 게 크기입니다. 스마트폰에 데스크톱용 2,400픽셀 사진을 보낼 이유는 없으니까요. img 태그의 srcset에 크기별 사진을 적어 두고 sizes로 그 사진이 화면에서 얼마나 넓게 보일지 알려 주면, 브라우저가 기기에 맞는 파일을 알아서 고릅니다. 화면 아래쪽 사진은 loading="lazy" 한 줄로 스크롤이 가까워질 때까지 미뤄 둘 수 있고요. 흔한 실수는 첫 화면의 큰 대표 사진까지 지연 로딩을 걸어 버리는 겁니다. 웹 연감은 모바일 LCP 이미지의 9.5%가 지연 로딩된다며 페이지를 크게 느리게 만드는 안티패턴이라고 짚었습니다. 대표 사진은 오히려 fetchpriority="high"로 먼저 불러오게 해야 합니다.

4. 세컨드펭귄의 시선: 올리는 순간 알아서 가벼워지게 만듭니다

우리는 이 과정을 사람 손에 맡기지 않으려고 합니다. 운영 담당자에게 매번 WebP로 바꿔서 올려 달라고 부탁하는 건 오래가지 못하거든요. 그래서 Strapi 같은 헤드리스 CMS에는 원본을 그대로 올리게 하고, 화면을 그리는 Next.js의 Image 컴포넌트가 기기에 맞춰 크기를 줄이고 형식을 바꾸고 지연 로딩까지 처리하게 둡니다. 기본은 WebP이고, 설정 한 줄이면 AVIF를 먼저 시도하게 할 수도 있죠. 방문자가 많으면 이 변환을 CDN에 맡기기도 합니다. 첫 화면 대표 사진만은 따로 표시해 먼저 불러오게 합니다.