Best practices for using images on eCommerce product pages | Email Marketing
There are several best practices to keep in mind when planning out the images for your eCommerce product pages. One of the most important tenets to keep in mind is that your customers can’t pick up your product and hold it in their hands, so you need recreate the “real life” experience of that item, visually.
How to create an in-person experience with eCommerce product pages
There are a number of things you can do to create that real-life experience on your eCommerce product pages, including:
Show products from different angles.
Give a sense for scale and size.
Convey intangibles like scents.
Showcase the texture of your product.
Let’s take a look at each of these design strategies.
1. Show products from different angles
You want to have shots of products from the front, from above, on all sides, and even the bottom. If you think about how you engage with a product in a store, the first thing you do is pick it up to get a feeling for the heft of it, the texture and the quality. You might hold it up to the light to test clarity and get a better view, or take a peek underneath to see if it’s going to scratch your furniture.
Don’t leave them frustrated if they can’t see a certain angle. Every side should be accounted for.
2. Give a sense for scale and size
When you’re displaying all those angles, there’s no real way to tell how large the item is except by seeing it in relation to something else — like a ruler, penny or in someone’s hand.
That backpack a Mom wants to buy for her 6-year-old might be sized for a man and be so huge her child would topple over under the weight of it. But if you show it being worn by your preschooler then she instantly gets a feel for the fit of it and can picture it in her child’s life.
3. Convey intangibles like scents
Even smells are important in some cases on eCommerce product pages. Use graphics, props, words and colors on eCommerce product pages to support the scent. For example if you sell lemon verbena-scented candles then don’t snap a pic of the candle on a table alone and call it good. Just saying “Lemon Scented” isn’t enough.
Drape a crisp yellow linen napkin underneath it or place it next to a glass of lemonade. Or add lemon graphics as a border on your image. People will see those visual cues and subconsciously internalize the meaning so they can almost smell the lemony candle just by looking at it.
4. Showcase the texture of your product
For example, if you are selling fluffy baby blankets, you want everything in the image to be screaming “soft” at you. You can cuddle it up against a sleeping baby’s soft face or pile some snuggly stuffed animals on it.
Or if you sell custom glitter-dipped stemless wine glasses, then you want to really highlight the sparkly glass and shimmering glitter. Zoom in! Add little sparkly graphic effects.
Pull out all the stops to showcase how that glitter looks in person. You can do this with solid photography skills or save time by learning to use Photoshop mockups so you can really showcase your glass without having to rely on perfect lighting.
Related: 3 must-know Photoshop tricks for beginners
Develop an image strategy for eCommerce product pages
When you have an eCommerce site that you know you’re going to be adding products to over time, it’s important to put together a plan for the kinds of images you’ll use, and a template for how they’ll be displayed.
I suggest you do a brain dump of all your ideas for mood, scenery, angles, props and styles of your images. Then sketch it out on paper.
Identify how they’ll show up on your eCommerce product pages. Once you have this template outlined, it’s much easier to plan out image production, photo shoots, mockup scene creators — and everything else needed to compile a group of photos for each product.
Related: How to sell stuff online — A comprehensive guide for success
Brand your shop
While you’re creating the mood in your product images, don’t forget about your brand. If you have a certain lifestyle or guidelines for how you showcase your products, you’ll want to weave that into the design of your images as well. Maybe you sell body piercing jewelry so you want your models to have tattoos or rainbow hair.
Show them in your images, wearing your jewelry. Or perhaps you sell custom wood signs and a shabby-chic aesthetic, so your signs have weathered wood, and are chalk painted and sitting alongside mason jars full of daisies. Get your style figured out, and then sprinkle it in your images as needed.
Keep it simple
Branding is important but don’t let it overshadow your products. You want your sellable items to really take center stage, so keep the scenery minimal enough to bring focus to your product. Your customers need to understand what in the picture is actually for sale or they’ll be asking you for jars when you are selling wood signs.
Related: 15 tips to improve product images and boost online sales
Types of images
Now that you know your brand and how to focus on your product — and you know you need angles, and props and a mood — then you need to decide what your main set of images will be on your eCommerce product pages. Here are some common ones:
- Impressive first image — First Image = First Impressions! Put energy into getting this right.
- Mockups of the product in different scenes — You can purchase mockup creators online from sites like Creative Market.
- Photoshop mockups of your product — Like these free download beer stein and wood sign mockups from my site.
- Call-to-action (CTA) image — Want them to favorite your item, or visit you on social? Make an image telling them how.
- Five to 10 images — This is a good starting point but the more the merrier! If you have room for more, then go for it.
- Show all the angles — Take a page out of any big retailer’s book and show every possible angle of your product. Front, back, sides, top, bottom, inside, outside.
- Special inclusions — Even if you wrote out in the description that your stainless steel tumbler comes with two different lids and three straws, a picture showing this will really hit it home for the non-readers in the audience.
- Variations — Do you sell this product in different colors, sizes, textures, or scents?
- Video — According to this article, “Using videos on landing pages can increase conversions by 86%.” So if you have the ability to put together even a super simple video showing the product in action, do it!
- Show related products in images — Does your baby blanket also have a matching stuffed animal? Show a picture of them together, with wording laid on top of it.
Related: 6 tips for taking enticing food photos
Technical tips and internet prep for eCommerce product pages
Now that you understand the basics, take these tech tips into consideration:
Optimal size and resolution of your product images
This can be a little tricky to understand, and your particular website setup will likely have guidelines for you to follow. But in general I’ve found that you’re safe with the following:
- Image dimensions —1,000 pixels wide by 1000 pixels tall for a square image is a good standard. Or 1000px by 800px if it’s more of a rectangle.
- Image resolution — 72dpi (or ppi) resolution. If you were creating an image for a poster or magazine your resolution would be more like 600, or 300 on a home printer. But for the internet you only need 72! That’s because 72 is standard “screen resolution.”
- Web optimized — Save your image out as a png or a jpg and then pop into an image compression tool such as my personal favorite panda-themed, https://tinypng.com.
You can upload your image there, then download it smaller in file size (It could go from a large 4MB to a slim 100KB) and upload that to your website. This means your product pages will load faster and people won’t get bored and abandon your site to go elsewhere, waiting for the page to fully appear.
- Search engine optimized (SEO) — Don’t forget about your image alt text information. Wording and naming are more important than you think in this area. Screen readers use alt text to help describe images more clearly for the visually impaired. Plus, Google uses this information to index your images in search.
Related: Beginner’s SEO guide — Search engine optimization for small business websites
Mobile-responsive eCommerce stores
As more and more people research and buy products and services on their phones and tablets, it’s important for your eCommerce site to look and perform great on mobile. Here’s how.
Mobile-ready image testing
There are a ton of tools out there for you to use to test your images in mobile. My personal favorite resource is the developer tools console that is built into the Chrome browser. You don’t need to be a fancy developer to use them either.
If you right click on an image in your browser and click on Inspect in the box that pops up, it will open up this tool. There are two little toggle buttons in there where you can switch between desktop computer view and mobile view.
In mobile, you can even tell it what kind of phone you want to test the page on and it will mimic that phone screen size.
And to test your images the old-fashioned way, just visit your eCommerce product pages on your phone and tablet and see what it’s like! You’ll be surprised what you notice and can fix before a customer ever sees your product page.
Rewards for mobile-friendly images
Ever since “Mobilegeddon” in 2015, Google started giving boosts to mobile friendly websites that showed up in Google search results. And things have been trending in that direction ever since so it’s more important than ever now!
Mobile-responsive eCommerce solutions
Not all DIY eCommerce website builders automatically help you create mobile friendly designs so it’s important that you make sure of this yourself. Luckily, GoDaddy Online Store is built to be mobile responsive out of the gate — so you don’t even need to give it a second thought.
Your online store will be pre-optimized to work seamlessly whether customers are shopping from you on their desktop computer, laptop, tablet, or phone. You can even design your eCommerce product pages on your own mobile phone.
Happy selling!
The post Best practices for using images on eCommerce product pages appeared first on Garage.