배치를 깨뜨리지 않는 카운터

정성껏 지은 웹페이지에 외부 그림을 넣는 일에는 언제나 짜 놓은 시각 구조를 흐트러뜨릴 위험이 따릅니다. 브라우저가 페이지를 세울 때는 매끄러운 읽기를 위해 모든 글 덩이와 그림의 자리를 계산합니다.

그림에 명시적인 크기 지시가 없으면 브라우저는 필요한 자리를 미리 잡아 둘 수 없습니다. 그림 파일이 다 내려올 때까지 기다려 정확한 높이와 너비를 알아내야 합니다. 그 지연이 배치가 튀는 현상을 낳습니다.

글이 갑자기 아래나 옆으로 뛰어 방금 도착한 그림에 자리를 내줍니다. 글을 읽으려는 사람에게 그 갑작스러운 움직임은 몹시 거슬리고 기술적으로 불안하다는 인상을 줍니다.

태그 안의 숫자 둘이 자리를 잡아 둡니다

배치가 튀는 것을 막는 해법은 놀랄 만큼 단순하고, HTML 코드에 고정된 속성을 곧바로 더하는 일입니다. 모든 그림 태그는 픽셀 단위의 높이와 너비 값을 받을 수 있습니다. 그 크기가 소스에 미리 적혀 있으면, 브라우저는 그림 파일을 내려받기 시작하기도 전에 화면에 얼마나 빈자리를 잡아 두어야 하는지 곧바로 압니다.

그림이 도착할 때까지 그 자리는 완전히 비어 있고, 둘레의 글은 제자리에 단단히 머뭅니다. 알맞은 크기를 찾으려면 카탈로그에서 고른 디자인을 보아야 합니다.

디자인마다 정확하고 변하지 않는 크기가 있습니다. 그 정확한 숫자를 코드에 적으면 튀는 현상이 완전히 사라집니다. 네트워크 속도와 상관없이 매끄럽고 끊김 없는 페이지 불러오기를 보장합니다.

그림이 오지 않을 때 무엇이 나타나는가

네트워크 연결이 흔들리거나 아예 끊기면 사라진 그림이 화면에 보기 흉한 깨진 아이콘을 남길 수 있습니다. 그것을 우아하게 다루는 데 alt 속성이라고 하는 대체 텍스트 속성이 중요한 몫을 합니다.

그림을 보여 줄 수 없으면 브라우저는 그 속성에 적힌 글을 대신 보여 줍니다. 방문 셈처럼 순전히 장식이거나 기술적인 요소라면 그 글은 아주 짧게 두거나, 사이에 공백 없이 따옴표 둘로 아예 비워 두어야 합니다.

길고 서술적인 대체 텍스트는 그림이 불리지 않을 때 잡아 둔 배치 상자를 예측할 수 없게 늘립니다. 빈 속성은 그저 비고 눈에 띄지 않는 자리를 남겨 바닥글이나 사이드바의 구조를 지킵니다.

일부러 마지막에 불립니다

현대 웹 표준은 외부 그림이 문서 전체의 불러오기 속도에 미치는 영향을 다스릴 수단을 더 제공합니다. 두 속성 loading과 decoding이 브라우저에게 그 그림의 우선순위를 알려 줍니다.

불러오기 속성을 lazy로 두면 독자가 실제로 그 자리 가까이 스크롤할 때까지 파일 가져오기를 미루라고 브라우저에 말합니다. 디코딩 속성을 async로 두면 브라우저가 그림 데이터가 다 해석되기를 기다리지 않고 본문과 배치를 처리하게 합니다.

통계 그림이 본당이나 동아리 페이지에서 가장 중요한 정보인 경우는 드무니, 그 속성들이 실제 내용이 언제나 먼저 나타나게 합니다. 측정 도구는 조용히 배경에서 제자리를 잡고, 주된 메시지의 전달을 결코 늦추지 않습니다.