Product Image Recommendations

Overview

Zoey Products allow for a Main Image, and additional Gallery Images. The Main Image is automatically resized to fit in product lists, category pages, shopping cart, checkout, search or anywhere the product image needs to be represented. For this reason, we have compiled the below recommendations.

Recommendations

Upload images that follow relatively square aspect ratios.

Uploading an image that is super tall or super wide will result in potentially undesirable appearances.

Recommended Image Sizing

We recommend keeping all images to 200KB or less.

200KB has proven to be a good guideline for keeping your images a high quality while still allowing your users to load your site quickly. This is a good size for back ground images, banners and zoomed product images.

70KB is a good size for product Thumbnail images. Although this might not seem like a lot, remember how many images are on each page. On a category page for example, would you rather have the customer slowly load one banner at 3.5MB or have them load 50 product images at 70KB each?

The most important thing to remember with images is to keep their file size small. The smaller the image size, the faster it will load for your users.

How Big Should My Product Images Be?

Although there are not recommended dimensions, if you want to take advantage of the zoom functions on the products page you will need to make sure your images are large enough to enable this. For example, if your product media area in your Product Page Template is 500 x 500 for the main image, you may want to upload an image that is 1000 x 1000 to allow your customers to see up to 2x magnification when they hover and activate the zoom. If you are not using the zoom, you can keep your image smaller and save on file size.

.JPG

There are many types of image file types, such as .jpg, .jpeg, .gif, and .png. Although all of these file types can be accepted and uploaded to Zoey, we recommend keeping to .jpg, one of the most universally known and accepted file types.
Remember not to simply rename a file's file extension to another type of image. If you would like to change the image from one type to another, open this image in a photo editor and "Save As" to change to your new type.

What are File Size, Resolution & Dimensions

There are several items that people could be referring to when they talk about "Image Size".

Upload large images with the lowest file size possible.

We recommend keeping all product images above 1000px for its largest dimension (height or width) and below 200kb in file size (the smaller file-size the better as long as you don't sacrifice quality too much).

Optimize Image Size for Zoom

The Product Image Zoom will activate only when the natural size of the image is larger than the size displayed on the page. In some themes, the product image can be as large as 700px. If your product image is smaller than that, the zoom will not activate. Alternatively, if your image is too large, the zoom may be too much.

Compress your images to get the smallest file-size possible while maintaining quality.

Uncompressed images take much longer for the web browser to load. So to keep your load times fast, keep your images compressed. If you are not a Photoshop wiz or have some other professional image editing software, you can use the following online tools:

• http://www.imageoptimizer.net/
• http://optimizilla.com/
• http://compressjpeg.com/

Upload good quality images.

You may have a beautiful new theme, but bad, pixelated product images just don't look very nice.

Don't Ignore your Gallery

Sometimes users upload nice main images, but poor gallery imaged. Gallery images utilize the same logic for zoom as your main image. So, if possible, make sure you follow the same rules.

Keep it consistent.

The key to good looking product catalogs are images with consistent sizes, resolutions and background colors.

Neutral Background Colors.

White, off-white, transparent or black background colors for your images will all typically work well with any theme as long as it is consistent.

Consider Square Images

Square images, in general, are the most flexible for product images throughout your theme. It's also beneficial if you plan on submitting your products to Google Shopping Feed.

Banner or Product Thumbnail

Banners are completely up to you and your design needs. These can be any size you would like, but keep them under 70KB.

Thumbnails, Small Images and Base Images for products are usually all the same file and will be displayed as needed on the front end. Worry about your main image and let the system do the rest.

What are Image Labels

Image labels can be found in any product's image area from the Product List. They are also called Alt Tags and are used to show additional information when a customer hovers over the image. This is mainly used on the additional images on the product page as shown below.

You can also hover over the above image to see the Alt Tag that was added with HTML

Editing Image Labels / ALT Tags

You can edit the label that is displayed on-hover by setting an ALT Tag for each image.

1. Open the product's settings and go to Images.
2. Hover an image, and click the gear icon, then click Update Image Tags
3. Set a Image Title Tag to display when hovering the image.

Can Images Affect my SEO

Images can help improve your SEO. The more information you give to search engines, the easier you make it for them to send users looking for your content to your page. Here are a few things you can do: