Optimizing images on your website is the most important thing you can do to make your site load fast for your customers. If your site loads slowly because of large images this can cause your customers to get frustrated and leave. In this article, I will go over some best practices when adding images to your GrazeCart site. We will go over optimizing product photos for your store, banner images for collections and banner images for pages.
File dimensions vs. file size
An image's dimensions are the measurement of its width and height. These dimensions are usually measured in pixels. This is not the same as the file's size, which refers to the actual space it takes up on a hard drive. The size is usually measured in MB or KB. The larger the file size the longer it takes to download, so the goal of optimizing is to make our file size as small as possible without compromising the quality of the photo.
Cropping
The file's dimensions can contribute to its size, which means the larger the dimensions, the larger the file size will be. This is why cropping your photo, is really important because it removes the unneeded parts of the photo and makes the file size smaller. Cropping is also important because it lets you define the aspect ratio of the photo. The aspect ratio is the ratio between the width and height. Having the right aspect ratio is important to make your photos fit nicely in the layout of your site. I will talk about the ideal aspect ratios and dimensions for product photos, collection photos, and banner photos next.
Optimizing Product Photos for Your Store
It's really up to your preference for how to crop your photos, but I would suggest the ideal dimensions for products photos is 750px width and 500px height, or an aspect ratio of 3:2. Now you don't need to follow this exactly for your store, but the key take away here is consistency. If all your product photos have the same aspect ratio, your store will look balanced and will be easier for your customers to scan because all the images will be the same dimensions.
Ideal product photo size
For the size of your product photos, a good rule of thumb is to optimize the original photo, before you upload it, to come in under 150kb. Try best to avoid uploading anything larger than 200kb for a product photo. It's best to crop the photo first, then re-size the dimensions to no more than 750px wide, then run it through an optimizer for web images. I will link to some free online tools that can help.
Collection Banners
Collection banners will typically have an aspect ratio of 6:1. So something like 1200px width by 200px height would be a good starting point. If you add extra content to your banner that might increase the height, so you would need to adjust the height of your images to account for that.
Collection banners shouldn't need to be any larger than 100kb as well, but of course, always strive to make them as small as possible without compromising the quality of the image.
Page banners
Banners images found on pages are a little less straight-forward. As you might have picked up, it really depends on the size of the area you are working with. There is no set size for a banner, and you have a lot of control over its height, while the width will adjust to the entire width of the browser. This makes it very unpredictable and sometimes difficult to find an image that fits perfectly for any situation. Sticking with simpler photos can help, or even using patterned illustrations. You will probably need to mess with various cropping, dimensions, and background position settings until you find something that looks right to you.
Banner file size
Because these images can have larger dimensions you might find it hard to get this file size below 100kb, so aim for something under 300kb if possible.
Other ways to reduce file size
In addition to the dimensions of the photo, there are a number of other factors that contribute to an image's file size. The first is the file format. Avoid using png files unless it's for your logo and you need a transparent background. For product photos and banners always use jpg.
Another thing that affects file size is the complexity of the photo. The simpler the image the more it can be optimized and made smaller. Avoid using really busy photos with lots of different colors and textures, instead try using photos that have large areas that are the same color, like a photo of with a large blue sky. Sometimes adding a blur or making the photo black and white can significantly reduce the file size.
Tools for optimizing photos
- Cropping and adjusting size: https://www.befunky.com
- Optimizing for the web: https://tinyjpg.com