<img srcset="image-400w.webp 400w,
             image-800w.webp 800w,
             image-1200w.webp 1200w,
             image-1600w.webp 1600w"
     sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
     src="image-800w.webp"
     alt="설명">

.image-container {
  width: 800px;
  height: 600px;
}

.responsive-image {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.image-container {
  width: 100%;
  height: 400px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover, contain, fill, none, scale-down */
  object-position: center; /* 또는 top, bottom, left, right */
}

<picture>
  <!-- 모바일: 세로로 크롭된 이미지 -->
  <source media="(max-width: 767px)"
          srcset="portrait.webp"
          type="image/webp">
  
  <!-- 태블릿: 정사각형 크롭 -->
  <source media="(max-width: 1023px)"
          srcset="square.webp"
          type="image/webp">
  
  <!-- 데스크톱: 와이드 이미지 -->
  <source srcset="landscape.webp"
          type="image/webp">
  
  <!-- Fallback -->
  <img src="landscape.jpg" alt="설명">
</picture>

<!-- 일반 이미지 -->
<img src="image.jpg" loading="lazy" alt="설명">

<!-- 중요한 히어로 이미지 -->
<img src="hero.jpg" fetchpriority="high" alt="히어로">

Cache-Control: public, max-age=31536000, immutable

<!-- 중요한 이미지 미리 로드 -->
<link rel="preload" as="image" href="hero.webp" type="image/webp">

convert input.jpg -quality 85 output.jpg

sharp('input.jpg')
  .resize(1920, 1080)
  .webp({ quality: 80 })
  .toFile('output.webp');

cwebp -q 80 input.jpg -o output.webp

avifenc --min 0 --max 63 -a end-usage=q -a cq-level=32 input.jpg output.avif

https://res.cloudinary.com/demo/image/upload/
  w_800,h_600,c_fill,q_auto,f_auto/sample.jpg

<link rel="preload" as="image" href="hero.webp" type="image/webp">
<img src="hero.webp" fetchpriority="high" width="1920" height="1080" alt="히어로 이미지">

.hero {
  background-image:
    image-set(
      url("hero.avif") type("image/avif"),
      url("hero.webp") type("image/webp"),
      url("hero.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center;
}

<img src="header.jpg"
     width="600"
     height="200"
     alt="프로모션 헤더"
     style="display: block; border: 0;">

<img src="tiny-blurred.jpg"
     data-src="full-quality.jpg"
     class="lqip"
     alt="설명">

<script>
// Intersection Observer로 고화질 로드
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lqip');
      observer.unobserve(img);
    }
  });
});
</script>

<style>
.lqip {
  filter: blur(20px);
  transition: filter 0.3s;
}
</style>

// Blurhash 예시
const blurhash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
// 클라이언트에서 이 문자열로 블러 이미지 생성

<picture>
  <!-- 모바일: 얼굴 중심 세로 크롭 -->
  <source media="(max-width: 767px)"
          srcset="portrait-mobile.webp">
  
  <!-- 태블릿: 중간 크롭 -->
  <source media="(max-width: 1023px)"
          srcset="landscape-tablet.webp">
  
  <!-- 데스크톱: 전체 와이드 -->
  <source srcset="landscape-desktop.webp">
  
  <img src="landscape-desktop.jpg" alt="제품 사진">
</picture>

원본: https://cdn.example.com/image.jpg
리사이즈: https://cdn.example.com/image.jpg?w=800&h=600
포맷 변환: https://cdn.example.com/image.jpg?format=webp
품질 조정: https://cdn.example.com/image.jpg?quality=85
크롭: https://cdn.example.com/image.jpg?crop=faces&w=400&h=400

// Accept 헤더 기반 최적 포맷 제공
const supportsWebP = req.headers.accept.includes('image/webp');
const supportsAVIF = req.headers.accept.includes('image/avif');

if (supportsAVIF) return 'image.avif';
if (supportsWebP) return 'image.webp';
return 'image.jpg';

/* 로딩 중 blur 효과 */
.image-loading {
  filter: blur(10px);
  transform: scale(1.1);
}

/* 로드 완료 */
.image-loaded {
  filter: blur(0);
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}

/* 호버 효과 */
.product-image:hover {
  filter: brightness(1.1) contrast(1.05);
}

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      imageObserver.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.1,
  rootMargin: '50px'
});

document.querySelectorAll('.lazy-image').forEach(img => {
  imageObserver.observe(img);
});

