How to Edit & Optimize BigCommerce product image size?

A strategy to attract more people to your eCommerce business is to optimize your product image since customers often rely on product pictures rather than word descriptions. Merchants may use various tactics to improve these photos so that they rank well in search engines.

This article will guide you through How to Edit & Optimize product image size for BigCommerce, from simple steps for resizing to pro tips for optimizing your pictures for lower loading speed and higher search ranking.

Why are images so essential?

In this part, let’s take a look at certain reasons why images have such a big influence on your eCommerce store’s conversion rate and sales.

• Create first impression: When visitors visit a product page, the first thing they see are the images, and those initial few seconds may be critical in evaluating whether the product is what they are searching for. In fact, according to a 2017 survey commissioned by BigCommerce and Square, offering extra product photos is the number one thing that American online customers seek from online retailers.
• As worth as 1000 words: Images, more than any description, assist a client in determining the quality and specifics of a product. Instead of feeling the object like they would at a retail store, superb product photography allows the consumer to examine the object’s numerous aspects up close.
• More mobile responsive: As mobile purchasing becomes more common, photos will become increasingly vital. Users increasingly rely on visuals rather than words to determine the appropriateness of a product and to navigate. Having better, more enticing eCommerce product photos increases the likelihood that your items will be viewed, clicked on, and purchased.

How to Edit product image size for BigCommerce?

1. Resize Stencil Images

For Stencil themes, modifying product image size can be handled in Page Builder. Note: The menu titles for Stencil themes are different. The Theme Styles option in Page Builder may be called differently depending on the Stencil theme. If the theme’s Page Builder does not offer this feature, contact the theme’s developer or create a topic in the BigCommerce Community Q&A Themes & Design forum.

Let’s take the CornerStone theme as an example.

Step 1: Go to Theme Styles.

Step 2: Choose Products. Click on Products cards and Image sizes.

Note:

• Main Product Images: Resizes the primary product picture displayed on the product page.
• Thumbnail Image: Modifies the size of the thumbnail pictures that appear on the product page underneath the primary product image.
• Zoomed Image: The image’s size when the mouse over or click to zoom feature is used.
• Image in Gallery View: The size of a product picture when displayed in a grid, such as on a category or home page.
• Brand Image in Gallery View: The size of brand logos seen on the See All Brands page.

2. Resize Blueprint Images

Image thumbnails are handled differently in legacy Blueprint themes. The grid will be preserved, but the picture will be distorted until it fits inside the preset box. As a result, pages with consistent grids but distorted graphics are common.

Step 1: Navigate to Store Setup.

Step 2: Select Store Settings under the Images tab.

How to Optimize product image for BigCommerce?

1. Choose proper image size and file size

Make sure your pictures’ physical dimensions (height and width) are adequate. In general, the longest side of your product photographs should be less than 1,000 pixels. When you capture a 5-megapixel photo with your camera, the longest side of the image is 5,000 pixels, which is far greater than the recommended resolution for online content.

The size of the file is just as crucial as the dimensions. The size of a file indicates how much data it contains or how much storage it will take up. Images may be compressed using sites like TinyPNG to reduce website load time. Some graphics software products, such as Adobe Photoshop, provide a “Save for Web” function that accomplishes the same goal.

Note:

• To reduce the size of raw camera shots or product shots, you may utilize graphics software on your PC or free web services like Pixlr.
• Although there is no noticeable difference in quality between the before and after compressed pictures, the compressed version will load much faster.

2. Show your products in different angles

If you look at any successful online business, you’ll notice that they seldom use just one photo for any of their products. Different photographs can be used to highlight certain different elements of the product.

• Long-shots of the product on a model can assist the user in visualizing how the product will seem in real life.
• Medium pictures assist them in determining the overall appearance of the product.
• Close-ups show the product’s finer characteristics and quality, which can help market its worth.

3. Use correct picture format for faster loading speed

When producing pictures, it’s tempting just to choose the default saving option, but understanding the differences in file types and settings can significantly influence your site. JPG/JPEG, GIF, and PNG are the three image formats supported by BigCommerce. Each of them has its own set of advantages and disadvantages.

• GIF files are not just poorer in quality, but they are also less in size. You should generally utilize a GIF if you need to make an image specially for small icons or thumbnails. They’re also the only format that allows for animation.
• PNG files have a greater color spectrum and are the only format with transparent backgrounds. All of this, however, comes at the expense of bigger file size. You should export a photo as a PNG file if you need to re-edit it more than once.
• JPEG files are the most used Internet picture format for eCommerce stores. They can handle various colors, but the JPEG compression options let you create a balance between image quality and file size.

4. Name your image file

Use keywords that properly and concisely describe the image when naming image files. The image file’s name will assist search engines in determining what the image is of. For example, use a black-panda-cotton-tshirt instead of Image01. Long file names and keyword stuffing, on the other hand, may have a detrimental influence on rankings.

Note:

• Instead of using underscores to separate words, use dashes. Underscores will mix words rather than separate them.
• Words like “the,” “a,” and others that don’t provide keyword value should be avoided.

5. Use Alt Text

Alt text is meant to be used as an accessibility feature, and it should be treated as such. When a website is unable to render a picture for whatever reason, alt text is offered as a substitute. The alt text also serves as a description of the picture for search engines to identify.

Include at minimum one keyword in the alt text, but don’t stuff it with them. Use only terms relevant to the image’s content; otherwise, search engines may penalize you.

BigCommerce tools for Optimizing product images

There are three additional tools offered by BigCommerce that can assist you with optimizing product images.

• Speed Testing Tools: Google’s PageSpeed Tools and Pingdom’s Website Speed Test identify which pictures, if any, have a larger file size than required, resulting in a delayed page load time.
• Content Delivery Network (CDN): By collecting common data at global network nodes, it allows you to offer your store’s online assets faster throughout the world.
• Akamai Image Manager: It is included with BigCommerce websites that use Stencil themes. This optimizes each online picture for the optimal mix of size, quality, and file format suitable for each picture and device in order to have the fastest website load time without losing its appearance.

Conclusion

Large picture sizes might cause a store’s site performance to slow down, and low-quality images might hurt your search engine rankings and conversion rates. To ensure speedy load times and attract more customers, website images should be adjusted to obtain the optimum balance of quality and small file size.

We hope that this article provides useful concepts for you to edit and optimize product images of your BigCommerce store. We believe that these mentioned tips will assist you well in improving the conversion rate, customer engagement, and value of your online store.