카메라 원본을 그대로 올리면 안 됩니다
요즘 휴대폰과 카메라로 찍은 사진은 한 장에 수 메가바이트입니다. 화면에는 폭 1000픽셀 정도로 표시되는데 4000픽셀짜리 원본을 내려받게 하면 나머지는 버려집니다.
표시되는 크기에 맞춰 줄이는 것만으로도 용량이 크게 줄어듭니다. 대부분의 경우 눈에 보이는 화질 차이는 없습니다.
- 표시 크기에 맞춰 가로폭 조정
- 사진은 JPG, 로고·도형은 PNG
- 가능하면 WebP 형식 사용
에이투엠 · 1877-3319
홈페이지 이미지를 많이 넣을 때 속도를 함께 확인해야 하는 이유
사진을 많이 넣으면 보기에는 좋지만, 모바일에서 첫 화면이 뜨는 데 몇 초가 걸리면 그 사진을 보기 전에 나가는 사람이 생깁니다.
CHECK_1홈페이지 제작
CHECK_2홈페이지 제작 인사이트
에이투엠 서비스 안내
홈페이지 이미지를 많이 넣을 때 속도를 함께 확인해야 하는 이유
이미지 안에 글을 넣지 않습니다
가격표나 안내문을 이미지로 만들어 올리면 편해 보이지만 검색엔진은 그 내용을 읽지 못합니다. 화면을 읽어주는 기능을 쓰는 사용자도 내용을 알 수 없습니다.
내용이 바뀔 때마다 이미지를 새로 만들어야 하는 부담도 생깁니다. 글은 글로 작성하고 이미지는 보조로 쓰는 편이 낫습니다.
화면에 보이지 않는 이미지는 나중에 불러옵니다
페이지 아래쪽에 있는 이미지까지 처음부터 모두 내려받을 필요는 없습니다. 스크롤이 그 위치에 닿을 때 불러오도록 지정하면 첫 화면이 뜨는 시간이 짧아집니다.
반대로 첫 화면에 바로 보이는 대표 이미지는 이 방식을 쓰면 오히려 늦게 나타납니다. 위치에 따라 다르게 처리해야 합니다.
- 아래쪽 이미지 — 지연 로딩
- 첫 화면 이미지 — 우선 로딩
- 가로·세로 크기 지정으로 화면 밀림 방지
영상은 자동 재생 방식을 확인합니다
첫 화면 배경 영상이나 소개 영상은 용량이 큽니다. 페이지를 열자마자 영상 전체를 내려받게 되어 있으면 모바일에서 데이터와 시간이 함께 소모됩니다.
영상이 화면에 들어왔을 때 불러오도록 하거나 재생 버튼을 눌렀을 때 시작하도록 바꾸면 첫 로딩이 가벼워집니다.
확인하는 방법
PC의 빠른 인터넷에서는 문제가 잘 드러나지 않습니다. 휴대폰 데이터 환경에서 직접 열어 보고, 필요하면 무료로 제공되는 속도 측정 도구로 모바일 기준 점수를 확인합니다.
에이투엠 서비스 안내
관련 서비스
이 글에서 다룬 내용을 실제로 진행할 때 해당하는 서비스입니다.
에이투엠 서비스 안내
함께 읽어볼 글
같은 단계에서 자주 이어지는 질문을 다룬 글입니다.
관련 서비스
반응형 홈페이지가 필요한 이유와 확인 방법
반응형 홈페이지와 모바일 별도 사이트의 차이, 그리고 지금 사이트가 실제로 반응형인지 직접 확인하는 방법을 정리했습니다.
자세히 보기 → 관련 서비스광고용 랜딩페이지와 일반 홈페이지의 차이
광고 도착 페이지로 홈페이지 메인을 쓸 때 생기는 문제와, 랜딩페이지를 따로 만들어야 하는 경우의 판단 기준을 정리했습니다.
자세히 보기 → 관련 서비스홈페이지 제작업체를 선택할 때 확인해야 할 유지보수 범위
홈페이지 유지보수 계약에서 무상 범위와 유상 범위, 대응 시간, 백업과 보안 업데이트 등 계약 전에 확인해야 할 기준을 정리했습니다.
자세히 보기 →frequently asked questions
홈페이지 이미지·속도 최적화 FAQ
홈페이지 이미지는 어떤 파일 형식이 좋나요?
사진은 WebP나 적절히 압축한 JPG, 로고와 아이콘은 SVG나 PNG가 일반적입니다. 같은 화질에서 WebP가 대체로 용량이 작습니다.
홈페이지 속도는 어디서 측정하나요?
구글 PageSpeed Insights에 주소를 넣으면 모바일·데스크톱 점수와 개선 항목을 볼 수 있습니다. 점수보다 실제 휴대폰에서 첫 화면이 뜨는 체감 속도를 함께 확인하세요.
홈페이지 속도가 검색 순위에 영향을 주나요?
구글은 페이지 경험 지표(Core Web Vitals)를 순위 신호 중 하나로 활용합니다. 결정적 요인은 아니지만 느린 페이지는 이탈이 늘어 문의 전환에 직접 영향을 줍니다.