<img srcset="image-400w.webp 400w,
             image-800w.webp 800w,
             image-1200w.webp 1200w,
             image-1600w.webp 1600w"
     sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
     src="image-800w.webp"
     alt="설명">

.image-container {
  width: 800px;
  height: 600px;
}

.responsive-image {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.image-container {
  width: 100%;
  height: 400px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover, contain, fill, none, scale-down */
  object-position: center; /* 또는 top, bottom, left, right */
}

<picture>
  <!-- 모바일: 세로로 크롭된 이미지 -->
  <source media="(max-width: 767px)"
          srcset="portrait.webp"
          type="image/webp">
  
  <!-- 태블릿: 정사각형 크롭 -->
  <source media="(max-width: 1023px)"
          srcset="square.webp"
          type="image/webp">
  
  <!-- 데스크톱: 와이드 이미지 -->
  <source srcset="landscape.webp"
          type="image/webp">
  
  <!-- Fallback -->
  <img src="landscape.jpg" alt="설명">
</picture>

<!-- 일반 이미지 -->
<img src="image.jpg" loading="lazy" alt="설명">

<!-- 중요한 히어로 이미지 -->
<img src="hero.jpg" fetchpriority="high" alt="히어로">

Cache-Control: public, max-age=31536000, immutable

<!-- 중요한 이미지 미리 로드 -->
<link rel="preload" as="image" href="hero.webp" type="image/webp">

convert input.jpg -quality 85 output.jpg

sharp('input.jpg')
  .resize(1920, 1080)
  .webp({ quality: 80 })
  .toFile('output.webp');

cwebp -q 80 input.jpg -o output.webp

avifenc --min 0 --max 63 -a end-usage=q -a cq-level=32 input.jpg output.avif

https://res.cloudinary.com/demo/image/upload/
  w_800,h_600,c_fill,q_auto,f_auto/sample.jpg

<link rel="preload" as="image" href="hero.webp" type="image/webp">
<img src="hero.webp" fetchpriority="high" width="1920" height="1080" alt="히어로 이미지">

.hero {
  background-image:
    image-set(
      url("hero.avif") type("image/avif"),
      url("hero.webp") type("image/webp"),
      url("hero.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center;
}

<img src="header.jpg"
     width="600"
     height="200"
     alt="프로모션 헤더"
     style="display: block; border: 0;">

<img src="tiny-blurred.jpg"
     data-src="full-quality.jpg"
     class="lqip"
     alt="설명">

<script>
// Intersection Observer로 고화질 로드
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lqip');
      observer.unobserve(img);
    }
  });
});
</script>

<style>
.lqip {
  filter: blur(20px);
  transition: filter 0.3s;
}
</style>

// Blurhash 예시
const blurhash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
// 클라이언트에서 이 문자열로 블러 이미지 생성

<picture>
  <!-- 모바일: 얼굴 중심 세로 크롭 -->
  <source media="(max-width: 767px)"
          srcset="portrait-mobile.webp">
  
  <!-- 태블릿: 중간 크롭 -->
  <source media="(max-width: 1023px)"
          srcset="landscape-tablet.webp">
  
  <!-- 데스크톱: 전체 와이드 -->
  <source srcset="landscape-desktop.webp">
  
  <img src="landscape-desktop.jpg" alt="제품 사진">
</picture>

원본: https://cdn.example.com/image.jpg
리사이즈: https://cdn.example.com/image.jpg?w=800&h=600
포맷 변환: https://cdn.example.com/image.jpg?format=webp
품질 조정: https://cdn.example.com/image.jpg?quality=85
크롭: https://cdn.example.com/image.jpg?crop=faces&w=400&h=400

// Accept 헤더 기반 최적 포맷 제공
const supportsWebP = req.headers.accept.includes('image/webp');
const supportsAVIF = req.headers.accept.includes('image/avif');

if (supportsAVIF) return 'image.avif';
if (supportsWebP) return 'image.webp';
return 'image.jpg';

/* 로딩 중 blur 효과 */
.image-loading {
  filter: blur(10px);
  transform: scale(1.1);
}

/* 로드 완료 */
.image-loaded {
  filter: blur(0);
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}

/* 호버 효과 */
.product-image:hover {
  filter: brightness(1.1) contrast(1.05);
}

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      imageObserver.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.1,
  rootMargin: '50px'
});

document.querySelectorAll('.lazy-image').forEach(img => {
  imageObserver.observe(img);
});