01DEFINITION
한 줄로 말하면
사진을 원본 크기 그대로 올리면 화면에는 작게 보여도 전송량은 그대로입니다. 요즘 형식으로 바꾸고 실제 표시 크기에 맞춰 줄이는 것만으로 절반 이하가 되는 경우가 흔하고, 화면 아래쪽 이미지는 나중에 불러오게 미룰 수 있습니다.
02RISK
없으면 무슨 일이 생기나
이 낭비는 화면에 드러나지 않습니다. 브라우저가 알아서 줄여 그리기 때문에 보기에는 멀쩡하고, 사무실 유선망에서는 속도 차이도 잘 안 느껴집니다. 그래서 몇 년씩 그대로 남아 있습니다. 비용은 이동 중에 접속하는 방문자가 대신 냅니다.
검색 순위에도 걸립니다. 구글은 실사용자 환경에서 수집한 로딩 지표를 순위 신호로 씁니다. 첫 화면의 큰 이미지가 늦게 뜨면 그 지표가 그대로 나빠집니다.
화면 아래에 있는 이미지까지 처음부터 다 받는 구성이 흔합니다. 방문자가 절반도 안 내려가고 떠나면 받은 것의 절반은 아무도 보지 않은 채 데이터만 쓴 셈입니다.
가로·세로를 지정하지 않은 이미지는 로딩 도중 레이아웃을 밀어 올립니다. 읽던 문장이 갑자기 아래로 내려가거나, 누르려던 버튼이 순간 어긋나 다른 것이 눌립니다. 이 밀림은 검색엔진이 보는 안정성 지표에도 그대로 반영됩니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
표시 크기와 원본 크기를 나란히 본다
개발자도구에서 이미지에 마우스를 올리면 표시 크기와 원본 크기가 함께 나옵니다. 둘의 차이가 두 배를 넘으면 그만큼이 낭비입니다.
-
02
형식을 확인한다
확장자만 봐도 됩니다. 같은 화질에서 WebP 는 JPEG 보다 눈에 띄게 작습니다. 오래된 사이트일수록 PNG 로 저장된 사진이 섞여 있는데, 사진을 PNG 로 두면 몇 배가 됩니다.
$ curl -s -o /dev/null -w "%{content_type} · %{size_download} bytes\n" \ https://example.com/img/hero.png image/png · 2841233 bytes -
03
화면 밖 이미지가 처음부터 받아지는지 본다
네트워크 탭을 열고 페이지를 연 뒤 스크롤하지 않은 상태에서 이미지 요청 수를 봅니다. 아래쪽 이미지까지 다 받고 있으면 지연 로딩이 걸려 있지 않은 것입니다.
-
04
가로·세로 지정 여부를 본다
img 태그에 width 와 height 속성이 있는지 확인합니다. CSS 로 크기를 정하더라도 이 속성이 있어야 브라우저가 자리를 미리 잡습니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
가장 효과가 크고 가장 쉽습니다. 고해상도 화면을 고려해 표시 크기의 두 배까지면 충분합니다. 그 이상은 눈으로 구분되지 않습니다.
picture 로 감싸면 브라우저가 지원하는 것을 고르고, 아니면 원래 파일로 돌아갑니다. 예전 브라우저에서 깨질 걱정 없이 적용할 수 있습니다.
<picture> <source srcset="/img/hero.webp" type="image/webp"> <img src="/img/hero.jpg" width="1200" height="630" alt="…"> </picture>
loading="lazy" 한 줄이면 됩니다. 첫 화면에 보이는 이미지에는 붙이지 마십시오 — 오히려 늦게 뜹니다.
<img src="/img/section-3.jpg" loading="lazy"
width="800" height="450" alt="…"> 실제 픽셀 값을 적으면 브라우저가 자리를 먼저 비워 둡니다. 반응형이어도 상관없습니다 — 비율 계산에만 쓰입니다.
휴대폰에 데스크톱용 큰 이미지를 보내지 않게 됩니다. 손이 가는 만큼 효과가 확실한 방법입니다.
<img src="/img/hero-800.jpg"
srcset="/img/hero-400.jpg 400w,
/img/hero-800.jpg 800w,
/img/hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="450" alt="…"> 05FAQ
자주 묻는 질문
왜 이 항목만 외부 측정을 쓰나요
- 화면에서 몇 픽셀로 보이는지, 어떤 이미지가 첫 화면에 걸리는지는 실제로 그려 봐야 알 수 있습니다. HTML 만 읽고 추측하면 반응형 사이트에서 특히 자주 틀립니다. 틀린 감점은 없는 것만 못해서, 이 항목은 렌더링 결과를 받아서만 판정합니다.
전송 용량 항목과 무엇이 다른가요
- 전송 용량은 다 합쳐서 몇 MB 인가를 봅니다. 이 항목은 한 장 한 장이 낭비인가를 봅니다. 총량이 작아도 개별 이미지가 낭비일 수 있고, 반대로 이미지가 잘 최적화돼 있어도 개수가 많아 총량이 클 수 있습니다.
WebP 로 바꾸면 화질이 떨어지나요
- 같은 화질에서 파일만 작아지는 형식입니다. 눈에 보이는 차이 없이 30~50% 정도 줄어드는 것이 보통입니다. 다만 변환 품질 설정을 너무 낮게 잡으면 당연히 나빠지므로, 바꾼 뒤 실제 화면에서 한 번 확인하십시오.
전부 지연 로딩을 걸면 되나요
- 아니요. 첫 화면에 보이는 이미지에 걸면 오히려 늦게 뜨고, 그 이미지가 대개 가장 큰 요소라 로딩 지표가 나빠집니다. 지연 로딩은 스크롤해야 보이는 것에만 겁니다.
이미지가 거의 없는 사이트인데요
- 그러면 이 항목은 해당 없음으로 나옵니다. 점수에서도 빠집니다. 없는 문제를 만들어 내지 않습니다.
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 39가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.