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.