A basic understanding of photo editing can be useful for anyone managing a WordPress website or WooCommerce/ecommerce shop.
If you’re managing a WooCommerce store, it’s best practice to ensure that all images have the same dimensions (ie 400×400, 500×500 etc) so that product images look more organized on the page.
Ideally, you want to resize your images so you’re not uploading massive files to the server which can affect site performance and eat up your hosting storage quickly. Especially if you have a store that has thousands of products, this can end up costing you more money having to upgrade to a new hosting package to accommodate all the oversized images.
Albeit, WordPress does have a basic photo editor which allows you to scale, rotate and crop images easily through the media library which is useful when uploading images that are too large it does have limitations such as batch processing, setting canvas dimensions and other options that the tools in this article provide.
NOTE: Canvas size is the area that surrounds an image. If you’re uploading product images to your WooCommerce shop, you want to make sure they all have the same dimensions otherwise it can throw the whole page design off by having some product images that are landscape and some that are portrait.
As a quick fix you can technically use CSS to set the max-height for your product image however this cause unwanted distortion and make your product images look poor see below.
By editing photos you can resize images and set canvas sizes so they are displayed optimally on your website.
In this article, you’ll learn to edit images easily using a variation of free online tools, Google Chrome extensions and the WordPress image editor that can be useful and an alternative for those who don’t have a copy of Adobe PhotoShop.
Resize Images in WordPress Editor
Large images can impact to page loading time as they contribute to a sites overall page size. In short, the larger the page size the slower the loading time.
Therefore, an image that is 5000×5000 pixels compared to one that is 500×500 will likely have a larger file size and impact site performance.
Uploading over-sized images is a common mistake made by site owners and administrators.
Using the WordPress photo editor you can resize images by simply changing the image dimensions to suit your needs.
To do this follow the instructions below:
1. Go to your Media Library
2. Select the image you wish to edit
3. Click on the “edit image”
4. Enter the width dimension (height will scale automatically)
5. Click the Update button
Batch Image Resize (https://bulkresizephotos.com/en)
If you have a several images to resize, you can do this using this bulk image resize tool which allows you to upload images, set the dimensions and process them at once.
This handy tool allows you to also add canvas area around the image so they can have equal dimensions as well as convert images to jpg which is the ideal image format for web.
To do this follow the instructions below:
1. Choose “Exact Dimensions” from the menu
2. Click the “Choose Images” button
3. Select the images to resize from a folder
4. Click the “Start Resizing” button
Tip: If you’re running an ecommerce shop, you don’t want to be uploading images that are too large (ie 2000 pixels width). This can take up additional space on your server and hinter site performance. If you have images that come in different dimensions ( ie portrait and landscape sizes then I recommend running two passes to format the images to be resized and have equal dimensions.
- Use the “Width” option to resize all the images to have the same width (ie 350px)
- Use the “Exact Dimensions” option to make sure the products are centered within the canvas and have equal dimensions (450×450).
The formatted images will all have equal dimensions with white space around them.
Pixlr X (https://pixlr.com/x/)
Pixlr X is another free online tool that can allow you to edit photo dimensions and canvas size easily.
To edit an image, follow the instructions below:
1. Click on “Open Image” on the left menu
2. Click on the Properties icon
3. Select “Canvas Size”
4. Enter the values (TIP: the canvas size should be slightly larger than the original images width.)
When saving your image you can choose the file type and image quality to optimize images for web.
Photo Editor Chrome Extensions (add extension)
There are several photo editing chrome extensions available in the Google extensions library that can be downloaded for free.
One of which is the the the Photo Editor extension.
While this photo editing chrome extension is reminiscent is very basic, it allows you to easily resize, crop, change canvas size and position product images among other options.
After installing the extension, click on the icon on the top right of your browser.
1. Select on File->Open to select an image on your desktop
3. Choose Image->Size to edit the dimensions (or canvas size)
3. Center the image within the canvas
4. File->Save As (Save as JPG)
There are several free photo edging Google Chrome extensions, softwares and online tools that allow you to edit images for your website. Whether you’re managing an ecommerce shop or need a basic photo editing tool these options might be all you need and can make great alternatives to using Adobe PhotoShop which can cost hundreds of dollars.