나눔웹 실무 꿀팁
홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드
구글의 연구에 따르면, 모바일 웹사이트의 로딩 시간이 3초를 넘어가면 방문자의 53%가 이탈한다고 합니다.
화려한 디자인과 훌륭한 기획으로 무장한 홈페이지라도, 접속 속도가 느리다면 고객은 결과물을 보기도 전에 뒤로 가기를 누릅니다.
💡 웹사이트가 느려지는 가장 큰 주범은?
바로 '정리되지 않은 고용량 이미지'입니다. 오늘은 개발 지식이 깊지 않아도 즉시 적용할 수 있는 현존 최고의 이미지 최적화 비법 2가지를 소개합니다.
1. 차세대 이미지 포맷 'WebP' 사용하기
WebP(웹피)는 구글에서 개발한 이미지 포맷입니다. 기존 JPG나 PNG와 동일한 화질을 유지하면서도 용량을 무려 30%~50% 이상 획기적으로 줄여줍니다. 최신 웹 트렌드에서는 필수적으로 사용되는 규격입니다.
⚠️ 단, 주의할 점 (구형 브라우저 호환성)
인터넷 익스플로러(IE)나 너무 오래된 스마트폰에서는 WebP를 인식하지 못해 엑스박스가 뜰 수 있습니다. 이를 완벽하게 방어하기 위해 HTML의 <picture> 태그를 사용해야 합니다.
<!-- 나눔웹 추천 안전한 이미지 삽입 코드 -->
<picture>
<!-- 브라우저가 WebP를 지원하면 이것을 로드합니다 -->
<source srcset="image.webp" type="image/webp">
<!-- WebP를 지원하지 않는 구형 브라우저면 기존 JPG를 로드합니다 -->
<img src="image.jpg" alt="나눔웹 포트폴리오 이미지">
</picture>
2. 안 보이는 건 나중에! 'Lazy Loading' 적용
사용자가 스크롤을 내리기 전까지, 모니터 화면 밖(아래쪽)에 숨어있는 이미지들까지 처음부터 미리 다 불러올 필요는 없습니다.
화면에 이미지가 보일 때쯤 늦게(Lazy) 로딩하게 만들면 초기 접속 속도를 미친 듯이 끌어올릴 수 있습니다. 적용법은 너무나 간단합니다.
<!-- img 태그 안에 loading="lazy" 딱 하나만 추가하세요! -->
<img src="heavy-image.jpg" alt="고화질 배너" loading="lazy">
작은 디테일이 명품 웹사이트를 만듭니다.
오늘 알려드린 2가지 속성만 챙기셔도, 고객의 이탈률을 획기적으로 낮출 수 있습니다.
