Since your customers can't see your merchandise in person, having great product photos is the next best thing. Product images can be shown on the category page(s) to which it's assigned, the cart, and on your homepage as a new or featured product.
For best results, you should always save a product's basic information (Name, Code, Price, and Weight) before adding images or videos. This will help ensure quicker load times and fewer upload errors.
To upload a product image:
- Go to Inventory > Products in your Admin Area.
- Click on the product code of the product you're adding images to.
- Under the Image Management section, click Add.
- Click Browse to find the corresponding image file.
- If you need to change the size dimensions for each version of your image, click Advanced Settings.*
- Click Upload.
Repeat these steps as needed to add more images. Keep reading to make sure you're making the most of your product images.
* Each photo size has a specific use on your storefront, as well as a default Maximum Pixel Size value. The Product Image column in the Advanced Settings dialog box describes each image's use on your storefront.
Smaller, Smarter Images
Digital camera technology has come a long way, so even the most basic cameras produce images that are larger than you need for your storefront. Since the images will be automatically resized when you upload them to your site, there’s no need to use such large photos – the excess will just use extra bandwidth and slow your site.
Once an image is uploaded into your Assets folder, its file size (number of kilobytes) cannot be changed, so you should resize your images before you upload them.
Note that in this article we’ll use the term “file size” to indicate the size of the file in kilobytes, and “image size” to describe the dimensions of the image in pixels.
Resize Your Image
You want your image size to be as close as possible to the storefront image size before you upload it. The homepage area of most store templates is a maximum of 900 pixels wide, so an image width of 900 pixels is a good target for resizing images that will appear on your homepage. If your store uses the right-side homepage sections (Super Deals, New Products, and Top Sellers), 600 pixels is a better size.
For tips on sizing images that will appear on product pages, see below.
There are two ways to resize your images:
- Cropping: You can crop the image to focus on the product and exclude any unnecessary background. Most image editing software allows you to crop photos by selecting the part of the image you want to use, then trimming the excess.
- Resizing: If you resize an image to a smaller size, make sure you maintain the aspect ratio (keep the same proportions) of the image so it doesn’t become stretched and distorted.
For best results, you might try a combination of these two methods. For example, if you’re using photos from your iPhone:
- Original iPhone image (1936 x 2592px) = 2,330 Kb
- Cropped (1136 x 1339) = 956 KB
- Resized to 800px wide (800 x 943px) = 546 Kb
When you save a JPG image file, the application usually lets you choose an image quality.
For photos that are going to be used online, you can generally save to as low as 80% ("Very High") without any noticeable deterioration in image quality. If we save the image from our example above at 80%, we are able to further reduce its file size:
- Saved at 80% (800 x 943px) = 137 Kb
Product Image Zoom Feature
If you're resizing images for products, you may want to make the resized image as large as 1200px. Unless you've modified it, your store's default High Resolution Zoom Image (large) image size is set to 1200px. This ensures that when customers hover over a product image to "zoom in", the resulting zoom is much larger than the original image.
To learn more about the photo size requirements for the Image Zoom feature, see Product Image Zoom Feature.
If you have a lot of images on your website, resizing and saving them individually can be very time consuming. There are plenty of free programs available online that allow you to edit, resize, and change the save quality of all the images in a directory with a few clicks. It can't automatically crop your images, but it can greatly speed up the process of resizing them.
Protecting Your Images
Once you’ve augmented your storefront with great images, you can protect your investment by enabling Protect Product Images in your Settings > Config Variables. Now, visitors who try to copy and save a photo by right-clicking on it will get a Sorry, Our Images are Copyrighted dialog box.
For more information, see our article on taking Picture Perfect Product Photos.