떠다니는 Q

다른 곳에서 찾아볼 수 없는 블로그스팟 관련 정보와 그 외 관심 있는 것을 올립니다.

블로그스팟 이미지 지연 읽기 설정하기

블로그스팟 이미지 지연 읽기 설정하기

블로그 속도에 있어서 이미지 지연 읽기(lazyload, 레이지로드)는 중요한 요소입니다. 이미지가 글자 하나하나보다 더 많은 용량을 차지하다 보니 이미지를 지연 읽기하면 얻을 수 있는 페이지 로딩 속도 감소 효과는 큰 편입니다. 이 글에서는 이미지 지연 읽기란 무엇인지, 블로그스팟에서 어떻게 이미지 지연 읽기를 설정하는지에 대하여 다루겠습니다.

목차

이미지 지연 읽기란?

웹사이트는 웹사이트에 있는 콘텐츠를 읽어올 때 일정량의 데이터를 사용합니다. 그 콘텐츠가 이미지나 동영상 같은 미디어일 경우 큰 용량 때문에 많은 데이터를 사용합니다.

더 큰 이미지를 불러오기 위해서는 더 많은 데이터와 시간이 필요합니다. 이러면 웹사이트의 로딩 시간이 길어지고 방문자에게 사이트에 대한 안 좋은 인상을 심어 줍니다. 생각해 봅시다. 페이지 로딩이 느린 사이트에 접속해 본 경험이 있나요? 대부분 해당 페이지가 중요한 페이지가 아닌 경우 바로 페이지를 닫아 버렸을 것입니다.

이미지 지연 읽기는 당장 읽을(로딩할) 필요가 없는 이미지의 로딩을 지연시킵니다. 페이지를 처음 열 때는 당장 필요한 이미지만 읽고, 사용자가 글을 읽어 나가면서 필요한 이미지들을 추가로 로딩시킵니다.

loading="lazy" 설정하기

이미지 지연 읽기를 설정하는 가장 간단한 방법은 img 태그의 속성에 loading="lazy"를 설정하는 것입니다. 직접 이미지 지연 읽기를 설정해 봅시다.

우선 게시글을 하나 클릭합니다. 왼쪽 위를 클릭해 HTML 보기 모드로 전환합니다. HTML에서 이미지는 <img> 태그로 둘러싸여져 있습니다. 예시로 글에 있는 이미지를 하나 선택했습니다. <img loading="lazy"처럼 코드를 추가하면 됩니다. 아래 스크린샷을 보면, 위 이미지에는 이미지 지연 읽기를 설정하지 않았고 아래 사진에는 이미지 지연 읽기를 설정했습니다. 둘의 차이를 비교해 보세요.

글에 있는 모든 이미지에 지연 읽기를 적용하려면 찾아 바꾸기 기능이 유용합니다. 위 바에서 바꾸기 아이콘을 클릭합니다. 찾는 문자열에 <img를 입력하고 바꿀 문자열에 <img loading="lazy"를 입력합니다. All을 선택하면 모든 이미지에 지연 읽기를 쉽게 적용할 수 있습니다.

블로그스팟 자체적으로 이미지 지연 읽기 기능을 사용할 수 있습니다. 설정으로 들어가서 글 > 이미지 지연 로드를 켜면 됩니다. 그러면 글의 모든 이미지에 loading="lazy"가 붙게 됩니다. HTML과 씨름하고 싶지 않은 경우 가장 간단한 방법입니다. 아래 스크린샷은 현재 이 블로그의 글 설정을 보여줍니다. 저는 블로그스팟이 자체적으로 지원하는 이미지 지연 로드 기능을 사용하지는 않고 있습니다.

개발자 도구로 이미지 지연 확인하기

개발자 도구의 네트워크 탭을 활용하면 이미지 지연 읽기가 제대로 이루어지는지 확인할 수 있습니다. 고양이 사진 100장이 있는 웹사이트입니다. 원래라면 이미지를 로딩하느라 웹사이트 속도가 느려져야 정상일 겁니다.

https://mathiasbynens.be/demo/img-loading-lazy

컴퓨터에서 이미지 지연 읽기를 설정한 블로그 글에 접속합니다. F12를 눌러서 개발자 도구를 켭니다. Network(네트워크) 탭으로 들어갑니다. 이미지 로딩을 확인하기 위해 Img를 클릭합니다. 크롬 기준으로 Ctrl + F5를 눌러 캐시를 삭제하는 강력 새로고침을 합니다.

천천히 스크롤을 내리면 이미지 파일들이 차례로 로딩되는 것을 확인할 수 있습니다. transferred의 용량이 늘어나는 것과 request의 수가 늘어나는 것을 확인하면 됩니다. transferred는 웹사이트가 로딩한 자원(리소스)의 총 용량이니 이미지가 로딩될수록 그 용량이 늘어납니다.

결국 중요한 것은 이미지 크기

아무리 지연 읽기를 적용한다고 해도 블로그 속도에 중요한 것은 이미지의 크기입니다. 이미지 크기를 줄이는 웹사이트인 tinypng를 활용해 이미지 크기를 크게 줄여 봅시다. 똑같은 이미지가 tinypng를 적용하면 얼마나 크기가 줄어드는지 알아봅시다.

동대문역사문화공원역에서 찍은 사진입니다. 왼쪽 사진이 tinypng를 거치기 전, 오른쪽 사진이 tinypng를 거친 후의 사진입니다. 스크롤하여 두 사진을 비교해 보세요. 얼핏 보면 차이를 거의 느낄 수 없습니다.

tinypng 자체적으로도 이미지 크기가 87% 줄었다고 알려줍니다. 실제로 이미지 크기는 2.56MB에서 341KB로 대폭 줄어들었습니다.

이렇게 이미지 크기가 줄어들면 빠른 블로그 속도와 함께 좋은 페이지 경험을 얻을 수 있습니다.

내 사진

BINUBALL 작성

fx-570EX, fx-570ES PLUS 등의 계산기 관련 글들을 주로 올립니다. 블로그스팟으로 블로그를 운영하고 있습니다.

댓글 1개

아래의 댓글 입력을 클릭한 후 익명으로 댓글을 달아 주셔도 됩니다. 글 내용에 관한 질문도 환영합니다. 모든 댓글은 관리자의 승인을 받아야 보여집니다. 댓글을 달고 기다려 주세요.

바람
바람
이미지 지연 로드나 WebP 이미지 제공 메뉴가 새로 생겼군요? 업데이트 안 하는 것 같아도 가끔 잠수함 패치는 해 주나봅니다.
2024년 1월 4일 오후 11:36 삭제