Next.js Discord

Discord Forum

Image Loading Issues

Unanswered
Florida White posted this in #help-forum
Open in Discord
Florida WhiteOP
Hey everyone! I'm having a pretty frustrating issue with image loading on my Next.js site and could really use your expertise

The Problem:
- Images loading slowly
- When I refresh the page, there's a moment where the image isn't there (flash/flicker)
- Particularly noticeable on my homepage with a gallery of 5 photos

What I've already tried:

OptimizedImage component with Next.js Image
- priority={true} on all images
- quality={100}
- Responsive sizes properly configured
- fill with object-cover

Code structure:
<OptimizedImage
src={imageSrc}
alt="Description..."
fill
className="object-cover rounded-3xl"
sizes="(max-width: 640px) 224px, (...)"
quality={100}
priority={true}
/>

✅ Image fetching:
- Images stored in DB (URLs)
- Promise.all() to load banner + images in parallel
- Card filtering to only display those with images

✅ What's configured:
- Externally hosted images
- OptimizedImage component wrapping next/image
- Conditional rendering (no display if no image)

❓ Questions:
1. Is there a better approach to avoid the flash on refresh?
2. Should I preload images differently?
3. Would a placeholder/skeleton be better?
4. Issue with external vs local images?

💻 Stack: Next.js 15, TypeScript, Tailwind, images stored in ImageKitIo
Thanks in advance for your help! 🙏

6 Replies

Florida WhiteOP
import Image from "next/image";
import imageKitLoader from "@/lib/imageKitLoader";

interface OptimizedImageProps {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  fill?: boolean;
  className?: string;
  sizes?: string;
  quality?: number;
  priority?: boolean;
  placeholder?: "blur" | "empty";
  blurDataURL?: string;
}

export function OptimizedImage({
  src,
  alt,
  width,
  height,
  fill = false,
  className = "",
  sizes,
  quality = 100, // Qualité optimisée par défaut
  priority = true,
  placeholder = "blur",
  blurDataURL = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q==",
}: OptimizedImageProps) {
  return (
    <Image
      loader={imageKitLoader}
      src={src}
      alt={alt}
      width={width}
      height={height}
      fill={fill}
      className={className}
      sizes={sizes}
      quality={quality}
      priority={priority}
      placeholder={placeholder}
      blurDataURL={blurDataURL}
    />
  );
}
"use client";

export default function myImageLoader({
  src,
  width,
  quality,
}: {
  src: string;
  width?: number;
  quality?: number;
}) {
  const isLocal = !src.startsWith("http");
  const query = new URLSearchParams();

  const imageOptimizationApi = "azfazf";
  // Your NextJS application URL
  const baseUrl = "azfazfazf;

  const fullSrc = `${baseUrl}${src}`;

  if (width && width > 0) query.set("width", width.toString());
  else query.set("width", "800");
  if (quality && quality > 0) query.set("quality", quality.toString());

  // Get image version for cache invalidation

  if (isLocal && process.env.NODE_ENV === "development") {
    return src;
  }
  if (isLocal) {
    return `${imageOptimizationApi}/image/${fullSrc}?${query.toString()}`;
  }
  return `${imageOptimizationApi}/image/${src}?${query.toString()}`;
}
Florida WhiteOP
up
@Florida White up
Arinji
Can you try with just next/image and using the public dir? I have a feeling your whole optimised image thing is the bottleneck here
Even if not the public dir.. use a public cdn and test the speed and if you see a flicker
@Arinji Can you try with just next/image and using the public dir? I have a feeling your whole optimised image thing is the bottleneck here
Florida WhiteOP
even with the image and the public dir, but i found when im using like this : 
<div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: `url(https://ik.imagekit.io/lzf)`,
          }}


the speed is perfect