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 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 in Theme Editor (Stencil themes) or Image Settings (legacy Blueprint themes). Most themes have a preset dimension that is optimial for the theme's design but it is adjustable so it meets the needs of your products.

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.

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 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

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

To 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 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

Was this article helpful?