Hi guys, looking for some advice to speed up image load time. some of these images are taking up to 8-10 seconds, most of these are less than 1 MB, the biggest one is the gif at 1.6MB. I have a <Loader/> component that loads while the images load; how could I optimise the code further?
(FYI I removed the tailwind classes)

'use client';
import Image from "next/image";
import { useState, useEffect } from "react";
import Loading from "./Loading";

export default function Home() {
  const [showLoading, setShowLoading] = useState(true);
  const [imagesLoaded, setImagesLoaded] = useState(0);

  const imagesToLoad = 3;

  const handleImageLoad = () => {
    setImagesLoaded((prev) => prev + 1);
  };

  useEffect(() => {
    if (imagesLoaded === imagesToLoad) {
      setShowLoading(false);
    }
  }, [imagesLoaded]);

  return (
    <>
      {showLoading && <Loading />}
      <div>
        <div>
          <a href="https://xyberdreams.com/">
            <div>
              <Image
                src="/animation.gif"
                width={700}
                height={700}
                alt="glasses"
                onLoadingComplete={handleImageLoad}
              />
            </div>
          </a>
        </div>

        <div>
          <div>
            <Image
              src="/image.webp"
              width={400}
              height={400}
              alt="text"
              onLoadingComplete={handleImageLoad}
              className="w-full h-full max-w-[1200px] max-h-[1200px]"
            />
          </div>
        </div>
      </div>
    </>
  );
}