Product Image Recommendations

Overview

Zoey products support both a Main Image and additional Gallery Images.

The Main Image is automatically resized to fit in product lists, category pages, the shopping cart, checkout, search results, and anywhere else the product image appears.

Because of this, we recommend following the guidelines below.

Recommendations

Upload images with a square aspect ratio

Uploading images that are extremely tall or wide can result in undesirable cropping or display issues across the site.

Square images are the most flexible and display best across most layouts.

Recommended Image File Sizes

We recommend keeping images 200KB or smaller.

200KB is a good guideline for maintaining quality while ensuring fast page loads.

This size works well for:

Product images
Background images
Banner images
Zoom images

For product thumbnails, a size around 70KB is ideal.

Even though this seems small, remember that category pages may load dozens of images.

Example:

One banner image at 3.5MB
Fifty product images at 70KB each

Smaller images improve page load performance significantly.

Key rule:
Keep image file sizes as small as possible without sacrificing visual quality.

Recommended Image Dimensions

There are no strict dimension requirements.

However, if you want to take advantage of product image zoom, your images should be larger than the displayed size.

Example:

If your product image container is 500 × 500 pixels, uploading a 1000 × 1000 pixel image allows approximately 2× zoom magnification.

If zoom is not required, smaller images can help reduce file sizes.

Preferred Image Format (.JPG)

Zoey accepts several image formats including:

.jpg
.jpeg
.gif
.png

However, we recommend using .JPG whenever possible because it offers the best balance of compatibility and compression.

⚠️ Do not simply rename a file extension to convert formats.

Instead:

Open the image in an image editor.
Use Save As.
Select the new file format.

Understanding Image Size Terms

When discussing image size, people may be referring to different things:

Term	Description
File Size	The amount of storage space the image uses (KB or MB).
Resolution	Image density measured in DPI (Dots Per Inch) or PPI (Pixels Per Inch).
Dimensions	The width and height of the image, usually measured in pixels (e.g., 500px × 500px).

Since Zoey stores are responsive, pixel dimensions are typically the most relevant measurement.

Upload Large Images With Small File Sizes

For best results:

Keep the largest dimension above 1000px
Keep file size under 200KB

Larger images improve zoom functionality, while smaller file sizes improve performance.

Optimize Images for Zoom

Product zoom activates only when the image’s natural size is larger than the displayed size.

Some themes display product images as large as 700px.

If your uploaded image is smaller than the display size, zoom will not activate.

If the image is excessively large, zoom may appear overly magnified.

Compress Your Images

Uncompressed images take much longer to load.

To improve site performance, compress images before uploading.

Recommended tools:

These tools help reduce file sizes while maintaining visual quality.

Upload High-Quality Images

Even with a beautiful theme, low-quality or pixelated product images can negatively affect the user experience.

Always use high-resolution source images whenever possible.

Don't Ignore Your Gallery Images

Many users upload high-quality main images but low-quality gallery images.

Gallery images follow the same zoom rules as the main image, so they should meet the same quality standards.

Maintain Consistency

The best-looking product catalogs use images with consistent:

Dimensions
Resolutions
Background colors
Cropping

Consistency creates a cleaner, more professional storefront.

Use Neutral Backgrounds

Recommended background colors:

White
Off-white
Transparent
Black

Neutral backgrounds work well with most themes and product layouts.

Use Square Images When Possible

Square images are the most flexible across:

Category pages
Product listings
Product detail pages
Marketing integrations

They are also ideal for Google Shopping feeds.

Banner Images & Product Thumbnails

Banner images can be any size depending on your design needs, but should ideally stay under 70KB.

For product images:

Thumbnails
Small images
Base images

are typically generated automatically from the main product image.

Focus on uploading a high-quality main image and the system will handle resizing.

What Are Image Labels?

Image labels (also called ALT Tags) provide descriptive text for images.

They serve two purposes:

Display helpful information when users hover over an image
Improve accessibility and SEO

Image labels are commonly used for additional gallery images on product pages.

Editing Image Labels (ALT Tags)

To edit image labels:

Open the product settings.
Go to Images.
Hover over the image.
Click the gear icon.
Select Update Image Tags.
Enter an Image Title Tag to display when hovering over the image.

Can Images Affect SEO?

Yes. Images can significantly improve your SEO.

Providing clear image data helps search engines understand and index your content.

Use Descriptive Image Names

Before uploading images to Zoey, rename them with descriptive filenames.

Example: green-t-shirt.jpg

RWD2231.jpg

📘
Best practice is to have the image file name match the SKU it will be linked to.

Use Unique Product Photography

If possible, use your own high-quality product photos instead of manufacturer-provided images.

Unique images help differentiate your store from competitors and may improve search visibility.

Keep Images Mobile-Friendly

Google prioritizes mobile-friendly websites in search rankings.

Large images can slow down mobile page loads.

Optimizing image sizes helps ensure your store passes Google's Mobile Friendly Test and maintains better SEO performance.

Updated 4 days ago