Web Design: Best Practices for Product Images

WebDesign-Images

If we think about what kind of online stores we feel most secure in and have the most enjoyable experience with, I’m sure a couple things would come to mind: high quality photographs of the products we’re looking for, quick loading, ease of use and a professional look.  When we see sites that are home grown and all over the board as far as look and feel go, it makes us wonder if our credit card info will be safe with someone who can’t spend the money to produce a professional website. In this blog, we’ll teach you how to use best practices throughout your site with your product images so your customers will have the best possible experience while shopping your online store, and give them the confidence that they need to spend their money there.

FILE FORMAT:

For your products we recommend two formats for your store:

JPG format is a lossy compressed file format. This makes it useful for storing photographs at a smaller size than a BMP. JPG is the most common choice for use on the Web because it is compressed.  We recommend using jpgs for all photography type images. Also, Miva’s image machine gives you options for what type of quality you want it to resize your images out to as well.

PNG format is a lossless compression file format, which makes it a common choice for use on the Web. PNG is a good choice for storing line drawings, logos, text, and iconic graphics at a small file size. Also, if you are looking for a transparent background this is also a good option for your images.

GIFS Format – We know there are other options out there such a gifs, but we don’t recommend using the gif format for product images as the quality is not high enough.

FILE SIZE:

If you are using one of our ReadyThemes, your store will have three product image sizes: thumbnail, medium and zoom. The nice thing with our ReadyThemes is that they come with an image machine that will help you process your images accordingly.  All you have to do is upload your zoom image and the image machine will take it, copy it and automatically resize it into your other two images. This is a huge time saver, especially if you have a large store with a lot of products.

Pixels:

We recommend you set your zoom image to be 800px by 800px, or 800px wide and then allow the height to be whatever it needs to be proportionately. If you can have them all the same size it will provide a nicer looking site, which creates a pleasing shopping experience for your customers.

DPI:

For the web, your images should always be saved at 72dpi (or dots per inch).  I’ve looked through some sites and noticed that a lot of their images are 300 dpi, this makes for a very large, slow downloading file for your customers, and there’s a very good chance this will create a high exit point for those who don’t want to wait around for images to load. It also takes up more space on your server, and that could mean money out of your pocket.

FILE SAVING:

When you save your images, there are options as to how you save them out. As you see below, I saved one image out three different ways. You’ll see them below and how they are all good quality, however, the one I saved out of Photoshop as “Web” you will see is much smaller than all the others. When you’re looking for the fastest loading time and the least amount of space on your server, this is the choice you want.

IMAGE CONSISTENCY:

One pet peeve I have is going to a site where the images are all different sizes, thus throwing the design off. I don’t know, maybe I’m too picky – but I prefer a clean looking site and believe there’s a large group of consumers that feel the same way. Take a look at the examples below and let me know which one you prefer:

So, to summarize the best practices for your images – set your zoom image to 800px, save all images at 72dpi, and if the images are photographs – save out as a jpg, if your products are line drawings or you want transparent backgrounds, save out as a png.

We hope this helps you prepare your website for the best possible shopping experience.

Love it? Share it!