Browse by Topic

Fixing Distorted Images

When adding an image to the carousel or products, they may not look right when viewed on the storefront. The theme of the storefront has pre-defined size requirements for images. If the image is too small, the code of the theme will stretch or squish the image so it fits into the defined size.

Example of image distortion


Preventing image distortion

Themes have preset image dimension requirements for carousel and product images. Knowing what these are before uploading images will help with finding the right sized images or determining how images need to be adjusted.

See Finding Carousel Image Dimensions for help on finding out what image size to use for your carousel images.

For product images, you can find and adjust the dimensions by using the Stencil Theme Editor or Image Settings (Blueprint). Most themes have a preset dimension that is optimal for the theme's design but it is adjustable so it meets the needs of your products. See Adjusting Store Image Sizes for more information.


Adjusting images

There are several ways to correct this issue so product and carousel images look normal. You can make many of these corrections using free online image editors like Pixlr or any image editing programs already installed on your computer.

See the Additional Resources section for instructions on how to make the adjustments mentioned below with Pixlr.


Pro Tip! - It's easier to work with larger images and make them smaller. Enlarging smaller images creates pixelation or artifacts can make images look blurry or out of focus.

Resizing an Image

Resizing is the process of stretching or shrinking an image's width and height to force it to specific dimensions. This method of image adjusting is best used when the original image is very large but has a similar aspect ratio as the required dimensions. For example, if you have an image that is 6000 x 4000 pixels, you can resize it to be 1200 x 800 pixels. This makes the image load time much faster but preserves the shape and quality of the image.

Resize Example


Pro Tip! - Raw photographs from a digital camera typically have a much higher resolution than is necessary. They are good candidates for resizing.

Most image editing programs treat resizing like this. It can cause an image to look stretched or squished if it is being resized into an aspect ratio it is not similar to. If the image editing program has the option, make sure you select Preserve Aspect Ratio before you resize. This will preserve the image shape.

Changing Image Canvas Size

Adjusting the Image Canvas size lets you change the size without distorting the image or cutting anything out, many editing programs allow you to change the canvas size. Adding to this will add padding or space around the edges of the image. It makes the image the correct size without distorting it. The edge color can be adjusted in most programs or even set to transparent.

Canvas Resize

Cropping an Image

Cropping is the process of "cutting" 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.

Cropped Image



What is 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 wider than it is tall. See Aspect ratio (image) for a more detailed definition. 

Will this make my images load faster? 

Resizing is a way to optimize image load time, but there may be other factors that make an image load slowly. See Optimizing Your Images for more information.

The carousel looks cut off while using the recommended dimensions? 

If you are using Cornerstone, check in the Theme Editor under the Logo section. Check if Allows image to stretch on large screens is enabled. That setting should prevent undesired cropping. 

Was this article helpful?