반응형
반응형
웹사이트를 만들 때 가장 중요한 것 중 하나는 바로 로딩 속도입니다.
특히 블로그나 쇼핑몰처럼 이미지가 많은 페이지는 이미지 최적화만 잘해도 속도가 빨라지고, SEO 점수도 크게 개선됩니다.
이번 글에서는 웹에서 꼭 알아야 할 이미지 최적화 방법을 정리해봤습니다.
이미지 최적화가 중요한 이유
- 로딩 속도 향상 → 방문자가 빠르게 콘텐츠를 볼 수 있음
- 검색 엔진 최적화(SEO) → 구글은 속도가 빠른 페이지를 선호
- 트래픽 절감 → 데이터 사용량이 줄어 서버 비용 절약
- 사용자 경험 개선 → 모바일 환경에서도 쾌적한 이용 가능
권장 이미지 포맷
WebP
- 구글에서 만든 차세대 이미지 포맷
- JPG/PNG 대비 30~80% 용량 절감
- 투명 배경(PNG)와 애니메이션(GIF)도 지원
AVIF
- 최신 압축 방식으로 WebP보다 더 높은 압축률 제공
- HDR, 투명도 지원 → 퀄리티 유지하면서 용량을 획기적으로 줄임
단점: 아직 일부 구형 브라우저는 지원하지 않음
이미지 사이즈 줄이기
- 원본 이미지를 그대로 쓰면 불필요하게 용량이 커짐
- 업로드 전 리사이즈: 실제 보여질 크기(예: 1200px)로 줄이기
- CSS로 강제 축소하는 게 아니라, 실제 파일 크기를 줄이는 것이 핵심
압축 도구 활용하기
- TinyPNG / TinyJPG: PNG, JPG 파일을 자동 압축
- Squoosh (구글): WebP, AVIF 변환 + 품질 조정 가능
- ImageMagick: 대량 이미지 변환 시 유용 (개발자용)
HTML에서 이미지 최적화하기
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="최적화된 이미지">
</picture>- <picture> 태그를 활용하면 최신 포맷(WebP/AVIF)을 우선 적용 가능
- 구형 브라우저 호환성도 함께 확보할 수 있음
티스토리는 글 작성시 글 작성 상단 우측에 기본모드에서 HTML을 눌러 코드 화면을 확인할수 있음.
지연 로딩(Lazy Loading) 적용
<img src="image.jpg" alt="최적화된 이미지" loading="lazy">- 사용자가 실제로 스크롤해서 이미지를 보기 전까지는 로딩하지 않음
- 초기 페이지 로딩 속도가 훨씬 빨라짐
CDN(Content Delivery Network) 활용
- 이미지 서버를 CDN에 올리면 지역별로 가장 가까운 서버에서 로딩
- Cloudflare, AWS CloudFront, Kakao CDN 등 활용 가능
- 속도 향상 + 보안 강화 + 트래픽 절약 효과
반응형