10 Tips to Improve Your Product Photography for eCommerce

In the digital era, online shopping has become a common way to make all kinds of purchases. Using a computer, tablet, or cell phone, you can buy products online thanks to online stores that have all the necessary elements such as product cards, secure payment gateways, shipping methods, or shopping cart systems, among others.

eCommerce photography is a crucial factor in this type of business, as it is the element that puts the user in visual contact with the product they want to buy. Having quality photographs, conveying what the item looks like realistically is key to increasing sales and making many users repeat eCommerce customers.

What is eCommerce photography?

Product photography in an online store is an essential element to help the user make the purchase decision, showing the item in detail and from different perspectives. 

Photography has a significant impact on eCommerce as it is the visual element that brings users closer to the reality of the products they are looking for.

A product card has a title informing the user about the item and a full description covering all of the product’s data, features, and qualities. Although both are necessary, product images go further by visually describing the object as if the consumer was holding it in their hands.

How does the eCommerce image influence online shopping?

The primary role of product photographs in eCommerce is to help the user make a purchasing choice. Customers will overcome their fear of making a purchase and will have more confidence in what they will buy if they have decent product photographs that illustrate what the product is really like.

Returns are another essential component of eCommerce. If you have quality product photos that show how it is, the number of returns will considerably decrease because customers will be buying a product they want.

How to take photos for an eCommerce?

Each online store is different, handling different products, models, and brands. The photo of an eCommerce varies depending on these aspects and the style and design of the store itself.

To take professional quality photos for an eCommerce, which helps users make a purchase decision, you should follow the steps:

1. Have the necessary tools

It’s vital to have the following equipment and elements while taking images for an online store:

  • Camera. Undoubtedly, the camera is one of the basic elements when taking photos for an online store. Although many smartphones have high-quality cameras, it is best to opt for professional cameras that allow you to get snapshots with the highest quality and realism possible (such as Canon or Nikon reflex cameras, for example).
  • Tripod. The tripod is necessary to place the camera and take pictures from a stable support point. It would help if you had a good tripod that always guarantees the same framing to perfect product photography.
  • Table and background. The product should be placed in an environment that facilitates taking pictures from different angles and positions. It is best to have a large table and implement a white background (using elements such as cardboard, sheets, or special screens).
  • Lighting. If you want to take product photography for an eCommerce to another level, it is best to have an adequate lighting system (with different spotlights, light reflectors, and screens).
2. Prepare the environment

Before taking a photo of an item for an online store, the first step is to prepare the environment where it is taken. The usage of a white background is common because it allows the user to concentrate on the product rather than being distracted by other irritating features black for bottles of wine, for example).

Positioning the tripod with the camera in the ideal situation to take the pictures and having artificial or natural light is another aspect that must be prepared precisely before starting the photoshoot.

3. Setting the camera

Cameras have several settings that can be tweaked to produce higher-quality, more realistic photos. We have the following primary points to alter on the camera:

  • Sensitivity. It is the amount of light needed to capture the photograph. It is necessary to adjust the ISO sensitivity to a suitable value that allows the required amount of light to pass through without filling the image with noise.
  • Aperture. The diaphragm aperture delimits the camera’s depth of field and must be adjusted to prevent parts of the photos from being out of focus.
  • Exposure time. This parameter gives a sense of mobility or freezes the image. A faster or slower shutter speed will be more attractive depending on the product.
  • Resolution. The resolution of the product photos must be high to guarantee maximum quality. Subsequently, the image can be treated with an editor to optimally adapt its size and resolution to eCommerce (never forget the web loading speed, a key factor for the user experience and web positioning in an online store).
4. Position the product

With the environment prepared and the camera-ready, the product must be positioned to start the photoshoot. It is necessary to have a product in perfect condition, being the best to use a new item so that it does not have any sign of use or deterioration that may negatively influence the user’s purchase decision.

5. Perform tests

It is always important to perform different tests to verify that all the previous steps have been carried out correctly. For them, you should take some pictures and analyze them concisely. It is the time to make any readjustments to the camera settings, optimize the lighting, or improve the background.

6. Take different shots

