How to Prepare and Format eCommerce Product Images

The more technical aspects of preparing and formatting product photography have always been important. But it is about to get even more important (more on that later). So, we’ve put together an updated starter list of the best way to prepare product photos for your online store once you have the photos. We’ll start by listing the specifications, then we’ll briefly go over why each one is important.

Consistent eCommerce Images Matter

When you are displaying products and services in an online store, it’s common to get the images from lots of sources:

• Product images provided by merch supplier.
• Professional product photography.
• Photos you take with your camera or phone.
• Stock photos for related lifestyle images.
• User-generate image content.

Many times, merchants simply upload the images and consider it done. Other times they format a bit to make sure that they have a small enough file size to load quick — and that’s good, but it is not enough for several reasons.

Not only do images of different shapes and sizes look a bit unprofessional, but they can cause the page to "jump" as the images load. You’ve likely seen this yourself on websites you visit. This is called "layout shift." Sometimes it’s so minor that it does not impact the user experience. Other times it affects the user experience a lot. But it is about to become a critical issue.

Starting in May 2021, Google is adding a series of user experience and page speed metrics to their search algorithms. One of those is called "Cumulative Layout Shift" and it measures the amount of time for all page shifting. This means that if your collections and product pages have inconsistently formatted images it will now negatively impact your SEO.

The Baseline Product Image Specs

Here are our go-to specifications for eCommerce product images — whether you are deploying to DNN Hotcakes Commerce, Squarespace, or another platform.

• File Format: JPEG
• Shape: Square
• Size: 6" x 6"
• Resolution: 150 dpi (compressed)

What Image Format to Use — JPEG, PNG, or WebP?

Another common mistake in eCommerce is to use PNG images for product photos. Most of the time merchants do this because they use a screen-captured image (rather than image download) to get an image. Screen captures usually save to PNG by default.

Another reason merchants use PNG images is when they want to have the product on a transparent background. Sometimes this is necessary, but most times it is to be avoided and there are ways to do this. If you are certain that you need a photographic product image on a transparent background, then the new WebP format is preferable (more on that in a moment).

The reason to use JPEG product images is simple. JPEG holds quality with a smaller download file size for continuous-tone images like photographs. The opposite is true for flat-tone images like logos and line-art ‚ PNG images are smaller, better, and faster for those. So, when you are dealing with product photos, use only JPEGs, even if you have to convert a PNG to do it.

A Note on the WebP Image Format: WebP is a new image format developed by Google. All other things equal, it combines the best of both JPEG and PNG in an even smaller footprint. It is gaining in popularity and may one-day become our base recommendation. The problem is that not all browsers support this new format... yet. Once this new product image format gains more adoption, we will update our recommendation.

The Right Size and Shape for eCommerce Images

We have tested product images on Hotcakes and Squarespace sites across dozens of devices and screen sizes. A six-inch image generally supports image zooming and still looks good while still maintaining a small file download size for speedy page loads.

Square is THE shape of the age. Some themes and products lend themselves better to rectangular images. But if you can standardize to square there are many benefits:

• Looks great on mobile phones but only takes up half the screen, allowing text and call-to-action to remain visible.
• If all your eCommerce product images are square, they are instantly post-able to all social media platforms.
• Square also works great in email campaigns, especially when viewed on mobile devices.

This means you format a product image once and can re-use it many more times. If you can, trim to square for the win.

The Best Product Image Resolution

It can get confusing to talk about resolution. What we are really talking about is number of pixels. And because smartphones have dramatically improved display resolutions so much and customers LOVE to pinch-zoom on products, we have increased our recommendation for product image resolution to 150 dpi compressed.

So, a square image 6” x 6” at 150 dpi will be 900px x 900px. Once you compress it using a standard photo compression tool like tinyjpg or compressjpeg the file will likely spec out at 12.5" x 12.5" at 72 dpi which is the same thing from a computer standpoint. If you follow this path, even a densely detailed image will likely be 80k or less like this one, so it loads fast and looks great everywhere.

Thanks for Reading

Let us know if you need help setting up an eCommerce website. We’d love to give you all the help you need to do it right.