웹사이트 속도가 느리면 사이트 이용자가 기다리지 못하고 이탈할 확률이 높아지므로 SEO에도 매우 안 좋은 영향을 미친다.
특히 이미지는 웹사이트 로딩 속도를 늦추는 주요 원인 중 하나다.
이제부터 웹사이트 속도를 빠르게 하는 방법 중 두번째, 이미지 최적화 방법을 자세히 알아보자.
적절한 이미지 형식 선택, 이미지 압축, 이미지 리사이징, 반응형 이미지 사용, 지연 로딩 적용, CDN 활용을 할 수 있다.
이미지 최적화를 통해 로딩 시간을 단축하고, 사용자 만족도와 검색 엔진 순위를 동시에 개선해보자.
속도에 미치는 영향
이미지는 웹사이트의 시각적 매력을 높이지만, 잘못 관리하면 로딩 속도를 크게 저하 시킬 수 있다.
- 로딩 시간 증가
- 고해상도 이미지는 파일 크기가 크기 때문에 페이지 로딩 시간이 길어진다.
- 데이터 사용량 증가
- 모바일 사용자의 경우, 큰 이미지 파일로 인해 데이터 사용량이 급증할 수 있다.
- 검색 엔진 순위 하락
- 느린 로딩 속도는 SEO 순위에 부정적인 영향을 미친다.
이미지 최적화 방법
웹사이트 속도를 높이기 위해 이미지 최적화 방법을 알아보자.
- 적절한 이미지 형식 선택
이미지 형식에 따라 이미지 압축률과 파일 크기, 품질이 달라진다.
이미지 형식별 특징을 확인해보고 상황에 맞게 선택하자.
형식 장점 단점 적합한 사용 사례 JPEG 높은 압축률, 작은 파일 크기 투명도 미지원, 품질 손실 가능 사진, 복잡한 그래픽 PNG 투명도 지원, 무손실 압축 파일 크기가 큼 로고, 아이콘, 투명도 필요한 이미지 WebP JPEG보다 작은 파일 크기, PNG보다 높은 압축률 구형 브라우저에서 지원 안 됨 고품질 이미지, 웹 최적화 SVG 벡터 기반, 확대해도 깨지지 않음 복잡한 이미지에는 부적합 로고, 아이콘, 간단한 그래픽 - 이미지 압축
이미지 파일 크기를 줄이기 위해 이미지 압축 도구를 사용하자.
대표적인 도구들 몇 가지만 소개해보겠다.
도구 장점 단점 적합한 사용 사례 TinyPNG 간편한 사용, 무료 버전 제공 무료 버전은 파일 크기 제한 있음 PNG, JPEG 압축 ImageOptim 로컬에서 작업 가능, 여러 이미지 한 번에 작업 가능, 품질 손실 없음 Mac 전용 앱, 초보자에게는 다소 복잡 로컬 이미지 최적화 Squoosh 다양한 형식 지원, Google 개발 온라인에서만 사용 가능 WebP, JPEG, PNG 변환 및 압축 - 이미지 리사이징
이미지 크기를 보여주고자 하는 사이즈에 맞춰서 리사이징하는 방법이다.
예를 들어, 이미지를 800*500 사이즈로만 보여줄 것인데 이미지 크기가 그것보다 더 크다면 불필요한 리소스 낭비만 된다.
도구 장점 단점 적합한 사용 사례 Adobe Photoshop 고급 편집 기능, 다양한 포맷 지원 가격이 비쌈, 사용법이 복잡할 수 있음 전문적인 이미지 편집 및 리사이징 GIMP 무료 오픈 소스, 다양한 기능 제공 인터페이스가 다소 복잡할 수 있음 비용 부담 없이 전문적인 편집 필요 시 Canva 사용하기 쉬운 인터페이스, 다양한 템플릿 제공 리사이징 기능이 제한적일 수 있음 소셜 미디어용 이미지 제작 및 리사이징 Online Image Resizer 간편한 웹 기반 사용, 빠른 처리 속도 기본적인 기능만 제공, 품질 손실 가능성 간단한 리사이징 작업 - 반응형 이미지 사용
반응형 이미지는 디바이스의 화면 크기에 맞게 최적화된 이미지를 제공한다.
데스크톱에서는 큰 이미지를 보여주고 태블릿에서는 중간 크기의 이미지를 보여주며 모바일에서는 작은 이미지를 보여줄 수 있다.
워드프레스에 파일을 업로드하면 작은 사이즈와 큰 사이즈로 업로드 되던데 이 기능을 활용할 수 있다.
<picture>
<source srcset="large.webp" media="(min-width: 1024px)">
<source srcset="medium.webp" media="(min-width: 768px)">
<img src="small.webp" alt="반응형 이미지 예시"> </picture> - 지연 로딩 적용
지연 로딩(Lazy Loading)은 사용자가 이미지를 보기 전까지 로딩을 지연시켜 해당 이미지를 봐야할 때 로드하는 방식이다.
처음 페이지가 로드될 때 속도를 크게 개선할 수 있다.
<img src="image.jpg" alt="Lazy Loading 예시" loading="lazy"> - CDN 활용
CDN(Content Delivery Network)은 전 세계에 분산된 서버를 통해 이미지를 빠르게 전달하는 기술이다.
이를 통해 사용자의 위치에 상관없이 빠른 로딩 속도를 제공할 수 있다.
도구 장점 단점 적합한 사용 사례 Cloudflare 무료 플랜 제공, DDoS 방어 기능 고급 기능은 유료, 성능 변동 가능성 중소형 웹사이트 및 블로그 Akamai 광범위한 글로벌 네트워크, 높은 안정성 비용이 높음, 복잡한 설정 기업 및 대규모 웹사이트 AWS CloudFront 유연한 가격 모델, 다른 AWS 서비스와 통합 복잡한 설정 필요, 사용량에 따라 비용 증가 웹 애플리케이션 및 미디어 배포 Fastly 빠른 캐싱, 실시간 배포 기능 비용이 상대적으로 높음, 학습 곡선 고속 웹사이트 및 앱
이미지 최적화의 SEO 효과
이미지 최적화를 통해 다음 효과를 기대할 수 있다.
- 페이지 로딩 속도 개선
- 사용자 체류 시간 증가
- 검색 엔진 순위 상승
이미지 최적화는 웹사이트 속도 개선의 핵심 요소다.
적절한 이미지 형식 선택, 압축, 반응형 이미지, Lazy Loading, CDN 활용 등을 통해 로딩 시간을 단축하고, 사용자 경험과 SEO 순위를 동시에 개선해보자.