コンテンツにスキップ
ドキュメントエラーimg要素なし

img要素なし

LCP の低下と帯域幅の増加のため、<img> 要素の使用を防ぎます。

このエラーが発生した理由

next/imageの<Image />ではなく、画像を表示するために<img>要素が使用されました。

修正方法

  1. next/imageを使用して、自動化された画像最適化によるパフォーマンスを向上させてください。

注意：マネージドホスティングプロバイダーにデプロイする場合、最適化された画像は元の画像とは異なる料金が請求される可能性があるため、プロバイダーの料金体系を確認してください。

一般的な画像最適化プラットフォームの料金

注意：セルフホストする場合、最適化された画像をキャッシュするために十分なストレージがサーバーにあるか確認し、sharpをインストールすることを忘れないでください。

pages/index.js
import Image from 'next/image'
 
function Home() {
  return (
    <Image
      src="https://example.com/hero.jpg"
      alt="Landscape picture"
      width={800}
      height={500}
    />
  )
}
 
export default Home
  1. ぼかしプレースホルダーのようなnext/imageの機能を使用したいが、画像最適化を無効にしたい場合は、unoptimizedを使用できます。
pages/index.js
import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}
  1. ネストされた<img>要素を持つ<picture>要素を使用することもできます。
pages/index.js
function Home() {
  return (
    <picture>
      <source srcSet="https://example.com/hero.avif" type="image/avif" />
      <source srcSet="https://example.com/hero.webp" type="image/webp" />
      <img
        src="https://example.com/hero.jpg"
        alt="Landscape picture"
        width={800}
        height={500}
      />
    </picture>
  )
}
  1. カスタム画像ローダーを使用して画像を最適化できます。カスタムローダーのパスをloaderFileに設定してください。
next.config.js
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my/image/loader.js',
  },
}