WebP/AVIF非対応ブラウザのフォールバック実装｜picture要素で画像最適化を徹底解説

<picture>
  <!-- WebP形式の画像 -->
  <source srcset="image.webp" type="image/webp">
  <!-- フォールバック用JPEG画像 -->
  <img src="image.jpg" alt="画像の説明" loading="lazy">
</picture>

<picture>
  <!-- AVIF形式の画像（最優先） -->
  <source srcset="image.avif" type="image/avif">
  <!-- WebP形式の画像（第2候補） -->
  <source srcset="image.webp" type="image/webp">
  <!-- JPEG形式の画像（フォールバック） -->
  <img src="image.jpg" alt="画像の説明" loading="lazy" width="800" height="600">
</picture>

<picture>
  <!-- デスクトップ向け（1024px以上） -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-desktop.avif"
    type="image/avif">
  <source
    media="(min-width: 1024px)"
    srcset="hero-desktop.webp"
    type="image/webp">
  <source
    media="(min-width: 1024px)"
    srcset="hero-desktop.jpg"
    type="image/jpeg">
  <!-- タブレット向け（768px以上） -->
  <source
    media="(min-width: 768px)"
    srcset="hero-tablet.avif"
    type="image/avif">
  <source
    media="(min-width: 768px)"
    srcset="hero-tablet.webp"
    type="image/webp">
  <source
    media="(min-width: 768px)"
    srcset="hero-tablet.jpg"
    type="image/jpeg">
  <!-- モバイル向け（デフォルト） -->
  <source srcset="hero-mobile.avif" type="image/avif">
  <source srcset="hero-mobile.webp" type="image/webp">
  <!-- フォールバック -->
  <img src="hero-mobile.jpg" alt="ヒーロー画像" loading="lazy" width="1920" height="1080">
</picture>

<picture>
  <!-- 2x解像度（Retina）向けAVIF -->
  <source
    srcset="image-1x.avif 1x, image-2x.avif 2x"
    type="image/avif">
  <!-- 2x解像度（Retina）向けWebP -->
  <source
    srcset="image-1x.webp 1x, image-2x.webp 2x"
    type="image/webp">
  <!-- フォールバック（解像度対応） -->
  <img
    src="image-1x.jpg"
    srcset="image-1x.jpg 1x, image-2x.jpg 2x"
    alt="画像の説明"
    loading="lazy">
</picture>

<IfModule mod_rewrite.c>
  RewriteEngine On
  # AVIFサポートのチェック
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %1\.avif -f
  RewriteRule ^ %1\.avif [L]
  # WebPサポートのチェック
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %1\.webp -f
  RewriteRule ^ %1\.webp [L]
</IfModule>
<IfModule mod_headers.c>
  <FilesMatch "\.(jpe?g|png)$">
    Header append Vary Accept
  </FilesMatch>
</IfModule>

// 画像フォーマット対応を検出する関数
async function checkImageFormatSupport() {
  const formats = {
    avif: 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=',
    webp: 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='
  };
  const support = {};
  for (const [format, dataUrl] of Object.entries(formats)) {
    support[format] = await new Promise((resolve) => {
      const img = new Image();
      img.onload = () => resolve(true);
      img.onerror = () => resolve(false);
      img.src = dataUrl;
    });
  }
  return support;
}
// 使用例
checkImageFormatSupport().then((support) => {
  console.log('AVIF対応:', support.avif);
  console.log('WebP対応:', support.webp);
  // HTML要素にクラスを追加
  if (support.avif) {
    document.documentElement.classList.add('avif');
  } else if (support.webp) {
    document.documentElement.classList.add('webp');
  }
});

/* デフォルト（JPEG/PNG） */
.hero-section {
  background-image: url('hero.jpg');
}
/* WebP対応ブラウザ */
.webp .hero-section {
  background-image: url('hero.webp');
}
/* AVIF対応ブラウザ */
.avif .hero-section {
  background-image: url('hero.avif');
}

// 画像の遅延読み込みとフォーマット選択
class AdaptiveImageLoader {
  constructor() {
    this.formatSupport = null;
    this.init();
  }
  async init() {
    // フォーマット対応を検出
    this.formatSupport = await this.checkFormats();
    // Intersection Observerを設定
    this.setupObserver();
  }
  async checkFormats() {
    const formats = {
      avif: 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=',
      webp: 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='
    };
    const support = {};
    for (const [format, dataUrl] of Object.entries(formats)) {
      support[format] = await new Promise((resolve) => {
        const img = new Image();
        img.onload = () => resolve(true);
        img.onerror = () => resolve(false);
        img.src = dataUrl;
      });
    }
    return support;
  }
  setupObserver() {
    const images = document.querySelectorAll('img[data-src]');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          this.loadImage(entry.target);
          observer.unobserve(entry.target);
        }
      });
    });
    images.forEach((img) => observer.observe(img));
  }
  loadImage(img) {
    const basePath = img.dataset.src;
    let imagePath;
    // 対応フォーマットに応じて画像パスを決定
    if (this.formatSupport.avif) {
      imagePath = basePath.replace(/\.(jpg|png)$/, '.avif');
    } else if (this.formatSupport.webp) {
      imagePath = basePath.replace(/\.(jpg|png)$/, '.webp');
    } else {
      imagePath = basePath;
    }
    // 画像を読み込む
    img.src = imagePath;
    img.removeAttribute('data-src');
  }
}
// 初期化
new AdaptiveImageLoader();

<!-- data-src属性に元の画像パスを指定 -->
<img data-src="images/photo.jpg" alt="写真" class="lazy-image">

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]'
        }
      }
    ]
  },
  plugins: [
    new ImageMinimizerPlugin({
      generator: [
        {
          // AVIF生成
          preset: 'avif',
          implementation: ImageMinimizerPlugin.sharpGenerate,
          options: {
            encodeOptions: {
              avif: {
                quality: 80
              }
            }
          }
        },
        {
          // WebP生成
          preset: 'webp',
          implementation: ImageMinimizerPlugin.sharpGenerate,
          options: {
            encodeOptions: {
              webp: {
                quality: 85
              }
            }
          }
        }
      ]
    })
  ]
};

// gulpfile.js
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');
const avif = require('gulp-avif');
// WebP変換タスク
gulp.task('webp', () => {
  return gulp.src('src/images/**/*.{jpg,png}')
    .pipe(webp({ quality: 85 }))
    .pipe(gulp.dest('dist/images'));
});
// AVIF変換タスク
gulp.task('avif', () => {
  return gulp.src('src/images/**/*.{jpg,png}')
    .pipe(avif({ quality: 80 }))
    .pipe(gulp.dest('dist/images'));
});
// 元画像の最適化
gulp.task('images', () => {
  return gulp.src('src/images/**/*.{jpg,png}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});
// すべての画像処理を実行
gulp.task('default', gulp.parallel('webp', 'avif', 'images'));

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  }
};
// Reactコンポーネント内
import Image from 'next/image';
function MyComponent() {
  return (
    <Image
      src="/images/photo.jpg"
      alt="写真"
      width={800}
      height={600}
      priority={false}
    />
  );
}