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

Technique	Main Effect	Performance Impact	Setup Cost	Notes
WebP	Smaller image payloads than older formats	Helps pages load faster in many cases	Low	Good default choice with fallback support
AVIF	Stronger compression, especially for large assets	Can improve loading performance further	Medium	Better savings, but support strategy should be considered
Responsive images	Sends more appropriate image sizes to each device	Especially effective on mobile	Medium	Reduces unnecessary downloads
Lazy loading	Delays non-critical images until needed	Improves initial page load	Low	Useful for below-the-fold content
Compression	Cuts image weight without changing the layout	Improves delivery speed	Low	Often one of the easiest wins
Explicit dimensions	Reserves space before images load	Prevents layout shift	Low	Important for visual stability
CDN delivery	Serves cached assets closer to users	Improves loading consistency	Medium	Helps at scale and across regions

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.