title: How to preload largest-contentful-paint image in react helmet
body: <p>I received this warning in lighthouse</p>
  <p><a href="https://i.stack.imgur.com/Nzu7i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nzu7i.png" alt="enter image description here" /></a></p>
  <p>I tried doing what that learn more link told me to do, and include a preload tag in the head for the image, but I still get the warning</p>
  <hr />
  <p>I tried this preload tag, the url is the one which is in the browser when I right click the image and select &quot;open in new tab&quot;</p>
  <pre><code>&lt;link rel=&quot;preload&quot; as=&quot;image&quot; href={`https://example.com:8080/src/assets/images/example.webp`} /&gt;
  </code></pre>
  <p>The image is just imported into the jsx component like <code>import banner from &quot;images/banner-large.png&quot;;</code> and then rendered with an image tag like <code>      &lt;img src={example} className=&quot;w-100 banner-img&quot; alt=&quot;Description&quot; /&gt;</code></p>
  <hr />
  <p>I'm also using <code>img-optimizer-loader</code>to web-optimize my images and convert them to webp in my webpack config like below</p>
  <pre><code>{
      test: /\.(gif|png|jpe?g|webm|webp)$/i,
      use: [
        {
          loader: &quot;img-optimize-loader&quot;,
  
          options: {
            compress: {
              // This will transform your png/jpg into webp.
              webp: {
                quality: 75,
              },
              disableOnDevelopment: true,
            },
            name: &quot;[path][name].[ext]&quot;,
          },
        },
      ],
    },
  </code></pre>
  <hr />
  <p>It's worth noting that I import my images like</p>
  <pre><code>import image from 'src/assets/images/example.png'
  </code></pre>
  <p>but because of <code>img-optimize-loader</code>, all my images are converted to webp in the build, and the webp images are the ones displayed.</p>