Browse by Topic

Fixing Distorted Images

If uploaded images don't meet the theme's requirements or are inconsistently sized, they can appear stretched or blurry on the storefront. 

Example of image distortion

 
 

Preventing image distortion

Themes have preset image dimension requirements for carousel and product images. Knowing what these dimensions are before uploading images will help with finding images that already meet these requirements and determining which images need to be edited in order to be displayed correctly on the storefront.

See Finding Carousel Image Dimensions for help on locating the recommended carousel image dimensions for your theme.

For product images, you can find and adjust their dimensions by using Store Design for Stencil themes or  Image Settings for legacy Blueprint themes. Included in most theme documentation is the recommended product image dimensions for the theme's design. However, this is adjustable in Store Design so it meets the needs of your products. See Adjusting Store Image Sizes for more information.

 
 

Adjusting images

There are several ways to correct distorted images, so that product and carousel images look normal. Many of these corrections can be done by using free online image editors such as 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 start with larger images and make them smaller. Enlarging smaller images creates pixelation or artifacts that 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 with no distortion. This makes the image load time much faster than at its original size, and 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. Make sure you select Preserve Aspect Ratio before you resize the image, if the image editing program has this option. This will preserve the image shape.

Changing Image Canvas Size

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.

Canvas Resize

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.

Cropped Image

 
 

FAQ

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 twice as wide than it is tall, the aspect ratio would be 2:1. 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.

Why are my uploaded images displaying wrong/rotated?

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 images in Windows and macOS.

Why does my carousel looks cut off when using the recommended dimensions? 

If you are using Cornerstone, go to Store Design and expand the Home Page section. Check if Allows image to stretch on large screens is enabled. That setting should prevent undesired image cropping on the Carousel. 

Was this article helpful?