ReactJs Performance ~ Optimizing Images and Assets~

In typical React apps, images account for 50–70% of page weight. Properly optimising them can dramatically improve load times and user experience.

Modern image optimisation checklist

1.Use WebP/AVIF formats, which are 30-50% smaller than JPEG.
2.Implement responsive images to serve the appropriate size.
3.Lazy load off-screen images – defer non-critical images.
4.Use modern image components such as Next.js Image or Gatsby Image.
5.Use modern image components such as Next.js Image or Gatsby Image.
6.Set explicit dimensions to prevent layout shift.
7.Implement placeholders (LQIP or blurred thumbnails).

Image Optimization Implementation:

import Image from 'next/image';

function ProductGallery({ images }) {
  return (
    <div className="gallery">
      {images.map((img, idx) => (
        <Image
          key={img.id}
          src={img.url}
          alt={img.description}
          width={800}
          height={600}
          loading={idx < 3 ? 'eager' : 'lazy'} // Prioritize above-fold
          placeholder="blur"
          blurDataURL={img.thumbnail}
          quality={85}
        />
      ))}
    </div>
  );
}

Image Optimization Impact Table:

Image Optimization Strategies

CDN integration is important, too. Cloudflare Images, Cloudinary and Imgix automatically provide the optimal format, size and compression based on the device making the request. This means that one API call replaces dozens of manual optimisation steps.