Recommended Size for Images

In this guide, you’ll find the exact dimensions and aspect ratios for different image types in GemPages, from product images to hero banners. Following these standards helps you maintain consistency across your store and ensures a smooth experience on every device.

Image Types and Dimensions in GemPages

The table below summarizes the recommended image sizes and aspect ratios for each type of visual element in GemPages. Use this as a quick reference before uploading your images.

Let’s take a closer look at each image type to understand its purpose, best practices, and optimization tips.

1. Product Image

• Recommended size: 2048 x 2048 px (1:1)
• Purpose: Showcase your product with high clarity, especially for zoom effects.
• Tip: Use a clean background to keep the focus on your product.

2. Collection Image

• Recommended size: 1024 x 1024 px (1:1)
• Purpose: Represent product collections consistently across the store.
• Tip: Keep it visually simple so it doesn’t compete with product images.

3. Background Image

• Recommended size: 1920 x 1080 px (16:9)
• Purpose: Backgrounds for sections like hero banners, promotions, or testimonials.
• Tip: Use subtle textures or gradients so text and products remain visible.

4. Hero Banner

• Recommended size: 1920 x 1080 px (16:9)
• Purpose: Large, impactful banners at the top of the homepage or landing pages.
• Tip: Place the main content within the center area to avoid cropping.

5. Slideshow Image

• Recommended size: 1920 x 1080 px (16:9)
• Purpose: Rotate promotions, seasonal campaigns, or multiple featured products.
• Tip: Maintain consistent style across all slides for brand cohesion.

6. Text Overlay Image

• Recommended size: 1920 x 1080 px (16:9)
• Purpose: Images designed to hold text for call-to-action sections.
• Tip: Use minimal patterns and contrast-friendly tones for readability.

7. Blog Post Image

• Recommended size: 1920 x 1080 px (16:9)
• Purpose: Featured image for blog articles to improve click-through.
• Tip: Keep the design consistent with your store’s overall branding.

8. Logo Image

• Recommended size: 250 x 250 px (1:1)
• Purpose: Ensure a sharp display of your brand’s identity across your Shopify store.
• Tip: Use PNG format with a transparent background for flexibility.

Responsive Image Support in GemPages

GemPages allows you to upload different image sizes for desktop, tablet, and mobile views. This ensures your images are optimized for every screen size:

Best Practices for Image Optimization

• JPEG for product and lifestyle photos
• PNG for logos or images requiring transparency
• SVG for icons and vector graphics

• Use image compression tools such as TinyPNG or similar services.
• Upload the image, then download the compressed version.
• Make sure the image is already resized to the recommended dimensions before compression for best results.

For more information on optimizing your loading speed, refer to this article.

FAQs

1. What happens if I upload images larger than the recommended size?

Larger images will be automatically resized, but may still affect page speed. Always crop and compress before uploading.

2. Can I use square images for banners or slideshows?

It’s not recommended. Non-standard ratios may cause cropping or alignment issues. Always follow the aspect ratio guidelines.

3. Which file format is best for Shopify store images?

• Use JPEG for product and lifestyle photos.
• Use PNG for transparent logos or icons.
• Use SVG for vector-based graphics like icons.

4. How can I make sure images look good on mobile?

Upload optimized images for each device view in GemPages, and keep important content centered to avoid cropping.

5. Why does my image look blurry?

• Use recommended dimensions for each image type.
• Enable Preload for above-the-fold images.
• Upload images optimized for desktop, tablet, and mobile.

6. What tools can I use to crop images before uploading?

You can use external image editing tools to crop and resize your images before uploading to Shopify or GemPages, such as:

• Canva
• Photoshop
• Figma
• Online image editors (e.g. browser-based crop tools)

Always make sure your images are cropped to the recommended dimensions before uploading to avoid unwanted cropping or quality loss.