Skip to main content

Optimising Images for the Web

Optimize your images for fast loading, responsive design, and high visual quality. Below are the recommended dimensions and file sizes for different use cases.

Small Images (Thumbnails, Icons)​

  • Dimensions: 150–300 px wide
  • File size: 10–50 KB
  • Use cases: Icons, small product thumbnails, user avatars

Medium Images (Content, Inline Visuals)​

  • Dimensions: 600–800 px wide
  • File size: 50–150 KB
  • Use cases: Blog post images, product previews, illustrations

Large Images (Hero, Header, Banner)​

  • Dimensions: 1200–2000 px wide
  • File size: 150–500 KB (up to 1 MB max for high-res or retina)
  • Use cases: Homepage banners, background images, full-width features

⚠️ Optimization Tips​

  • Compress images with tools like Squoosh or TinyPNG.
  • Use modern formats like WebP or AVIF to reduce file size by 50–80%.
  • Avoid uploading images larger than needed — browsers still load the full size.

💡 For icons and logos, use SVG whenever possible for scalability and small file size.