After starting the photoshoot, it is important to take several product shots to select the best ones. Two essential points when taking product photos for eCommerce are:

  • Rotate the product. The product should be photographed from all sides to offer users the possibility of viewing it entirely and accurately.
  • Zoom. You can take more detailed photos showing a product’s small details by zooming in the image.
7. Editing the images

The final phase is editing images to adjust them to the web format without losing quality. The ideal is to use professional graphic editing tools, such as Adobe Photoshop. In this process, some characteristics of the photographs can be readjusted, such as brightness, colour intensity, resolution.

Remember, if you do need to get rid of the background, you can do this using a background remover tool.

Tips for enhancing your eCommerce photos

1. Go for a white background so that the user can focus their attention on the product.

2. Do not use a smartphone to take photos. It is better to go to a professional who has cameras suitable for quality photos that your online store needs.

3. For some products, it is essential to include a photo within an environment as this allows the user to compare it with other items to get an accurate idea of its size and volume.

4. Include detailed photos of the item. A few external pictures of the product are insufficient because users want to see all of the item’s intricacies.

5. Follow the same style for all eCommerce product photos. This conveys a consistent and professional image, which is pivotal for the company’s success.

6. Avoid watermarks on the photos of the online store. Although they are ideal for protecting the authorship and cannot be reused, they are elements that distract users and can become annoying.

7. Combine different sizes of photographs. For example, show other thumbnails that can be enlarged by clicking on them.

8. Photos of an eCommerce need to be sharp, so it is recommended to use low ISO sensitivity.

9. Use images that show true-to-life colours, using digital editing if necessary.

10. Add photographs of the product in operation to provide more exceptional value to the user.

Final Thoughts

All in all, your eCommerce product photos are vital for getting more sales and avoiding many returns. Betting on professional photography for the different items in your store is the best decision that will allow you to get better results and project an image of trust and professionalism.

Posted by: Ryan Edwards

Ryan Edwards is a freelance writer specializing in relevant and unique content. He works for the Wow Essays company. He is positive that a successful writer is characterized by a creative mind, inventiveness, and lifelong learning.

 

It’s good to share

How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

Today we are going to show you how you can convert letter-spacing from tracking from design programmes like Photoshop or Illustrator to CSS.

Have you ever had that conversation with a graphic designer for a layout that specifies tracking (letter-spacing in our language) for text elements?

So how do you make this conversion?

The Simple Answer

Divide the tracking by 1000 and use em’s.

A bit of background about letter-spacing is that it is always applied to text so we should use a relative unit of length. Font size can change by the user or even by the cascade.

The best unit of length for text is the em unit.

Why is tracking different?

Programmes like Adobe’s Photoshop, Illustrator and InDesign use em’s in their tracking but manipulate the unit so it’s an easier number for designers to play with. To make it easier they multiply it by 1000.

Take a look at this screenshot from Illustrator:

Note: Tracking (in thousandth of an em)

Converting tracking back to whole em’s

To do this, all we need to do is divide the tracking number by 1000 to get the unit back to a whole em that you can use in CSS.

So 75/1000 = 0.075em.

Pretty simple right?

How to calculate this in CSS/SCSS

If like us, you use SCSS and want a reusable solution, then here is an awesome mixin for you:


/* Convert Illustrator, InDesign and Photoshop tracking into letter spacing.
-------------------------*/

@function tracking( $target ){
    @return ($target / 1000) * 1em;
}

@mixin tracking( $target ){
    letter-spacing: tracking( $target );
}

Then to use the above function you can simply type:


.txt-element {
     @include tracking(75);
}

Alternatively, you can just to the maths inline without a mixin so it’s less abstracted as follows:


.txt-element {
    letter-spacing: #{(75/1000)}em;
}

The output of the above code would be:


.txt-element{
    letter-spacing: 0.05em;
}

A few things to note…

You should not use a pixel-based value as pixels are fixed and break when:

  1. The designer changes the font-size. You would need to recalculate the value.
  2. If the user changes their text size the design of your site won’t appear as desired or even illegible to read.

In addition to this, browsers render text different to how the graphic design programs do so don’t be surprised if the designer tweaks the tracking/letter-spacing on review of the implementation ; )

We hope you enjoyed this article and that it has helped you. Happy coding all!

 

Silva Web Designs - Profile

Posted by: Silva Web Designs

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share