Editing your images
If you’re taking your own product photos, you will need to get familiar with photo editing tools. Each photo editing tool is a bit different, but any tool you should be using will include colour and contrast correction, cropping tools, and rulers so that you know how large your image is and can measure it in comparison to your other photos.
Adobe Photoshop is now available starting at $10 USD per month for individuals, which will provide you with more tools than you’ll ever need for product photos alone. But there are many more inexpensive and free tools that provide the features you need. Even Apple’s Preview app, which comes installed on every Mac, has a simple (but powerful) set of editing features.
Here’s our list recommended tools:
- Pixlr and Pixlr Express (Online, Free)
- Pixelmator (Mac and iPad, $30 USD)
- Gimp and Gimpshop (Linux, Mac, and Windows, Free)
- Polarr Photo Editor (Google Chrome, Free)
Image File Type, Dimensions, and Size
Your visitors will typically give your site 3-5 seconds to load before leaving. But, in most cases, the biggest contributor to a slow page-load is unnecessarily large images. So you can drastically reduce your site’s load-time by optimizing your images — that means resizing and compressing your images, while also saving them as the right file type for the web.
In most cases, especially for images with larger dimensions, we suggest saving your image files as JPEGs. This is because JPEGs use lossy compression, which ensures quality images with solid load times. PNGs are appropriate for logos and smaller images.
Recommended image sizes are usually listed in your theme editor or documentation. As a generally guide, however, the maximum width or length tends to be no larger than 2048px. If your images are larger than this, it’s likely they are slowing down your load time. To resize your image, use one of the editors recommended under Editing your images.
File Size (Compression)
One way of reducing you images’ storage size is through lossless compression, which can be done online for free: by selectively decreasing the number of colors in the image, compression makes it so fewer bytes are required to store the data, with no visible “loss” being apparent. We recommend tinypng.com to compress your JPEG and PNG files.
In addition to resizing and compressing your images, you’ll sometimes need to crop some of your images to make the width to height ratio consistent across your images (e.g. your product photos). This is so that they display at the same dimensions on your store.
The width to height ratio of an image is also called the ‘aspect ratio’. Two images that have the same aspect ratio if they are proportional in width and length. For example, an image with an aspect ratio of 2:1 has a width twice as long as its length, such as 100 x 50px or 500 x 250x.
If you want to calculate the dimensions of an image you want to crop to a certain aspect ratio, use this proportion calculator. For example, if you need an image to have a 9:6 ratio with a 1500px width, you can figure out the length by entering [9/6 = 1500/ ] into the proportion calculator. If you don’t know the specific aspect ratio, you can enter in the width/height of an image with the desired proportions in place of the aspect ratio.