There are several ways to correct distortion and ensure that your store’s images look as intended. When only a few images are distorted , it's usually easier to adjust the images’ dimensions and reupload them than it is to accommodate them by changing the image dimension settings in your theme.
To alter the size of your images, you can use an image editing software program or a free online image editor. See Recommended Image Editors for a list of popular options.
Need to update multiple product images? Once you’ve made your edits, you can import them in bulk, using a CSV file.
Aspect Ratio
Aspect ratio refers to the proportional relationship between image height and width. You can think of it as an image's general shape. For example, if an image is twice as wide than it is tall, the aspect ratio would be 2:1.
It is important to maintain an image’s aspect ratio when resizing it, or it can appear stretched or squashed. For example, if you have an image that is 6000 x 4000 px, you can resize it to be 1200 x 800 px with no distortion.
As you can see in the example above, the smaller image retains aspect ratio, and so appears correctly, without distortion.
Original Image Size
It's easier to start with larger images and resize them to be smaller. Enlarging smaller images creates pixelation or artifacts that can make images appear blurry or out of focus.
Below is an example of a smaller original image that appears blurry once it has been enlarged.
A larger image also allows for more flexibility, should you need to modify the aspect ratio by cropping it or changing its canvas size.
Changing Image Canvas Size
The image canvas is the background area that an image rests on and defines an image’s dimensions. This contains the image itself, but can also include a border that surrounds the image.
Adjusting the image canvas size allows you to increase the pixel size of your image without the risk of distorting the image or cutting anything out, or "clipping" your image. This will add padding or space around the edges of the image, giving your images a polished and professional look. The padding color can be adjusted in most image editing programs, or even set to transparent.
In the above example, both images share the same dimensions, but the image on the right includes a border which increases the total canvas size and adds a polished look.
Cropping an Image
Cropping is the process of "cutting" away the excess areas of an image to produce a smaller image. It's a good way to narrow the focus on the subject of the image, as well as making it fit into the theme's required image dimensions.
The image on the right is cropped to focus on the benches and change its aspect ratio without distorting it.
Rotating an Image
Sometimes after uploading an image to your store, you may notice that it has been rotated or is displayed in a different orientation. This usually occurs due to EXIF data on the images. EXIF (Exchangeable Image File Format) data provides supplemental metadata, such as the date, time, camera settings, and image orientation. If an image contains the wrong image orientation EXIF data, it will display as rotated.
To fix the EXIF orientation, open the image in your image editing program. Rotate the image to the correct orientation, then save the file and reupload your image. As an alternative, you can simply remove all EXIF data from your images in Windows and macOS.
Optimizing Your Images
Resizing your images can reduce the image load time on your store, but there may be other factors causing images to load slowly. Practices like decreasing image file sizes and optimizing your theme’s use of the BigCommerce Content Delivery Network can also help to improve page speed.
For more information on best practices, see our article on Optimizing Your Images.
Recommended Image Editors
You can make many common image corrections using the image editing programs already installed on your computer (such as Photos for Windows or Mac), or with your preferred image editing software. We recommend the following programs and online editors:
FAQ
Where can I get help editing images?
For assistance with adjusting your images, we recommend using our Agency Design Request program to get in touch with a Certified BigCommerce Agency Partner.
My image is changing after I upload it, how do I fix it?
If you have already already removed the image’s EXIF data, your theme’s image settings may be changing the image’s appearance. The next chapter of this guide will provide guidance on using store and theme settings to fix image display issues.
