Many websites now require a background image with text overlay as a standard feature, and we also ensure that the background image quality is good. However, due to the larger size of the background image, it takes some time to load, leaving the page blank until the image is loaded. We are going to delve into how we can solve this problem.

Solution

There are other solutions for this problem that primarily utilize the <Image/> component from Next.js and employ Z-index. Even the solution I propose uses the <Image/> component from Next.js, but it is simple and not overwhelming.

1. Let's begin by writing the CSS, incorporating the background image.

    .backgroudImage{
        background-image: url("bg.png");
        height:73%;
        width: 100%;
        background-size :cover;
        background-repeat: no-repeat;
    }
   

2. So here the bg.png is the actual high quality background image and we are also going to write css for the compressed version of the same image and if you wonder why we are using the PNG here It's because the SVG's are generally difficult to compress to KB's , I generally Recommend to Compress your High Quality Image to at least 50 kb or lesser , I recommend this site for Compression, you can use the choice of your's , Let's continue writing the CSS

    .backgroudImageCompressed {
      background-image: url("bg-compressed.png");
      height:73%;
      width: 100%;
      background-size :cover;
      background-repeat: no-repeat;
    }
   

3. Let's begin writing code in our page.tsx / page.jsx

    import Image from "next/image";
    import { useState } from "react";
    import highqualityimage from "path/of/highqualityImg"
    export default function Home() {
    const [imageLoaded, setImageLoaded] = useState<boolean>(false) 
        return (
              <>
                <div className={imageLoaded == true ? "backgroudImageCompressed" : "backgroudImage"}>
                    <h1>Hello World</h1>
                </div>
                 {/* The below line makes use of tailwindCSS so kindly change according to your technology  */}
                <Image onLoad={() => { setImageLoaded(true)}} onError={() => { setImageLoaded(false) }} src={highqualityimage} alt="logo" height={1} width={1} className={imageLoaded ? "hidden" : "bg-gray-500"} />
              </>
         )
    }
   

4. We have two types of images: a high-quality image and a low-quality image, with CSS written for both. Since the high-quality image takes time to load, we first render the low-quality image as a placeholder. In the code, we attempt to load the high-quality image at the 12th line. Once it's loaded, we change the background image to the high-quality one. Until then, the low-quality image remains in place.

5. The image component in 12th line will be visible in pixel size because we gave height={1} and width={1} and it becomes hidden once the high quality image is loaded , we know the image is loaded by onLoad={} property in <Image/> Component

   This solution is easier if you are someone, Who uses tailwind/vanilla CSS and NextJs/ReactJs and get things done without overwhelming much . If you found this helpful Please Like to Show Appreciation. Thank You .