When i use map the images render slow on localhost. However, when I dont use map it loads quickly.

I used a variety of props from Image component but none seem to fix this issue.

However, after all images rendered and I hit the refresh button they load fast.

This is quite confusing. Is there any way to load images quickly upon first page visit?

import React from 'react';
import Image from 'next/image';
import styles from './Peoples.module.scss';
export const Peoples = () => (
  <>
    {[...Array(10)].map((x, i) => (
      <div className={styles.team_img_container} key={i}>
        <Image
          style={{ height: 100, width: 100 }}
          src={`/people/${i + 1}.webp`}
          alt="Picture of the author"
          width={100}
          height={100}
          // unoptimized={true}
          // loading="eager"
          priority={true}
          // quality={70}
        />
      </div>
    ))}
  </>
);

export default Peoples;