The images used for your shop products and content are the first item a customer will focus on, and they will be used to gauge both the quality of your product and the professionalism of your business.
Always consider the following when creating product and content images:
- Use actual photographs (as opposed to Photoshop mock-ups, for example) whenever possible. This not only confirms the legitimacy and quality of your products, but helps your customer envision them in a real life setting.
- Take original photos in high definition and commit to finding the ideal camera settings and lighting. Refer to online tutorials and invest in a new camera and lighting equipment if necessary.
- When taking photos at home, find the room with the most natural light. Sheets and/or paper (e.g. cheap wrapping paper) can be hung to help reflect more light and/or create interesting backdrops.
- Consider the staging / background of your product shots and ensure that it compliments your product.
- Keep images consistent between products; establish standard camera settings, lighting and staging.
- Never upload dark, blurred, pixelated, over-compressed, up-scaled or otherwise flawed image files.
- Brighter is better. Sometimes tweaking the brightness / contrast in your favourite image editor can make a world of difference. Refer to online tutorials to get the best results with image editing.
- Watch Etsy's video on Great Product Photos for more tips.
- Refer to Big Cartel's product photography guide for additional recommendations.
- Make use of free photo stock sources where appropriate - refer to Shopify's Free Stock Images article.
Image file size and format
Before uploading images it is important to first ensure that they are sized and formatted correctly for the web by reviewing the following items and using your image editing tool to correct the images as required.
- Ensure your image type is appropriate for upload. Your image must be one of the following file formats:
- Keep your image file names limited to lowercase letters, numbers and hyphens only (as shown above), i.e. remove other characters like brackets and quotation marks.
- Ensure your image is saved in RGB colour mode and not CMYK. CMYK colour mode is not web safe.
- Use the tools built into your photo editor to optimise your image files for the web. For example File > Save for Web… in PhotoShop.
- Size your images correctly to keep your collective image data size as small as possible. This helps reduce page load times and errors, which in turn reduces the risk of visitors abandoning your page and/or site. Your image should be no smaller than the space it is to occupy in your shop and no larger than double that size - double size is ideal to cater for modern high pixel density devices.
- When uploading large images, test compressed versions of these images — using online compression tools like TinyPNG or Kraken.io — to see if you can reduce image data size without sacrificing quality.
- Ensure all of your images have the same dimensions where possible, i.e. the width of every image is the same fixed value X and the height of every image is the same fixed value Y. This is especially desirable for slide show and product images.
- Keep the number of images you display on any given page to a minimum. The higher these values, the slower your page loads - refer to item 3 above.
- When preparing product images, never use images smaller than 600px wide. 1000px or higher is recommended. Refer to The importance of product image quality and size.
- When preparing images for general content, ensure your image width is greater or equal to the display width you desire. For example, full-width images should never be less than 1200px wide. This defines the absolute minimum width for your images; however, using images that are double the intended display width (e.g. 2400px wide for full-width) will improve the sharpness of your images on retina displays and/or full-window images. Always remain mindful of your total image data size - refer to item 5 above.