2nd/10_Wiki/Topics/Coding/Frontend_Image_Optimization.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
frontend-image-optimization	Image Optimization — WebP / AVIF / srcset / lazy	Coding	draft	B	conceptual	2026-05-09	2026-05-09	frontend image performance web vibe-coding	language applicable_to TS / React / Next.js Web		next/image srcset sizes AVIF lazy load LCP blurhash

Image Optimization

페이지 무게의 60% = 이미지. WebP/AVIF + responsive (srcset/sizes) + lazy + LCP preload 4종. Next.js <Image> / Cloudinary / imgix / @vercel/og 가 자동 처리.

📖 핵심 개념

• LCP (Largest Contentful Paint): 보통 hero image. 빨리 로드 = SEO + UX.
• Format: AVIF (최신, 작음) → WebP → JPEG. PNG 는 투명 / 도형.
• srcset: 화면 / DPR 별 이미지.
• sizes: layout 기반 어떤 크기 선택할지 hint.

💻 코드 패턴

Next.js <Image>

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="hero"
  width={1200}
  height={600}
  priority // LCP — preload
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
  sizes="(min-width: 1024px) 1200px, 100vw"
/>

일반 HTML

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
  <img src="hero-800.jpg" srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
       sizes="100vw" loading="lazy" decoding="async" width="1600" height="900" alt="hero">
</picture>

Cloudinary (URL 기반 변환)

const url = `https://res.cloudinary.com/x/image/upload/w_800,f_auto,q_auto/hero.jpg`;
// f_auto: 브라우저에 맞는 포맷 자동
// q_auto: 압축 자동

Lazy load (native)

<img loading="lazy" decoding="async" src="..." />
<!-- LCP 는 lazy 금지! -->

Blurhash placeholder

import { Blurhash } from 'react-blurhash';

<div className="relative">
  {!loaded && <Blurhash hash={item.blurhash} width={400} height={300} />}
  <img onLoad={() => setLoaded(true)} src={...} />
</div>

React Native — FastImage (cache + priority)

import FastImage from 'react-native-fast-image';

<FastImage
  source={{ uri, priority: FastImage.priority.high, cache: FastImage.cacheControl.immutable }}
  style={{ width: 200, height: 200 }}
/>

Bitmap subsample (Android)

val opts = BitmapFactory.Options().apply { inSampleSize = 2 } // 1/2 크기
val bmp = BitmapFactory.decodeFile(path, opts)

iOS — UIImage downsampling

func downsample(url: URL, to size: CGSize, scale: CGFloat) -> UIImage? {
    let opts = [kCGImageSourceShouldCache: false] as CFDictionary
    guard let src = CGImageSourceCreateWithURL(url as CFURL, opts) else { return nil }
    let pixel = max(size.width, size.height) * scale
    let dsOpts = [
        kCGImageSourceCreateThumbnailFromImageAlways: true,
        kCGImageSourceShouldCacheImmediately: true,
        kCGImageSourceCreateThumbnailWithTransform: true,
        kCGImageSourceThumbnailMaxPixelSize: pixel,
    ] as CFDictionary
    guard let cg = CGImageSourceCreateThumbnailAtIndex(src, 0, dsOpts) else { return nil }
    return UIImage(cgImage: cg)
}

LCP preload

<link rel="preload" as="image" href="/hero.avif" type="image/avif"
      imagesrcset="/hero-800.avif 800w, /hero-1600.avif 1600w" imagesizes="100vw">

🤔 의사결정 기준

상황	추천
Next.js	<Image>
정적 사이트	<picture> + AVIF/WebP
동적 변환 / CDN	Cloudinary / imgix / Imgproxy
LCP hero	priority + preload + placeholder
무한 스크롤	lazy + blurhash
모바일 native	FastImage / Glide / Coil
사용자 업로드	server 에서 resize + format

❌ 안티패턴

• JPEG only: WebP/AVIF 가 30~50% 작음.
• 원본 표시: 1080p 4MB → 200kB 압축 가능.
• Width/height 누락: layout shift.
• Lazy LCP: 첫 paint 느려짐. priority + preload.
• Fixed sizes 큰 이미지: srcset 필수.
• Decoding sync: paint 블록. decoding="async".
• 이미지 안에 텍스트: SEO 안 됨, 번역 안 됨.

🤖 LLM 활용 힌트

• AVIF/WebP + srcset + sizes + lazy(LCP 제외) + blur placeholder.
• Native = FastImage / Coil / Glide + downsample.

🔗 관련 문서

• Native_Memory_Profiling