All Collections
Lightspeed
Resizing and cropping your images
Resizing and cropping your images
Niels van Vlerken avatar
Written by Niels van Vlerken
Updated over a week ago

An important step is resizing your photos to suit your theme. Images that have been resized and cropped appropriately will look professional and beautiful. Before you start, you need to determine the desired size of the image based on your theme. Then you can start resizing or cropping the image.

Requirements

  1. You need to determine what the purpose of the image is. Images can be used for products, headlines or banners. Each location requires a different size of the image.

  2. Read more about the required dimensions of your image. To determine this, read the theme manual. For more information about finding theme guides click here.

  3. Obtain images to upload.

    • Your images should be at least as large as the dimensions required by the theme.

    • Reduce the required processing time. Use images that have the same orientation and dimensions as the images the theme requires.

    • The images should be in an easy-to-find folder on your Mac or PC.

    • Your image must meet the image requirements for the eCom platform. Read hermore about the requirements.

  4. Make sure you have software to edit the image. For a guide to available software click here.

  5. Decide whether to adjust or crop your image.

    • Cropping an image prevents it from shrinking or stretching. To crop an image effectively, calculate the necessary proportions based on the theme manual. Use these ratios to determine how much of your image to crop. See this example for more information.

    • When resizing an image, make sure to resize the image proportionally. Only resize the image if the image is too large. Large images can increase loading times, impacting SEO and conversion on your website.

Instructions

  1. Open the image in the software of your choice.

  2. Resize or crop the image.

  3. Save the edited image to your computer.

  4. Upload the edited image to eCom.

Toont een niet-gesneden afbeelding van een hond. De hond zit en kijkt naar de camera.

Crop a portrait photo for a landscape format image

Use the following example to learn how to crop an image that was not originally designed for your purpose. Cropping for different purposes is explained here.

Check conditions

  1. The purpose of the image is to be used as a headline in our eCom shop.

  2. The installed theme is Conform Plus. In the Conform Plus manual, the dimensions of the head are: 1138 px and height: 400 px.

  3. We will upload the image of the dog. The original dimensions of the image are: Width: 2886 px and Height: 4207 px. The format of this image is .jpg and it is supported.

  4. The software used is Mac software on Preview.

  5. To calculate how we are going to crop the image:

    1. First, we calculate the required ratios between width and height based on the dimensions supplied by Conform Plus.

      1. The required width to height ratio is 1138/400=2.845. The required height to width ratio 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 its width.

    2. We choose to crop the height. The original height is 4207 px. 4207/0.35=1472.45. So the height of the image should be cropped to 1472px.

      The end result:

      Toont een afbeelding van een hond. De afbeelding is bijgesneden. Alles wat je kunt zien, is zijn kop.

      NOTE: To maintain full height, add bars next to the image to fill it in to the correct dimensions. In this case, the image should be made 11884 px wide. (2,845 x height: 4207 px=11884 px.)

      For instance:

      Toont een afbeelding van een hond met twee zwarte balken links en rechts

To step

  1. Open the image in Preview.

  2. Select all by pressing Command + A.

  3. Drag the selector to a width of 2886 px and a height of 1472 px and click Crop.

  4. Save the image.

  5. Upload the image to Heads in Lightspeed eCom by following the directions here.

Toont de afbeelding van de hond geüpload als kop voor een eCom-shop.
Did this answer your question?