웹사이트·쇼핑몰 이미지 최적화로 로딩 속도 높이는 법

방문자는 페이지가 몇 초만 느려도 떠납니다. 그리고 페이지 무게의 대부분은 이미지예요. 원본 사진을 그대로 올리면 한 장에 수 MB라 로딩이 느려지고, 모바일 데이터도 낭비됩니다. 해법은 크기(픽셀)를 실제 표시 크기에 맞추고, 용량을 압축하는 두 단계입니다.

1. 표시 크기에 맞춰 픽셀 줄이기

화면에 600px로 보이는 이미지를 4000px 원본으로 올릴 이유가 없습니다. 이미지 크기 조절 도구에서 실제 쓰임에 맞춰 너비를 정하세요. 대략적인 기준:

• 본문 큰 이미지: 가로 1200~1600px
• 상품 썸네일·카드: 가로 600~800px
• 배너·전체 폭: 가로 1920px

2. 용량 압축하기

크기를 맞춘 뒤 이미지 압축 도구로 용량을 줄입니다. 웹 이미지는 한 장당 100~300KB만 되어도 충분히 선명합니다. 여러 장을 한 번에 넣어 일괄 압축할 수 있어요. 원리와 순서는 이미지 용량 줄이는 법 글에 정리돼 있습니다.

어떤 포맷으로 올릴까

• 사진: JPG가 무난합니다. 같은 화질에서 용량이 작아요.
• 로고·아이콘·투명 배경: PNG를 씁니다.
• WebP를 지원하는 사이트라면 더 작은 용량으로 같은 화질을 낼 수 있습니다.

아이폰 HEIC 사진이라면

HEIC는 일부 브라우저·업로더에서 인식되지 않습니다. 먼저 HEIC → JPG 변환으로 바꾼 뒤 위 과정을 진행하세요.

자주 묻는 질문

• 압축하면 화질이 나빠지지 않나요? 웹 표시용은 적정 압축에서 차이를 거의 못 느낍니다. 목표 용량을 너무 낮게만 잡지 않으면 됩니다.
• 이미지가 수십 장이에요. 도구에 한 번에 넣어 일괄 처리하면 됩니다.
• 안전한가요? 모든 처리가 브라우저 안에서 이루어지며 파일이 서버로 전송되지 않습니다.