HTML lazy loading과 fetchpriority, 이미지는 언제 불러와야 할까?

홈페이지에서 이미지는 첫인상을 만드는 중요한 요소입니다. 메인 비주얼, 배너, 카드 썸네일, 갤러리 이미지처럼 화면 곳곳에 이미지를 사용하면 디자인은 풍부해지지만, 이미지가 많아질수록 페이지가 무겁게 느껴질 수 있습니다.

이때 모든 이미지를 같은 방식으로 불러오기보다, 먼저 보여야 하는 이미지와 나중에 불러와도 되는 이미지를 구분하는 것이 중요합니다. 이 기준을 잡을 때 확인할 수 있는 HTML 속성이 loading="lazy"와 fetchpriority입니다.

loading="lazy"는 화면 아래쪽 이미지처럼 바로 필요하지 않은 이미지를 늦게 불러오는 데 활용할 수 있고, fetchpriority는 중요한 이미지를 더 우선적으로 불러오도록 힌트를 줄 때 사용할 수 있습니다.

lazy loading은 어떤 역할을 할까요?

loading="lazy"는 이미지가 처음부터 모두 로딩되지 않도록 도와주는 HTML 속성입니다.

<img src="portfolio-01.jpg" alt="포트폴리오 이미지" loading="lazy">

이렇게 작성하면 브라우저는 해당 이미지가 바로 필요한지 판단하고, 화면에 가까워질 때 로딩을 진행할 수 있습니다. 이미지가 많은 카드 목록이나 갤러리에서는 처음 화면에 보이지 않는 이미지까지 모두 불러올 필요가 없을 수 있습니다. 아래쪽 이미지를 나중에 불러오면 초기 로딩 부담을 줄이는 데 도움이 됩니다.

어떤 이미지에 lazy loading을 적용하면 좋을까요?

loading="lazy"는 사용자가 처음 화면에서 바로 보지 않는 이미지에 적용하는 편이 좋습니다.

예를 들어 아래와 같은 이미지에 검토할 수 있습니다.

핵심은 “처음 화면에 꼭 필요한 이미지인가?”를 먼저 보는 것입니다. 사용자가 스크롤해야 볼 수 있는 이미지라면 lazy loading을 적용할 수 있는 후보가 됩니다.

메인 비주얼에는 lazy loading을 조심해야 합니다

반대로 첫 화면에서 바로 보여야 하는 이미지는 신중하게 다뤄야 합니다.

예를 들어 홈페이지 메인 비주얼, 상단 배너, 첫 화면의 큰 대표 이미지는 사용자가 페이지에 들어오자마자 보는 요소입니다. 이런 이미지에 loading="lazy"를 넣으면 오히려 이미지 표시가 늦어져 첫 화면이 비어 보이거나 느리게 느껴질 수 있습니다.

<!-- 첫 화면의 중요한 이미지는 lazy 적용을 신중하게 판단 -->
<img src="main-visual.jpg" alt="서비스 메인 이미지">

특히 메인 비주얼 이미지가 페이지에서 가장 크게 보이는 요소라면 LCP에도 영향을 줄 수 있습니다. 이런 경우에는 늦게 불러오기보다 빠르게 발견되고 표시되도록 구성하는 편이 좋습니다.

fetchpriority는 언제 사용할까요?

fetchpriority는 브라우저에 특정 리소스의 우선순위를 알려주는 속성입니다. 이미지에 사용할 때는 아래처럼 작성할 수 있습니다.

<img src="main-visual.jpg" alt="서비스 메인 이미지" fetchpriority="high">

이 속성은 “이 이미지는 다른 이미지보다 더 빨리 가져오는 것이 중요하다”는 힌트를 주는 역할을 합니다. 예를 들어 첫 화면 메인 비주얼이나 중요한 대표 이미지처럼 사용자가 바로 보게 되는 이미지는 fetchpriority="high"를 검토할 수 있습니다. 반대로 아래쪽 이미지에는 무리해서 높은 우선순위를 줄 필요가 없습니다.

lazy loading과 fetchpriority는 어떻게 나눠 볼까요?

둘은 역할이 다릅니다.

loading="lazy"는 이미지를 나중에 불러오게 하는 방향이고, fetchpriority="high"는 중요한 이미지를 더 우선적으로 불러오게 하는 방향입니다.

