티스토리 블로그 이미지 지연로딩(Lazyload)으로 최적화하기

티스토리 블로그에서 이미지를 업로드하거나 구글 광고의 배너 이미지가 출력될 경우, 용량이 큰 이미지는 로딩 속도가 느려질 수 있습니다. 특히 많은 이미지를 한 번에 불러올 때는 인터넷 환경이나 데이터 전송 과정에서 오류가 발생하여 일부 이미지가 화면에 출력되지 않는 경우도 생기곤 합니다.

 

이러한 문제를 최소화하기 위해 이미지 지연 로딩(Lazyload) 기법을 적용하면, 화면에 이미지가 한 번에 로드되지 않고 스크롤 이동에 따라 순차적으로 표시됩니다. 이번 글에서는 티스토리 블로그에 간단한 스크립트를 추가하여 지연 로딩을 적용하는 방법을 소개하겠습니다.

---

🗜️ 이미지 최적화

스크립트를 적용하기 전, 가장 먼저 고려해야 할 부분은 이미지 자체의 최적화입니다.

• PNG, GIF, 고품질 JPEG 파일은 용량이 클 수 있으므로 가급적 WebP 포맷 사용을 권장합니다.
• WebP는 구글에서 제작한 이미지 포맷으로, 품질 저하를 최소화하면서도 강력한 압축률을 제공합니다. 수 MB에 달하는 PNG나 JPEG 파일도 WebP로 변환하면 수십 ~ 수백 KB 수준까지 줄일 수 있어 블로그 업로드에 적합합니다.

저는 개인적으로 반디뷰(Bandizip Viewer) 프로그램을 활용하여 이미지를 변환하고 있습니다.

• 무료 사용이 가능하며, 대량의 이미지 포맷 변환·품질 조정·크기 변경을 손쉽게 처리할 수 있습니다.
• 기본 이미지 뷰어 기능도 갖추고 있어 윈도우 내장 이미지 뷰어 대신 사용하기에 충분합니다.

반디뷰 - 고속 이미지 뷰어

※ 반디뷰 설치 과정은 간단하므로 본문에서는 생략하며, 사용법은 아래 제 블로그 포스팅 링크에서 확인할 수 있습니다.

[포스팅 링크]

---

⚙️ 이미지 지연 로딩 스크립트 추가하기

이제 본격적으로 티스토리 블로그에 Lazyload 스크립트를 적용하는 과정을 설명드리겠습니다.

 

• 투명 이미지 다운로드
  • 지연 로딩을 위해 먼저 비어 있는 투명 이미지를 준비합니다.
  • 이 파일은 실제 이미지가 로딩되기 전 공간을 확보하는 역할을 합니다.

blank.png

0.00MB

• HTML에 스크립트 추가
  • 티스토리 관리자 페이지에서 [스킨 편집] → [HTML 편집] 메뉴로 이동합니다.
  • </head> 태그 바로 위에 제공된 스크립트를 붙여넣습니다.
  • 스크립트 내부에 "이미지 링크 주소"라고 표시된 부분은 이후 업로드할 투명 이미지 주소로 교체해야 합니다.

🔗스크립트 출처 : 링크

<!-- 이미지 지연 시작 -->
  <!-- 출처 : https://stack94.tistory.com/entry/티스토리-이미지-레이지-로딩지연로드-설정하여-속도-개선하자 -->
  <script> 
      document.addEventListener("DOMContentLoaded",()=>{let e=!1;const t=e=>{e.classList.contains("loaded")||
      (e.src=e.dataset.src,e.removeAttribute("data-src"),e.dataset.srcset&&(e.srcset=e.dataset.srcset,e.removeAttribute("data-srcset")),e.classList.add("loaded"))},s=e=>{e.dataset.src=e.src,e.dataset.src&&
      (e.dataset.srcset=e.srcset,e.removeAttribute("srcset")),e.src="이미지 링크 주소"}
      ;if("IntersectionObserver"in window){const e=new IntersectionObserver((e,s)=>{e.forEach(e=>{if(!e.isIntersecting)return;const 
      r=e.target;t(r),s.unobserve(r)})},{root:null,rootMargin:"200px"});document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(t=>{s(t),e.observe(t),t.classList.add("observing")})}else{const r=()=>
      {const{scrollY:e}=window;document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(s=>
      {if(s.classList.contains("loaded"))return;const 
      r=s.parentNode.offsetTop;r+s.offsetHeight>e&&e+window.innerHeight>r&&t(s)})};document.querySelectorAll(".imageblock img,.imagegridblock img").forEach(o=>{s(o),r(),window.addEventListener("scroll",()=>{e||(window.requestAnimationFrame(()=>{t(),e=!1}),e=!0)},{passive:!0})})}});
  </script>
  <!-- 이미지 지연 끝 -->

• 파일 업로드 및 링크 연결
  • [HTML 편집] 화면 우측 상단의 [파일 업로드] 메뉴를 선택합니다.
  • '+추가' 버튼을 눌러 다운로드 받은 투명 이미지를 업로드합니다.
  • 업로드된 이미지 이름을 마우스 우클릭 → 링크 주소 복사를 선택합니다.
  • 앞서 삽입한 스크립트에서 "이미지 링크 주소" 부분에 복사한 링크를 쌍따옴표(" ") 안에 붙여넣습니다.

이미지를 업로드하고 링크 주소 복사하여 스크립트에 붙여넣기

• 적용 확인
  • 저장 후 블로그 페이지에 접속해봅니다.
  • 이미지가 많은 글에서 스크롤을 내려보면, 처음에는 흰색 이미지가 보였다가 점차 원본 이미지로 교체되는 것을 확인할 수 있습니다.

---

이상으로 티스토리 블로그에서 이미지 지연 로딩(Lazyload) 적용 방법을 소개하였습니다.
이미지 용량을 줄이는 최적화 작업과 함께 활용하면, 블로그 로딩 속도를 개선하고 사용자 경험을 더욱 높일 수 있습니다.

읽어주셔서 감사합니다. 🙏