·1분 읽기
웹사이트 이미지 최적화 가이드 – 로딩 속도 3초 줄이는 5가지 방법
웹사이트 이미지 최적화로 로딩 속도를 줄이는 방법을 정리했어요. 압축, 포맷 변환, lazy loading까지 실전 가이드입니다.
🖼️
이미지 압축 바로 사용하기
이미지를 압축하고 포맷을 변환하세요
→
이미지가 웹사이트를 느리게 만들어요
웹페이지 용량의 50-70%가 이미지예요. 최적화 안 된 5MB 사진 하나가 로딩 시간을 3-5초 늘릴 수 있어요.
구글은 로딩이 3초 넘으면 방문자의 53%가 이탈한다고 해요. SEO 순위에도 직접적인 영향을 줘요.
이미지 최적화만 해도 체감 속도가 확 달라져요.
방법 1: 이미지 압축하기
가장 쉽고 효과적인 방법이에요.
- JPEG: 품질 80%로 설정하면 파일 크기 60-70% 감소
- PNG: 색상이 적은 이미지는 PNG-8로 변환
- Toolkio 이미지 압축 도구로 드래그 앤 드롭만 하면 끝
대부분의 사진은 80% 품질과 원본의 차이를 눈으로 구별하기 어려워요. 하지만 파일 크기는 절반 이하로 줄어들어요.
방법 2: WebP 포맷 사용하기
WebP는 구글이 만든 이미지 포맷이에요. JPEG보다 25-35% 작으면서 품질은 동일해요.
- 크롬, 사파리, 파이어폭스 모든 브라우저 지원
- 투명 배경(알파 채널)도 지원
- 애니메이션도 가능 (GIF 대체)
이미 모든 주요 브라우저가 WebP를 지원하니까 안심하고 사용하세요.
방법 3: 적절한 해상도 사용하기
블로그 본문에 4000x3000 원본 사진을 넣을 필요가 없어요.
- 블로그 본문: 최대 1200px 너비
- 썸네일: 400-600px
- 모바일: 800px이면 충분
CSS의 srcset 속성을 사용하면 기기별로 다른 크기 이미지를 제공할 수 있어요.
방법 4-5: Lazy Loading과 CDN
Lazy Loading은 화면에 보이는 이미지만 먼저 로드하는 기술이에요. img 태그에 loading='lazy'만 추가하면 돼요.
CDN(Content Delivery Network)을 사용하면 전 세계 서버에서 가장 가까운 곳에서 이미지를 전송해요. Cloudflare, AWS CloudFront가 대표적이에요.
Toolkio의 이미지 압축 도구로 먼저 용량을 줄이고, WebP로 변환한 후 lazy loading을 적용하세요. 이것만으로 로딩 시간이 확 줄어들어요.