홈페이지 이미지를 많이 넣을 때 속도를 함께 확인해야 하는 이유

카메라 원본을 그대로 올리면 안 됩니다

요즘 휴대폰과 카메라로 찍은 사진은 한 장에 수 메가바이트입니다. 화면에는 폭 1000픽셀 정도로 표시되는데 4000픽셀짜리 원본을 내려받게 하면 나머지는 버려집니다.

표시되는 크기에 맞춰 줄이는 것만으로도 용량이 크게 줄어듭니다. 대부분의 경우 눈에 보이는 화질 차이는 없습니다.

• 표시 크기에 맞춰 가로폭 조정
• 사진은 JPG, 로고·도형은 PNG
• 가능하면 WebP 형식 사용

이미지 안에 글을 넣지 않습니다

가격표나 안내문을 이미지로 만들어 올리면 편해 보이지만 검색엔진은 그 내용을 읽지 못합니다. 화면을 읽어주는 기능을 쓰는 사용자도 내용을 알 수 없습니다.

내용이 바뀔 때마다 이미지를 새로 만들어야 하는 부담도 생깁니다. 글은 글로 작성하고 이미지는 보조로 쓰는 편이 낫습니다.

화면에 보이지 않는 이미지는 나중에 불러옵니다

페이지 아래쪽에 있는 이미지까지 처음부터 모두 내려받을 필요는 없습니다. 스크롤이 그 위치에 닿을 때 불러오도록 지정하면 첫 화면이 뜨는 시간이 짧아집니다.

반대로 첫 화면에 바로 보이는 대표 이미지는 이 방식을 쓰면 오히려 늦게 나타납니다. 위치에 따라 다르게 처리해야 합니다.

• 아래쪽 이미지 — 지연 로딩
• 첫 화면 이미지 — 우선 로딩
• 가로·세로 크기 지정으로 화면 밀림 방지

영상은 자동 재생 방식을 확인합니다

첫 화면 배경 영상이나 소개 영상은 용량이 큽니다. 페이지를 열자마자 영상 전체를 내려받게 되어 있으면 모바일에서 데이터와 시간이 함께 소모됩니다.

영상이 화면에 들어왔을 때 불러오도록 하거나 재생 버튼을 눌렀을 때 시작하도록 바꾸면 첫 로딩이 가벼워집니다.

확인하는 방법

PC의 빠른 인터넷에서는 문제가 잘 드러나지 않습니다. 휴대폰 데이터 환경에서 직접 열어 보고, 필요하면 무료로 제공되는 속도 측정 도구로 모바일 기준 점수를 확인합니다.