01DEFINITION
한 줄로 말하면
이미지에 가로·세로 값이 없으면 브라우저가 사진을 받기 전까지 그 자리를 비워 두지 못합니다. 사진이 늦게 도착하면서 아래 글이 통째로 밀리고, 누르려던 버튼이 손가락 밑에서 움직입니다. 결국 화면은 멀쩡해지기 때문에 만든 사람 눈에는 보이지 않고, 회선이 느린 곳에서만 일어납니다. 속성 두 개를 적는 일이고 디자인은 한 픽셀도 바뀌지 않습니다.
02RISK
없으면 무슨 일이 생기나
사용자가 실제로 겪는 것은 오작동입니다. 목록에서 세 번째 항목을 누르려고 손가락을 올린 순간 위쪽 배너가 도착해 자리가 밀리고, 눌린 것은 네 번째입니다. 결제나 신청 화면에서 이 일이 생기면 잘못 고른 상품으로 다음 단계가 넘어갑니다. 사용자는 사이트가 이상하다고 느끼지 실수라고 생각하지 않습니다.
검색엔진은 이 흔들림을 점수로 재고 있습니다. 화면이 얼마나 밀렸는지를 수치화한 지표가 있고, 그 값이 나쁘면 사용자 경험 평가에서 감점됩니다. 다운로드 속도를 아무리 줄여도 이 값은 안 좋아집니다 — 원인이 용량이 아니라 자리 선언이기 때문입니다.
고치는 비용이 가장 낮은 항목 중 하나인데도 오래 남아 있는 경우가 많습니다. 반응형 디자인을 하면서 CSS 로 폭을 100%로 잡고 HTML 의 width·height 를 지운 관습 때문입니다. 지금 브라우저는 그 두 값을 비율 계산에만 쓰고 실제 크기는 CSS 를 따르므로, 넣어도 반응형이 깨지지 않습니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
치수가 없는 이미지가 몇 개인지 센다
이 항목이 세는 것이 그것입니다. 본문 안의 이미지만 세고 절반 미만이면 실패로 봅니다.
$ curl -s https://example.com/ | grep -o '<img[^>]*>' \ | grep -v 'width=' | wc -l 7
나머지 확인 방법 2단계는 셀프수리 가이드에 있습니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
표시 크기가 아니라 파일의 원본 크기입니다. 브라우저는 이 둘의 비율만 쓰고 실제 크기는 CSS 가 정합니다.
가이드 안내 보기 · 먼저 무료로 진단받기
이미 열람권을 구매하셨다면 안내 메일의 가이드 링크로 바로 열립니다 — 링크를 잃으셨다면 문의 주시면 다시 보내 드립니다.
05FAQ
자주 묻는 질문
치수를 적으면 반응형이 깨지지 않나요
- 깨지지 않습니다. 지금 브라우저는 width·height 를 가로세로 비율 계산에만 쓰고 실제 표시 크기는 CSS 를 따릅니다. max-width 와 height:auto 두 줄만 있으면 그대로입니다.
이미지를 CSS 배경으로 넣으면 이 항목에 안 걸리나요
- 걸리지 않습니다. 다만 배경 이미지는 검색엔진이 콘텐츠로 세지 않고 대체 텍스트도 못 답니다. 이 항목을 피하려고 배경으로 옮기면 다른 것을 잃습니다.
속도 점수와 무엇이 다른가요
- 속도는 얼마나 빨리 오는가이고 이 항목은 오는 동안 화면이 흔들리는가입니다. 파일을 아무리 줄여도 자리를 안 잡아 두면 흔들림은 그대로입니다. 둘은 원인이 다릅니다.
RELATED
같이 보시면 좋은 항목
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 51가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.