Step by step instructions for choosing the right size image

To follow this tutorial, you must first log into your website.

1. WordPress Resizing

When you upload images to your WordPress website, the original image is saved, and several other sizes are also created. This is because when you insert an image into a page on your website, there’s no point using a very large image if you’re only wanting to display the image at a small scale.

The standard sizes created are Original, Full Size, Large, Medium and Thumbnail. Depending on your website package, there may be other sizes available as well.

2. Choosing The Size

Choosing the best size image is done by first determining where the image will appear on the page, and what type of element you’re working with. For example, if you’ve added an image slider to your site, you’ll generally need a “Full size” image, whereas if you’re dropping an image into a small column, you’d only need the “Medium” image.

Typically, when working with our layout builder, you’ll also be using columns which range in size from full width to 1/5 of the page width. Again, this is where you’ll need to choose an appropriate image size based on the width of the column.

If your images are extremely large, that’s ok, because our software will enforce a maximum height/width. So you can just upload the images and the software will take care of it. But there are some occasions where the image you’re using just won’t quite fit into the space you want, and you may need to edit the image prior to uploading. Here are a few options:

https://picresize.com/
https://resizeimage.net/
https://resizeyourimage.com/
https://www2.lunapic.com/editor/?action=resize
Note that there are also some basic image editing features (crop, rotate, resize) built into the website as well. Just go to Media > Library > edit the image in question.

3. Recommended Sizes

Slider/background image
For a slider or background image that spans the full width of the website, you should have a minimum of 2000px wide to ensure good quality across all screen sizes.

Full width column
If you are using an image to fill the width of the website, you need to ensure it is 1200px wide.

1/2 width column
If you are using an image to fill 1/2 of the width of the website, you need to ensure it is 600px wide.

1/3 width column
If you are using an image to fill 1/3 of the width of the website, you need to ensure it is 400px wide.

1/4 width column
If you are using an image to fill 1/4 of the width of the website, you need to ensure it is 300px wide.

1/5 width column
If you are using an image to fill 1/5 of the width of the website, you need to ensure it is 200px wide.