Resizing and cropping your images

Editing the size of your images to match your theme is an important step. Images that are properly resized and cropped look professional and clean. Before you begin, you need to identify the required size of the image according to your theme. Then you can begin resizing or cropping the image.

Prerequisites

1. Know the purpose of the image. Images can be used for products, headlines or banners. Each location will require a different size of image.
2. Find out the dimensions required by your theme for your image. To find out, visit the theme manual. For more information on finding theme manuals, click here.
3. Obtain images to upload.
   • Your images should be at least as large as the dimensions required by the theme.
   • Reduce the amount of editing time needed. Obtain images that have the similar orientation and dimensions as what is required by the theme.
   • Images should be located in an easy to find folder on your Mac or PC.
   • Your image must comply with the image requirements for the eCom platform. Read about the requirements, here.
4. Have the software required to edit the image. For a guide on available software, click here.
5. Decide whether you will resize or crop your image.
   • Cropping an image prevents it from being skewed or stretched. To effectively crop an image, calculate the required ratios based on the theme manual. Use those ratios to determine how much of your image you should crop. See this example for more information.
   • When resizing an image, make sure you resize proportionally. Only resize images when its dimensions are too large. Large images can increase loading times which affects SEO and conversion on your website.

Instructions

1. Open the image in the software of your choice.
2. Resize or crop the image to size.
3. Save the edited image to your computer.
4. Upload the edited image to eCom.

Cropping a portrait image for a landscape purpose

Use the following example to learn how to crop an image that may not be originally designed for your purposes. The explanation here can be applied to most cropping needs.

Prerequisites check

1. The purpose of the image is to be a headline in our eCom store.
2. The installed theme is Conform Plus. The manual for Conform Plus states that the dimensions of headlines should be width: 1138px and height: 400px.
3. We will be uploading this image of a dog. It's original dimensions of the image are: Width: 2886px and Height: 4207px. The format of this image is .jpg which is supported.
4. The software being used is Mac software on Preview.
5. Calculating how we will crop the image:
   1. First we calculate the required ratios between width and height based on the dimensions provided by Conform Plus.
      1. The required ratio width to height is 1138/400=2.845. The required ratio height to width is: 400/1138=0.35.
      2. This means that the width of the image should be 2.825 times wider than it is tall. And the height of the image should be 0.35 times taller than it is wide.
   2. We choose to crop the height. The original height is 4207px. 4207 x 0.35=1472.45. So the height of the image must be cropped to 1472px.

      The final result:

      

      NOTE: To keep the full height, add bars beside the image to fill it out to the right dimensions. In this case the image would have to be made 11884px wide. (2.845 x height: 4207px=11884px.)

      For example:

      

Steps

1. Open the image in Preview.
2. Select all by pressing Command + A.
3. Drag the selector so to have a width of 2886px and a height of 1472px and click Crop.
4. Save the image.
5. Upload the image to Headlines in Lightspeed eCom by following the instructions located here.