작은 사이트를 위한 이미지 포맷과 로딩 기본

이미지 종류마다 맞는 포맷이 다르다

사진이나 화면을 캡처한 이미지는 WebP나 AVIF처럼 압축률이 높은 포맷이 적합합니다. 같은 화질에서 JPEG보다 파일 크기가 작아지는 경우가 많습니다. 반면 로고나 아이콘처럼 선이 분명한 그래픽은 SVG로 다루면 어떤 화면 크기에서도 흐려지지 않고 파일 크기도 작습니다.

원본 크기 그대로 올리지 않는다

카메라나 디자인 도구에서 내보낸 원본 이미지는 실제 화면에 표시되는 크기보다 훨씬 큰 경우가 많습니다. 본문 폭이 720px 안팎인 사이트에 2000px 이상의 원본을 그대로 올리면, 방문자는 화면에 보이지도 않는 픽셀까지 모두 내려받게 됩니다. 업로드 전에 표시 크기에 맞춰 한 번 줄이는 작업만으로도 페이지 용량을 크게 줄일 수 있습니다.

여러 화면 크기를 지원해야 한다면 srcset과 sizes 속성으로 화면 폭에 맞는 이미지를 브라우저가 선택하게 할 수 있습니다. 다만 작은 콘텐츠 사이트라면 본문 폭에 맞춘 이미지 한두 개를 잘 준비하는 것만으로도 충분한 경우가 많습니다.

레이아웃을 흔들지 않는 이미지 태그

이미지가 로딩되기 전과 후에 차지하는 공간이 다르면, 텍스트와 버튼이 갑자기 밀리는 레이아웃 흔들림이 생깁니다. img 태그에 width와 height를 지정하거나 CSS의 aspect-ratio로 비율을 미리 정해두면, 이미지가 아직 도착하지 않아도 같은 크기의 빈 공간이 먼저 자리를 잡아 화면이 흔들리지 않습니다.

첫 화면과 그 아래는 다르게 다룬다

방문자가 스크롤하지 않고 바로 보는 첫 화면의 이미지는 가능한 한 빨리 보여줘야 합니다. 반면 글 중간이나 하단의 이미지는 화면에 들어오기 직전에 불러와도 충분하므로 loading="lazy" 속성을 적용하면 초기 로딩 부담을 줄일 수 있습니다.

글 하나에 너무 많은 이미지를 넣으면 각 이미지의 효과가 희석되고 페이지 전체 용량만 커집니다. 설명에 꼭 필요한 이미지만 선별하는 편이 읽는 속도와 로딩 속도 모두에 유리합니다.