Ultimate Guide to Optimal Image Sizes

The best image sizes for your website depend on the type of content and layout you're using.

Yes, it's always better to resize and optimize images before uploading them to your website. This helps with:

  • Faster Page Load Speeds – Reduces file size and improves user experience.
  • Better SEO – Google prioritizes fast-loading pages.
  • Consistent Design – Ensures uniformity across your website.

Best Practices for Image Optimization:

  • Use the right dimensions – Resize images to the exact size needed for display.
  • Compress images – Use tools like TinyPNG, JPEG-Optimizer, or WebP format.
  • Use the right format:
    • JPEG – Best for photos.
    • PNG – Best for transparency.
    • WebP – Best for modern browsers (smaller file sizes, better quality).

Are you looking for tools or automation to help resize and optimize images before uploading

Here’s a general guide for different sections of your website:

1. Blog

  • Featured Image (Hero Image): 1200 x 628 px (recommended for social sharing)
    • This can be set in Blog -> Config
  • In-Content Images: 800 x 600 px or 1200 x 800 px (for better readability)
  • Thumbnails: 150 x 150 px

2. Content

  • Featured Image (Hero Image): 1200 x 628 px (recommended for social sharing)
  • Full width screen image (Hero image): 1920 x 600-800 px
  • In-Content Images: 800 x 600 px or 1200 x 800 px (for better readability)
  • If it only needs to be small, then 400 px in either width or height

3. Shopping Cart & E-commerce

  • Product Images: 800 x 800 px (square for consistency)
  • Category Images: 800 x 800 px 
  • Thumbnails: 200 x 200 px
  • Video: 400 x 300 px
  • This can be set in Cart-> Configuration -> General Settings -> (Tab) Image-Sizes

4. Front Box Sets

  • Banner Images: 1920 x 600-800 px (full-width)
  • Other sizes: 1600 x 480 or 2400 x 940 px
  • Each set can have a different image size, primarily to accommodate various purposes and ensure optimal display across different platforms.

5. Photo Gallery

  • Thumbnails: 600 px  in either width or height
  • Full size: 1200 px  in either width or height
  • This can be set in Photo Gallery -> Configuration

6. General Website & UI

  • Logo: 250 x 100 px (or SVG for scalability) or png
  • Icons: 32 x 32 px or 64 x 64 px