이미지 최적화: 지연 로딩과 WebP 형식
이미지에 loading=lazy를 추가하고 최신 WebP 및 AVIF 형식을 제공하며, srcset과 sizes로 반응형 이미지를 사용하고, 레이아웃 이동을 방지하도록 너비와 높이를 명시합니다.
이미지 최적화: 지연 로딩과 WebP 형식은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이미지가 페이지 용량의 대부분을 차지합니다
웹 페이지의 중앙값 용량은 약 2MB이며, 그중 대략 절반을 이미지가 차지합니다. 이미지 최적화는 성능에 가장 큰 영향을 미치는 단일 작업입니다.
최신 형식: WebP와 AVIF
WebP는 비슷한 품질의 JPEG보다 25~35% 작고, 모든 최신 브라우저에서 지원됩니다. AVIF는 더욱 작아 최대 50%까지 줄일 수 있지만 인코딩 속도가 느립니다. 두 형식을 모두 사용하고 대체 수단도 제공하십시오.
picture 요소
<picture>를 사용하여 지원되는 경우 AVIF를 제공하고, 그다음 WebP, 마지막 대체 수단으로 JPEG를 제공합니다.
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>네이티브 지연 로딩
화면 아래쪽에 있는 이미지에 loading="lazy"를 추가합니다. 브라우저가 이미지가 뷰포트에 가까워질 때까지 로드를 미루므로 JavaScript가 전혀 필요하지 않습니다.
<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">
<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">srcset과 sizes를 사용한 반응형 이미지
작은 화면에는 더 작은 이미지를 제공합니다. srcset은 너비와 함께 후보 이미지를 나열하고, sizes는 각 중단점에서 이미지가 표시될 너비를 브라우저에 알려 줍니다.
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="" width="800" height="600">width와 height를 명시적으로 설정하는 이유
브라우저는 width/height 속성을 기준으로 공간을 확보하므로 이미지가 도착할 때 레이아웃이 이동하는 것을 방지할 수 있습니다. 최신 브라우저는 이러한 속성에서 aspect-ratio를 자동으로 계산합니다.
decoding="async"
decoding="async"를 추가하면 브라우저가 메인 스레드 밖에서 이미지를 디코딩할 수 있어, 메인 스레드가 다른 콘텐츠를 그릴 수 있습니다.
<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">이미지 CDN
이미지 CDN(Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images)은 이미지를 즉시 변환합니다. 크기 조정, WebP/AVIF 형식 변환, 압축을 수행하고 엣지 캐시에서 제공합니다.
<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">Next.js Image 컴포넌트
Next.js의 <Image>는 반응형 srcset, WebP 변환, 지연 로딩, 흐림 자리표시자를 기본으로 처리합니다.
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
placeholder="blur"
priority={isHero}
/>JPEG와 PNG 압축하기
WebP로 전환할 수 없다면 최소한 이미지를 압축하십시오. 단일 이미지에는 Squoosh(squoosh.app), 일괄 처리에는 ImageOptim을 사용하거나 빌드 스크립트에서 sharp를 사용하면 됩니다.
아이콘과 로고에 SVG 사용하기
아이콘, 로고 및 모든 벡터 아트에는 SVG를 사용합니다. SVG는 크기를 조정해도 완벽하게 유지되고 용량이 작으며 CSS로 스타일을 지정할 수 있습니다. 작은 SVG는 인라인으로 삽입하여 추가 HTTP 요청을 피하십시오.
빠른 확인
이미지가 뷰포트에 가까워질 때까지 로드를 미루도록 브라우저에 지시하는 HTML 속성은 무엇입니까?
복습: 이미지 최적화
picture 요소를 통해 최신 형식(AVIF, WebP)을 사용합니다. 화면 아래쪽에는 loading="lazy"를 추가하고 대표 이미지에는 fetchpriority="high"를 설정합니다. CLS를 방지하려면 width/height를 명시적으로 설정합니다. 반응형 이미지에는 srcset/sizes를 사용합니다. 이미지 CDN은 변환 작업을 자동화합니다. Next.js Image가 이 모든 작업을 처리합니다. 아이콘에는 SVG를 사용합니다.
자주 묻는 질문
“이미지 최적화: 지연 로딩과 WebP 형식” 강의는 무료인가요?
네 — “이미지 최적화: 지연 로딩과 WebP 형식” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“이미지 최적화: 지연 로딩과 WebP 형식”에서 뭘 배우나요?
이미지에 loading=lazy를 추가하고 최신 WebP 및 AVIF 형식을 제공하며, srcset과 sizes로 반응형 이미지를 사용하고, 레이아웃 이동을 방지하도록 너비와 높이를 명시합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“이미지 최적화: 지연 로딩과 WebP 형식” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Core Web Vitals: LCP, FID, CLS
- Lighthouse 감사와 점수
- 이미지 최적화: 지연 로딩과 WebP 형식
- 코드 분할과 지연 로드 라우트