Taking good product photos is essential to operating a successful online store. Even more important than taking good photos though is how they are displayed on your website. Any online store can have beautiful pictures, but many stores make critical mistakes in the organization and efficiency of their product displays. Below is a list of 4 things to avoid when displaying pictures on your online store.
Don’t Use High Resolution Photos
I’ve seen many online stores fall into this trap. They use an extremely high resolution photo for all of the product pictures on the site. As a result, the website loads extremely slowly and drives customers away. Unless you are actually selling photos on your online store, the resolution of your pictures don’t really need to be that high. You can also get away with turning the jpeg compression settings lower (higher compression) as well and not drastically affect the clarity of your photo. However, you will need to experiment with the different compression settings on your photos to determine what’s optimal for your store. As a reference, all of the large main product pictures in my store are all around 15KB or less in size.
Don’t Load a Larger Picture Size Than You Need
Often times, you will be displaying the same photo on your website at many different sizes. For example, the same product photo might be displayed at a large size for your main product photo, a medium size for your thumbnail photo and an extremely small size for your shopping cart display.
You should never use the same size photo(by size I mean kilobytes) for all of the large, medium and small pictures on your site! To maximize the efficiency of your website, you should have separate versions of pictures for each and every permutation of a particular size photo. Some shopping cart programs will create these smaller versions for you and cache them on your site for faster load times. If your cart has this feature use it! Otherwise, make sure you generate all of the different sized photos yourself and use the appropriate photo depending on the application.
I just want to end this bullet point with an example of the bandwidth savings. The main product photos on my site are around 15KB. The shopping cart photos are only around 1.5k. That a 10X savings in bandwidth and a 10X increase in the speed at which my webpage will load.
Don’t Forget to Use the “Alt”, “Width” and “Height” Tags For Your Photos
The use of the “Alt” tag is essential for the search engines to be able to index your photos properly. Otherwise, the search engine will have absolutely no idea how to categorize your product.
The “Width” and “Height” tags are important because they directly affect how your page gets loaded and displayed in the web browser. If you don’t explicitly provide an image size, your page will flicker and erratically get larger and smaller until all of your pictures load properly. By specifying a “width” and a “height”, your web browser will provide a blank placeholder for your image until the full image has been loaded. While you may not think this is a big deal, it makes a big difference in how professional your website will come across to a potential customer. First impressions are key!
Don’t Mix And Match Different Photo Sizes For Your Thumbnail Photos
Let’s say you are displaying a wide array of your product thumbnails on the same page for the customer to look at. There’s nothing more annoying than for a customer to have to sort through different sized or rotated photos while browsing through the catalog. It’s also equally annoying to have to scan through photos that are not aligned either horizontally or vertically.
Ideally, all of your thumbnail pics should be of the same width and height and be organized in an aesthetically pleasing grid pattern on your site. That way, your customer won’t get a headache as he scans through your products.
- Ecommerce Mistakes That Make You Look Like An Amateur
- How To Design A Killer Mobile Ecommerce Website That Will Boost Sales
- 6 Ways To Speed Up The Loading Of Your Website
- An Inside Look At How My Online Store Redesign Has Increased Sales
- 5 Tips for Establishing an Efficient Picture Flow For Your Store