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

img要素なし

LCPの低下と帯域幅の増加につながるため、<img>要素の使用を禁止します。

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

画像をNext.jsの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. blur-upプレースホルダーなどの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',
  },
}