Here’s What We Learned
We’ve prepared the highlights in a handy infographic. For more detailed analysis, including “what does it mean for me?” interpretation, keep on reading afterwards.
What Does That Actually Look Like?
Every image has a file type, size, margin, and background. After looking at the images we have data for, we found:
- 75% of outputted images are JPG
- 76% are filled with a white background
- 79% are center vertically aligned
- 1000px is the most common width
- 750px is the most common height
- 25px for each side is the most common margin
Want to see it in real life? Here’s an example using the most common specifications:
Before post-production
After post-production by most common specs.
Not too dramatic, right? Nice and clean. It’s the type of image that makes browsing an eCommerce website a smooth experience.
Let’s start drilling down on the data, and we’ll see if we can find out both what’s happening and why.
Universal Image Properties
You can get fancy and add on features to set your images apart from your competitor, but all images share some properties. Here are the most common values we found, laid out in a Pixelz order specs card
Product image order specifications using the most common values.
Let’s walk through each property and look deeper.
File Type: All Hail King JPG
First off, every image has a file type. At Pixelz, you can choose from JPG, PNG, TIFF, and PSD. JPG absolutely dominates, as you might expect:
JPG is far and away the most common product image file type.
Why does JPG rule the web?
Page load speed matters more than perfect compression.
JPG uses lossy compression that maintains high (but not perfect) quality, while PNG uses lossless compression that stands up to any amount of zooming and allows transparency. JPG images are smaller (less bytes), however, which pretty much ends the debate. On the Internet, loading even a fraction of a second slower costs you sales.
Product images are usually JPG on the web, and that’s not going to change until bandwidth doesn’t matter or some new file type overturns the apple cart.
Going back to our chart, it’s safe to assume that when PSD and TIFF are selected the final images in use will be something else. Both formats allow layer masks and clipping paths to be returned from image editors to the owner, which is useful if you’re planning cross platform publication of your product images (like printed catalogs, web, email, etc.).
Don’t be afraid to be different! 7 million product images reveal industry norms, but your…
Background: White Wins Handily
Most image owners elect to have the original background cut out of their product images and replaced with pure white.
76% of all product images have white backgrounds.
Why are most image backgrounds filled with white?
Consistency and accurate color representation are both served by white backgrounds.
There’s actually several things going on here:
- Removing the background from a product image eliminates distractions and keeps the focus on your product
- Solid color backgrounds reduce your file size, because they simplify compression.
- Most web pages are white, so a white background blends your product image with the page.
- Filling the background of your image with white, much like photographing products on a white backdrop, represents your product’s colors accurately.
What’s a transparent background?
A cool but not fully supported feature.
PNG images can have transparent backgrounds, but it’s not supported everywhere.
Images with transparent backgrounds have the original background cut out and don’t replace it. Transparency can make it easier to overlay your product on different images, like in a montage, or on webpages with different colored backgrounds.
However, transparency isn’t supported by JPG, and you can run into display issues with transparent PNGs. If an application or CMS doesn’t support transparency for whatever reason, your pretty image turns ugly in a hurry.
Vertical Alignment: Find Your Center
Images can be vertically aligned relative to their height by top, bottom, or center. We have another runaway winner: center vertical alignment.
Center vertical alignment accounts for 79% of analyzed product images.
Why should I vertically center my product images?
It provides the most consistent presentation.
Vertical center alignment creates clean lines when you have products that vary in size and shape, like jewelry, furniture, tools, or other diverse products.
A bottom alignment is effective if you have a category page with all one product type, like a page made entirely of similarly shaped handbags. You can preview different alignments when creating your Pixelz order specifications.
Margin: Equality for All
We allow customers to set margins in pixels, percent, or not at all. We have about an even split between exact pixels and percentage selection. There’s a pretty obvious trend when you drill down on exact pixel settings:
Most product images have equal (within 1px) top, bottom, left, and right margins.
Why are equal margins so popular?
It provides failsafe spacing.
There’s no telling where your product images will end up and how they’ll be displayed. They might be viewed on your website, on a Pinterest board, on an influencer’s blog, displayed by a search engine, and pushed through a downstream retailer’s site.
Not everyone will be as careful and as tech savvy as you want them to be. If you add equal top, bottom, left, and right margins to your images, you can prevent a complete jumble from happening; the size of your margin matters less than being consistent.
5 years, 7 million edited product images, 1 infographic to rule them all!
Height and Width: No One Size Fits All
Examining our image dimensions data is interesting but tricky. You can set an exact pixel size, keep your original size, provide an aspect ratio, or provide minimum and maximum sizes. That means our data is all over the map.
There’s wide variety in the methods used to set product image dimensions.
Let’s look closer at exact pixel size selections, which account for about 38% of the data set:
Product images have greatly varying widths and heights.
What dimensions should I use?
There’s no objective answer. Height and width should be determined by your product and your web strategy.
Ecommerce platforms have different needs, as seen in this cheat sheet, and so do you. Speak with your web developer and find out what they think is optimal for your site. When in doubt, keep your original image dimensions. You can always scale an image down, but scaling it up compromises quality.
Featured Add-Ons
Nothing like a good shadow to give depth to your product image, right? The owners of 1.2 million product images agree with you.
Still with us? Awesome, you must love product images as much as we do! Let’s get into detail on even more features you can add-on with Pixelz>, like shadows, DPI, and color profile.
Shadows: Just Act Natural
Nothing like a good shadow to give depth to your product image, right? The owners of 1.2 million product images agree with you.
Natural shadow is the most popular shadow for product images.
Wait, how can you “add-on” natural shadow?
When we remove the background we leave the shadow, then retouch it as needed. We can create it in Photoshop if there’s no original shadow, as may be the case with professional studio lighting.
If you’re interested in something other than natural shadow, drop shadow and reflection shadow can be effective subtle elevations of your image quality.
Wait, how can you “add-on” natural shadow?
When we remove the background we leave the shadow, then retouch it as needed. We can create it in Photoshop if there’s no original shadow.
If you’re interested in something other than natural shadow, drop shadow and reflection shadow can be effective subtle elevations of your image quality.
DPI: Print Quality Is Trending Higher
About 2.4 million product images we processed had DPI settings.
300 and 72 DPI are the most common product image settings.
Does DPI matter for my images on the web?
No, absolutely not.
DPI (dots per inch) matters when printing, like for a catalog: the higher the number, the sharper the detail when printed. It does not actually affect the resolution of your digital image; it’s simply a string in the header of the file that communicates with printing software.
Every number on the Y axis of our chart had over 1000 images processed, but it’s clear that 300 DPI and 72 DPI are by far the most popular. 300 DPI is a high quality resolution for printing. 72 DPI is probably leftover from the myth of DPI, and the belief that 72 DPI is good for the web. In reality, DPI has no effect on your images when on the web.
Color Profile: sRBG is the Color Space to Be
We haven’t always offered color profile options, and most image owners elect to keep their original color profile. Among the roughly 620,000 images that did set a color profile, there are four selections worth comparison: sRGB, Adobe RGB, RGB, and CMYK.
sRGB is the most popular color profile for product images.
Man, all these acronyms look alike.
We know. Don’t worry about it. Just use sRGB.
Once again we have a clear winner of the popular vote, with sRGB lapping the field several times. You can find a breakdown of its advantages in the Zen of sRGB Color Space. In simplest terms, the web is optimized for the sRGB color space, so it’s the best way to ensure accurate representation of your products.
What We’ve Learned
Optimize, optimize, optimize. While we wouldn’t necessarily recommend copying all the most popular settings for your own product images, you should certainly consider their value. Analyzing seven million images has made common industry practices clear.
You should probably be vertically center aligning your products, whiting out your background, using equal margins, and using JPG images for the web. Natural shadows are the most popular type of shadow, and sRGB is the best color profile for the web. If you’re printing, use 300 DPI.
All of that said: don’t be afraid to be different! Your product images should be optimized for your website. Being on the web means eCommerce owners share many of the same challenges, but products are unique and your needs may be different than the norm.
Interested in future product image reports? What would you like to see?