블로그·쇼핑몰 이미지 최적화 체크리스트

이미지 최적화는 한 번 세팅해두면 끝나는 일이 아니라, 콘텐츠를 올릴 때마다 반복되는 작업입니다. 그래서 매번 판단하기보다 체크리스트로 만들어두면 훨씬 수월합니다. 이 글에서는 블로그나 쇼핑몰을 운영하면서 이미지를 올릴 때 단계별로 확인하면 좋은 항목들을 정리했습니다.

1단계 — 업로드 전 준비

• 표시될 크기보다 원본 해상도가 과도하게 크지 않은지 확인했나요? (예: 실제 표시 폭이 800px인데 원본이 4000px이면 불필요하게 무겁습니다)
• 여러 장을 한 번에 올려야 한다면, 배치 처리가 가능한 도구를 준비했나요?
• 투명 배경이 필요한 이미지인지, 아니면 배경이 있어도 되는 사진인지 구분했나요?

2단계 — 포맷과 압축 품질 선택

• 사진류는 WebP(또는 호환성이 걱정되면 JPG)로, 로고·투명 배경 그래픽은 PNG로 선택했나요?
• 압축 품질을 70~85% 구간에서 먼저 시도해보고, 화질과 용량의 균형점을 눈으로 확인했나요?
• 텍스트가 포함된 스크린샷이라면 손실 압축으로 경계가 뭉개지지 않는지 확인했나요?

3단계 — 마크업에서 챙길 것

• <img> 태그에 width/height 속성을 지정해 레이아웃 밀림(CLS)을 막았나요?
• 화면 밖에 있는 이미지(스크롤해야 보이는 이미지)에 loading="lazy"를 적용했나요?
• 대표 이미지(히어로 배너, 상품 대표 사진)처럼 가장 먼저 보여야 하는 이미지는 반대로 지연 로딩을 걸지 않았나요?
• 이미지에 의미 있는 alt 텍스트를 넣어 접근성과 SEO를 함께 챙겼나요?

4단계 — 쇼핑몰이라면 추가로 확인할 것

• 상품 이미지가 여러 장(썸네일, 상세 이미지)일 때 전부 동일한 압축 기준을 적용했나요?
• 상세페이지에 들어가는 긴 세로형 이미지도 파일 하나의 용량이 과도하게 크지 않은지 확인했나요?
• 상품 이미지 교체·업데이트 시에도 매번 최적화 절차를 거치는 운영 습관이 잡혀 있나요?

5단계 — 운영·유지관리

• 과거에 최적화 없이 올라간 이미지들도 한 번씩 점검·재압축하는 주기를 갖고 있나요?
• 새로 합류하는 팀원에게도 이 체크리스트가 공유되어 있나요?

이 체크리스트를 전부 완벽히 지키지 못해도 괜찮습니다. 핵심은 "이미지를 올릴 때마다 최소한 포맷과 압축 품질만큼은 확인한다"는 습관을 들이는 것입니다. 이것만으로도 대부분의 페이지 속도 문제는 눈에 띄게 개선됩니다.