How to use Next.js Image component with an image sequence?

JavaScript
1

Hi there,

I tried to create an image sequence and it works, but only with the html <img/> tag and not with the Next/Image component.

Actually it works with the Next/Image component but only in dev mode and it works much better then the html <img/> tag, because I can specify the loading priority etc.

However when I deploy the application the images in the image sequence can not be found when I use the Next/Image component.

This is the Next/Image component, much faster then the tag, but it´s not working in production mode:


return (
    <>
      <div className="scroll-img__container">
        <div className="scroll-img__wrapper">
        <Image
            src={`/images/img-sequence/${scrolled
              .toString()
              .padStart(4, '0')}.webp`}
            layout="fill"
            className="img-sequence"
            priority={true}
            quality={1}
            alt="img sequence"
          /> 
        </div>
      </div>
    </>
  );

It works with the <img/> tag, also in production mode:

return (
    <>
      <div className="scroll-img__container">
        <div className="scroll-img__wrapper">
          <img
            src={`./images/img-sequence/${scrolled
              .toString()
              .padStart(4, '0')}.webp`}
            className="img-sequence"
          />
        </div>
      </div>
    </>
  );

This is the entire code for the scroll sequence:

import { useEffect, useState } from 'react';
import Image from 'next/image';

export default function Home() {
  const [count, setCount] = useState(0);
  const [scrolled, setScrolled] = useState(0);

  useEffect(() => {
    window.addEventListener('scroll', scrollProgress);

    return () => window.removeEventListener('scroll', scrollProgress);
  }, []);

  const scrollProgress = () => {
    const scrollPx = document.documentElement.scrollTop;
    const windowHeightPx =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;

    const scrollLength = Math.ceil(((scrollPx / windowHeightPx) * 90) / 1);

    setScrolled(scrollLength);
  };

  // useEffect(() => {
  //   if (count < 90) {
  //     setTimeout(() => {
  //       setCount(count + 1);
  //     }, 50);
  //   } else {
  //     setCount(1);
  //   }
  // }, [count]);

  return (
    <>
      <div className="scroll-img__container">
        <div className="scroll-img__wrapper">
          {/* <Image
            src={`/images/img-sequence/${scrolled
              .toString()
              .padStart(4, '0')}.webp`}
            layout="fill"
            className="img-sequence"
            priority={true}
            quality={1}
            alt="img sequence"
          /> */}
          <img
            src={`./images/img-sequence/${scrolled
              .toString()
              .padStart(4, '0')}.webp`}
            className="img-sequence"
          />
        </div>
      </div>
    </>
  );
}

Does anyone have an idea whats the issue?

2
  • check your nextjs config file for “domain” or “remote” pattern settings
  • are you “accessing” images from “public” folder or “remotely”
3

@bappyasif Thank you for the hint!

I noticed that in my next.config file was added this:

images: {
   unoptimized: true,
}

I deleted this and now my next.config file looks like this:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.experiments = {
      topLevelAwait: true,
    };
    return config;
  },
};

It works now, however the loading time is still to long, even when I compressed the image sequence to a minimum (90images around 130KB).

The image component looks like this now:

    <Image
            src={`/images/img-sequence/${scrolled
              .toString()
              .padStart(4, '0')}.webp`}
            alt="img sequence"
            className="img-sequence"
            layout="fill"
            priority
            quality={1}
            // loading="eager"
          />

I comment out loading="eager" only to test the difference. It is still to slow for a smooth performance.

Is there anything else I could do to improve the loading time?

4
  • purpose of using Image component is to get advantage of “image performance” optimization, which means nextjs will do it for you
  • try only passing “.jpg” and let “nextjs” Image do its thing, see if that improves upon it

happy coding :slight_smile:

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.