Skip to main content

Image Size Recommendations

High-quality, fast-loading images are essential for building customer trust and improving conversion rates.

💡 Key Recommendations:

  • Use WEBP format whenever possible—it offers superior compression and quality.
  • Avoid GIFs, especially animated ones, as they are large and slow to load.
  • JPG or PNG files are acceptable in limited cases, but always convert them to WEBP to reduce file size and improve page speed.
  • Always compress images before uploading (tools like Squoosh or TinyPNG work well).

🖼️ Theme Editor Images​

When uploading images directly in the Scenario Theme Editor (e.g., banners, icons, custom sections), you’ll see a recommended size displayed below the image picker, for example:

Recommended image size

Recommended size: 1920 × 960 px

These dimensions are optimized for visual quality and performance.
✅ You may use other aspect ratios if needed for your brand—but following the suggested sizes is the best starting point for consistency and speed.

📦 Product Images​

Product images are critical to conversion. Choose the right aspect ratio and resolution based on your product type.

  • Square (1:1) – ideal for electronics, cosmetics, or items viewed head-on
  • Portrait (3:4) – better for tall or vertical products like clothing, bottles, or furniture
  • Square:
    • Standard: 1600 × 1600 px
    • 2K/High-DPI support: 2560 × 2560 px
  • Portrait:
    • Standard: 1200 × 1600 px
    • 2K/High-DPI support: 2400 × 3200 px

✅ Pro Tip: Once you choose a ratio and size, use it consistently across all product images. Uniformity creates a clean, professional product grid and improves user experience.

🗂️ Collection Images​

Collection images typically appear as horizontal banners on collection pages.

  • We recommend using WEBP format at 3560 × 700 px for full-width clarity.
  • You may adjust the height to match your design needs (e.g., 600px or 800px tall), but keep the width wide enough to avoid stretching on large screens.

📘 For setup instructions, refer to Shopify’s guide on collection images.

📝 Blog Post Images​

Blog images are used on your homepage, blog index, and social shares.

  • Recommended size: 1600 × 900 px (16:9 aspect ratio) in WEBP format
  • This size ensures crisp display on desktop and mobile while maintaining fast load times.

📘 Learn how to manage blog images in Shopify’s blog documentation.

✂️ Image Cropping​

All sections in the Scenario theme include built-in image cropping controls with preset aspect ratios (e.g., square, landscape, portrait).

Enable image cropping and ratio settings

✅Supported image ratio:

  • Custom (3:1)
  • Ultrawide (21:9)
  • Double-width (2:1)
  • Widescreen/HD (16:9)
  • Classic/DSLR (3:2)
  • ISO Paper (1.4:1)
  • Standard Definition/SD (4:3)
  • Landscape (5:4)
  • Square (1:1)
  • Instagram Portrait (4:5)
  • Portrait Photography (3:4)
  • Pinterest Pin Ratio (2:3)
  • Portrait (9:16)

✅ Best Practice: Upload images at higher resolution than the display size (e.g., 2560px wide for a 1200px display area).
This ensures:

  • Sharp quality on high-DPI (Retina) screens
  • Flexibility when adjusting crop settings later
  • Consistent output even if your original images vary in size

By using high-resolution source images, you let the theme handle cropping intelligently—without pixelation or layout shifts.