Optimizing your product images for your website is essential for conversion rate optimization. Follow the guidelines below for optimized website images that will maximize you online sales.
1. General best practices
2. Image size
3. Search Engine Optimization
4. Resources
1.
General Best Practices
– Images need to be crisp and clear. If they are blurry or unprofessional, you’ll cause the buyer to doubt your brand, and in turn lose credibility in your product.
– Images without backgrounds allow the buyer to focus on the product without being distracted. Look at the top eCommerce websites; all of their products have white backgrounds for a reason… because they want to make money.
*Pro Tip*
Invest money and time into your product images, even if you have to hire a professional photographer. If the customer sees you don’t care about your products, why should they?
2.
Image Size
– For quick load time and images that still look great when zoomed-in, we recommend your images be anywhere from 800px to 1200px on their longest side. If you take a 5-megapixel photo with your camera, that means it’s 5,000 pixels on the longest side – which is much higher resolution than is needed for web content.
– Your image’s file size is just as important. File size refers to how much data a file contains, or how much storage it will consume. Sites like TinyPNG and JPEG-Optimizer can compress your images to lower your page load overhead. Some graphics software programs, like Adobe Photoshop, also feature a “Save for Web” command, which does the same thing.
– An image’s format refers to how the information is encoded for a computer to interpret. Images can be encoded in a variety of different formats. For most situations on your BigCommerce store, using a JPEG or JPG format for your product photos offers the best balance between looking good and loading fast. PNG files are typically used for web graphics, like icons or patterns.
Make sure your images are saved as a JPG, between 800px to 1200px, and 72 dpi. You can use graphics software on your computer, or free web services like Optimizlla or Pixlr to trim down the raw camera images or product photos. The more you can compress the image, the faster you site loads.
3.
Search Engine Optimization
– While not directly related to site speed, your product photos should have descriptive alt tags (called “image descriptions” in BigCommerce), which is alternative text that is displayed in a browser when the image cannot be displayed. This can be helpful for several reasons:
- A user is blind and is using software to browse and translate the web
- A user has a less than reliable internet connection
- A user has turned off images in their browser for a speedier experience
– Search engines also use alt tags to learn more about the nature of a site, and use it as a ranking factor on results pages. Alt tags can even help your images themselves rank higher when searchers conduct an image query.
– In BigCommerce, you can add image descriptions as you manually add product images through the control panel, or import them. See our BigCommerce University video on Image Descriptions for more information.
*Pro Tip*
When downloading photos from your camera, you should name your image files in a way that is easy for search engines to find. For example, an image directly from your camera might have a file name of DSC00101.JPG. Change it to something like red-longsleeve-cashmere-sweater.jpg.
4.
Additional Resources
- Fixing Distorted Images
- Importing Product Images
- Adding a Product | Images & Videos
- Content Delivery Network
- Navigating Stencil Design Assets
- Using site speed in web search ranking (Google Webmaster Central Blog)
- Page Speed (Moz.com)
- How Website Speed Actually Impacts Search Ranking (Moz.com)
- On-Page Factors (Moz.com)
- PageSpeed Tools (Google Developers)
- TinyPNG.com
- JPEG-Optimizer.com
*Pro Tip*
The more you know, the more you grow.
Reference: Most of the best practice content of this article was take directly from BigCommerce [HERE].
Real time Flowers Inc. | Passion Never Fails.