コンテンツへスキップ
ドキュメントエラー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>
  )
}