Avoiding Ecommerce Design Mistakes: Color Mode & Resolution

Many e-commerce stores are either completely run by one person, the owner, or have a very small staff.  Without a large staff, many merchants find themselves adding new product images and making promotional banners for their online store.

Without any formal web design training, store owners figure things out as they go.  There are a lot of great online tutorials and other resources; however, the majority of store owners are not web or graphic designers.  Today I want to share some fundamentals of proper product image formatting so you can avoid common design mistakes. I promise not to use any big words or confusing design phrases.

If you have a small e-commerce store, you might be taking most of your own product photos. The good news is, even if you have an older digital camera, even a relatively inexpensive “point and shoot” style can be successfully used for store product shots.  You just need to check some of the settings and specifications before taking your product shots.

With technology moving forward, some of the newer inexpensive cameras have some of the capabilities that the higher end cameras had years ago.  The average person thinks that all pictures are alike when they snap that shot from their camera, but there are a lot of things that need to be considered before you upload those photos to your store.

Color Mode

Do you know the color mode of your image?  An image designed to be printed (with ink on paper, or silkscreened onto a T-shirt, for example) will be in CMYK mode. That stands for Cyan, Magenta, Yellow, and Black, the standard inks used in 4-color process printing, where combinations of tiny dots of the four ink colors make up the colored areas of a printed image.

For any image to be displayed on a monitor, including the web, RGB is the standard color mode, standing for the Red, Green and Blue light which combine to make the millions of colors visible on most monitors. If you have ever gotten a drop of water on your computer monitor or television screen, you may have noticed these three colors shining through.

When taking your photos for use on your website, be sure your camera is set to RGB color mode, since all monitors can display RGB but very few can display CMYK on the web. In fact, CMYK images often appear inverted or do not show up at all.  Digital cameras either take only RGB photos or have a simple setting to switch between CMYK and RGB.

Resolution

Resolution is expressed in the DPI, or Dots Per Inch, of your image.  The term DPI was created for print long before the web was around, but the term is still used even though on the web things are displayed with pixels and not dots, as they are with print.  It is pretty much the same concept, though.

The widely used resolution for the web is 72dpi, with 150-300dpi preferred for print.  Most inexpensive “point and shoot” digital cameras shoot at least 150dpi.

A common mistake that store owners make is uploading images at whatever DPI their camera took the photos.  You might know that your product image needs to be 200 pixels by 200 pixels for your website.  You easily crop the images just fine but may still unknowingly upload an image more than double the resolution and size necessary.

Here’s the problem: an RGB image that is 150dpi will display just fine on the web.  But the much larger file size, caused by having 150 pixels per inch instead of the needed 72, make your image more than double in file size. Larger file size equals longer load time, especially when you have several images to display at once. Reducing the image resolution to 72dpi should result in much faster load times for your online store.

In Closing…

These are just two basic tips that can easily help you get great looking images onto your e-commerce store.  There are several popular image editing computer programs out there that will assist you with properly editing your product images.  My favorite is the one I have been using for the past ten years or so, Adobe Photoshop.  A full version of it can get a bit expensive for someone who is only doing minimal photo edits. Photoshop Elements, however, is a suitable version that will do just about everything you need, and can be purchased for around $80. What web design mistakes have you made in the past and avoid now?