How do you test and optimize your product photos for different devices and screens?

Product photography is a crucial skill for any online seller, as it can make or break your conversions and sales. But how do you ensure that your product photos look great on different devices and screens, especially when customers may use different browsers, operating systems, and resolutions? In this article, we'll show you how to test and optimize your product photos for various scenarios, and how to avoid common pitfalls and mistakes.

Find expert answers in this collaborative article

Selected by the community from 2 contributions. Learn more

1 Choose the right format and size

One of the first steps to optimize your product photos is to choose the right format and size for your images. Different formats have different advantages and disadvantages, depending on your needs and goals. For example, JPEG is a popular format that offers good quality and compression, but it may lose some details and colors. PNG is another common format that preserves transparency and sharpness, but it may result in larger file sizes. WebP is a newer format that combines the best of both worlds, but it may not be supported by some older browsers. You should also consider the dimensions and resolution of your images, and make sure they are not too large or too small for your website and target devices. Ideally, you should use responsive images that adapt to different screen sizes and orientations, and use tools like srcset and sizes attributes to specify different image sources and dimensions for different scenarios.

Add your perspective

Shahzeb Younis

I turn complex business content into compelling visuals.
Report contribution
You may also want to go through the best-practices guide of the platform where the images will be hosted and displayed for any specific requirements. For example, Amazon requires that the product must fill 85% of the image. If you are photographing products for e-commerce sites, make sure to photograph the product at various angles. Testing different angles for main images can help increase click-thorugh rates and conversions.

Like

Unhelpful
Jonas Eyden-Hainsworth

Forklift Instructor & Tutor. Designer & Photographer at Freelance, self-employed
(edited)
Report contribution
This really is a minefield in which there is no "correct" method, find what works for you, test, test again and again... When I save images I tend to stick too .png or .jpg be wart of transparency, some browsers and devices go very wrong, showing transparency and black or grey. People ask what browser I use, easy answer, all of them. You have too, their all different. I test on my phone, iPad, and computer. Sometimes even sending links for friends, to try. Be wary of peoples settings, iPhones have warm and cold settings, changing images dramatically, there's nothing you can do but try to balance your image so it looks good on all settings.

Like

Unhelpful

2 Test your images on different devices and browsers

Once you have chosen the right format and size for your images, it’s essential to test how they look on different devices and browsers. This can help you spot any issues or inconsistencies that may affect your customers' experience and perception of your products. To do this, you can use a variety of tools and methods, such as a device emulator or simulator, a real device lab, a cross-browser testing tool, or a visual testing tool. These tools allow you to view your website on different devices, browsers, and resolutions without having to own them; access and test your website on physical devices; check how your website behaves and renders on different browsers, versions, and platforms; or compare and detect any visual differences or errors in your images across different devices and browsers.

Add your perspective

3 Optimize your images for speed and performance

Optimizing your product photos is essential for providing a good customer experience. Slow-loading images can cause frustration, increase bounce rate, and hurt your SEO ranking. To improve speed and performance, you should compress your images with tools such as TinyPNG, ImageOptim, or Squoosh. Additionally, lazy loading can defer the loading of images not in the viewport until they are needed. This can improve page load time and save data and battery for your customers - you can use services like lazysizes, lozad, or vanilla-lazyload to implement this. Finally, setting up a content delivery network (CDN) with services like Cloudflare, Fastly, or Amazon CloudFront can deliver images faster and more reliably to customers around the world by caching them from the nearest location.

Add your perspective

4 Follow the best practices for product photography

When taking product photography, you should follow best practices to ensure the images are clear, consistent, and appealing. Start by using a plain, neutral, or contrasting background that won't distract from the product. Then use natural or artificial lighting that is bright, even, and soft. To keep the camera steady and avoid blurry or shaky images, use a tripod or a stabilizer. Additionally, use the right camera settings and modes to capture your product in the best way possible. Lastly, you can use editing software or apps to enhance and improve your images after taking them. With these best practices, you can create beautiful product images that stand out!

Add your perspective