画像の最適化ベストプラクティス

<!-- 次世代フォーマットの使用例 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明文" width="800" height="600">
</picture>

<img 
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="fallback.jpg" 
  alt="説明文">

<picture>
  <source media="(max-width: 600px)" srcset="mobile-crop.jpg">
  <source media="(max-width: 1200px)" srcset="tablet-crop.jpg">
  <img src="desktop.jpg" alt="説明文">
</picture>

<!-- ネイティブ遅延読み込み -->
<img src="image.jpg" loading="lazy" alt="説明文">

<!-- Intersection Observer APIを使用した遅延読み込み -->
<img data-src="image.jpg" class="lazy" alt="説明文">

// JavaScript実装例
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll("img.lazy");
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  
  lazyImages.forEach(img => observer.observe(img));
});

<!-- 画像サイズの明示によるCLSの防止 -->
<img 
  src="image.jpg" 
  width="800" 
  height="600" 
  alt="説明文">

<!-- Cloudinaryの例 -->
<img 
  src="https://res.cloudinary.com/example/image/upload/w_800,q_auto,f_auto/sample.jpg" 
  alt="説明文">

<!-- 良い例 -->
<img 
  src="chart.png" 
  alt="2023年度の四半期売上グラフ: Q1: 100万円、Q2: 150万円、Q3: 120万円、Q4: 200万円" 
  width="600" 
  height="400">

<!-- 装飾的な画像 -->
<img 
  src="decorative.jpg" 
  alt="" 
  role="presentation" 
  width="300" 
  height="200">

<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">売上チャート</title>
  <desc id="chart-desc">2023年度の四半期ごとの売上推移グラフ</desc>
  <!-- SVGの内容 -->
</svg>

/* アスペクト比を維持して、コンテナにフィットさせる */
.thumbnail {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

/* 複数画像の均一表示 */
.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/* モダンなアプローチ */
.aspect-ratio-box {
  aspect-ratio: 16 / 9;
}

/* 代替手法 */
.aspect-ratio-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9のアスペクト比 */
}
.aspect-ratio-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}