정리하면 이렇게 볼 수 있습니다.

중요한 이미지는 먼저, 아래쪽 이미지는 나중에 불러오는 식으로 나누는 것이 기본 방향입니다.

카드 목록 이미지 예시

카드형 포트폴리오 목록에서는 첫 줄에 보이는 이미지와 아래쪽에 있는 이미지를 다르게 볼 수 있습니다.

<section class="portfolio-list">
    <article class="card">
        <img src="portfolio-01.jpg" alt="포트폴리오 1">
        <h3>프로젝트 제목</h3>
    </article>

    <article class="card">
        <img src="portfolio-02.jpg" alt="포트폴리오 2" loading="lazy">
        <h3>프로젝트 제목</h3>
    </article>
</section>

첫 화면에 바로 보이는 이미지는 기본 로딩으로 두고, 스크롤 후 보이는 이미지는 loading="lazy"를 적용하는 식입니다. 카드가 많을수록 이런 구분이 중요해집니다. 이미지가 3~4개인 페이지보다 20개 이상 반복되는 페이지에서 로딩 전략 차이가 더 크게 느껴질 수 있습니다.

picture 태그와 함께 사용할 수 있을까요?

picture 태그를 사용하는 경우에도 실제 이미지를 표시하는 img 태그에 loading이나 fetchpriority를 함께 검토할 수 있습니다.

<picture>
    <source srcset="main-visual.webp" type="image/webp">
    <img src="main-visual.jpg" alt="서비스 메인 이미지" fetchpriority="high">
</picture>

picture는 화면 조건이나 이미지 포맷에 따라 어떤 이미지를 보여줄지 정하는 구조이고, loading과 fetchpriority는 이미지를 언제, 어떤 우선순위로 불러올지에 가깝습니다. 따라서 반응형 이미지 구성과 로딩 최적화는 함께 확인하는 것이 좋습니다.

적용 전 확인할 부분

이미지 로딩 속성을 적용할 때는 단순히 속성을 많이 넣는 것보다, 이미지의 위치와 역할을 구분하는 것이 먼저입니다.

적용 전에는 아래 내용을 확인하는 것이 좋습니다.

특히 fetchpriority="high"를 여러 이미지에 무리하게 넣으면 우선순위의 의미가 흐려질 수 있습니다. 중요한 이미지에 제한적으로 사용하는 편이 좋습니다.

디자인 소스 수정 시 어떻게 볼 수 있을까요?

HTML 템플릿이나 웹디자인 소스를 수정할 때는 이미지가 어디에 배치되어 있는지 먼저 확인해야 합니다.

예를 들어 메인 비주얼 이미지는 사용자가 들어오자마자 보는 영역이기 때문에 빠르게 표시되어야 합니다. 반면 포트폴리오 카드 목록, 갤러리 하단 이미지, 후기 섹션 이미지는 스크롤 후 확인하는 경우가 많아 lazy loading을 검토할 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 이미지의 역할을 나눠 보는 것이 좋습니다. 메인 비주얼, 배너, 카드 썸네일, 갤러리 이미지가 같은 방식으로 로딩되는지 확인하고, 필요한 경우 loading="lazy"와 fetchpriority를 구분해 적용하면 더 가벼운 화면 구성을 검토할 수 있습니다.

자주 묻는 질문

이미지는 위치와 중요도에 따라 다르게 불러와야 합니다

이미지 최적화는 모든 이미지를 늦게 불러오는 작업이 아닙니다. 사용자가 처음 보는 이미지는 빠르게 보여주고, 아래쪽에 있는 이미지는 필요한 시점에 불러오도록 나누는 작업에 가깝습니다.

loading="lazy"는 카드 목록이나 갤러리처럼 아래쪽에 있는 이미지를 늦게 불러오는 데 도움이 될 수 있고, fetchpriority는 첫 화면에서 중요한 이미지를 더 우선적으로 불러오도록 힌트를 줄 때 검토할 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 메인 비주얼, 배너, 포트폴리오 카드, 갤러리 이미지처럼 다양한 이미지가 함께 들어갑니다. 이때 이미지의 위치와 중요도를 기준으로 로딩 방식을 구분하면 템플릿 구조를 유지하면서도 더 가벼운 화면 구성을 검토할 수 있습니다.