Editing the size of your images to match your theme is an important step in creating a professional website. Images that are properly resized and cropped can enhance the customer experience and highlight products on your page.
Prerequisites
Before you begin, know your theme’s requirements and identify some key aspects of the image you want to use:
- Know the purpose of the image. Images can be used for products, headlines, or banners. Each purpose requires a differently sized image, so it is important to find one that suits your needs.
- To determine the dimensions and other specifications of the image required by your theme, visit the theme manual. For more information on finding theme manuals, click here.
- Obtain images to upload. When selecting an image, there are a few key points to keep in mind to reduce the amount of editing time needed:
- Images should be at least as large as the dimensions required by the theme.
- Images should have a similar orientation and shape as what is required by the theme.
- Images must comply with the image requirements for the eCom platform. To read about the requirements, click here.
- Decide whether you will resize or crop your image by considering the purpose of each option:
- Cropping an image prevents it from being skewed or stretched. Calculate the required dimension ratio based on the theme manual to effectively crop an image. Use those ratios to determine how much of your image you should crop.
- When resizing an image, make sure you resize it proportionally. Only resize an image when its dimensions are too large. Large images can increase loading times, which affects SEO and conversion on your website.
Software is required to edit the image. For a guide on available software, click here.
Instructions
- Open the image in the software of your choice.
- Resize or crop the image to size.
- Save the edited image to your computer.
- Upload the edited image to eCom.
Examples
If you find an image you want to use but your theme requires a different image shape or specific dimensions, you can crop the image to fit. The method used in the following example can be applied to a variety of situations and is a useful trick to add to your toolbox.
Prerequisites check-list
- What is the purpose of this image?
The purpose of the image is to be a headline.
- What are the theme requirements for a headline?
The installed theme is Ignite. The manual for Ignite states that the recommended dimensions of headlines should be 3,200 px width by 1,300 px height for a high-resolution headline.
- Does this image meet the requirements for the Ignite theme and eCom? Does this image fit its intended purpose?
- The original dimensions of this image are 5,100 px width by 3,400 px height, so the dimensions meet the requirements for this theme and for eCom.
- This file is either a .jpeg, .png, or .webp, which are supported by eCom.
- This image is similar to the size and shape necessary for a headline.
- Will you crop or resize this image?
To better fit the shape of a headline, crop the image, rather than resize it. To do this, the ratio between width and height needs to be calculated. This is calculated based on the dimensions provided by Ignite, which states that a headline should be 3,200 px width by 1,300 px height.- The required ratio width to height: 3,200/1,300=2.46.
- The required ratio height to width: 1,300/3,200=0.41.
Use this ratio to calculate the image dimensions:- If you have a preferred width, divide it by 2.46 to find the height you need.
- If you have a preferred height, divide it by 0.41 to find the width you need.
After you select the image and determine the required ratio, the image is ready to crop.
Cropping the height of an image
The image has an appropriate width but is too tall for the Ignite theme's requirement for a headline image. The height needs to be cropped to achieve the desired ratio. To calculate the new height:
- Since only height is being adjusted, the new height is calculated using the width to height ratio of 2.46.
- The width of the original image is 5,100 px.
- 5,100 px / 2.46 = 2,073 px.
The height of the image must be cropped to 2,073 px.
The final result:
Cropping the width of an image
To keep the height of an image, the width may need an adjustment to fit Ignite’s theme requirement for a headline image. To keep the full height, bars can be added beside the image to fill it out to the right dimensions. The steps to add these bars vary depending on the editing software used. To calculate the new width:
- Since only the width is being adjusted, the new width is calculated using the height to width ratio of .41.
- The width of the original image is 3,400 px.
- 3,400 px /.41 = 8,292 px.
The width of the image must be cropped to 8,292 px.
The final result:
Resizing an image
Resizing an image allows you to adjust an image that may already be proportionate to your needs, but is too large to fit the upload requirements of eCom. In the example above, the image created matches the proportion requirements for the Ignite theme but it is too large to be uploaded to eCom. To resize the image, calculate the dimensions for height and width:
- The width of the original image is 8,292 px.
- The recommended dimensions for the Ignite theme are 3,200 px width by 1,300 px height.
- The maximum image dimensions for eCom is 5,128 px height x 5,128 px width
The image must be resized to 38.3% of its original size for a dimension of 3,200px width by 1,300px height
Image editing software allows you to resize your image and compress your file size without distorting the image. To prevent any unwanted image distortion, it is recommended that you follow the steps provided in the manual of your image editing software, which may be found here.
Further reading
The steps above to resize and crop images can be used across multiple image types and themes. Familiarizing yourself with the tools available to you in your image editing software helps you enhance your customers’ experience and highlight products on your page. For more tips and customization options, check out the related articles below.