Have you found that after inserting an image into a page on your WordPress website (using the Divi theme or any theme for that matter) that is looks too small? Then there are a few things you can check.

1. Your uploaded image is the right size for the space on your web page.

 

You might have uploaded an image that is too small. If you have, then you may see inconsistent behaviour. Sometimes the image may appear small, sometimes it may appear stretched as WordPress tries to resize it to fit the allocated space.

How do you fix this?

First, understand the size of the space your image needs to fill. For example, if you are using Divi and you have a two column layout and one side of the column is used for an image, you need to find the recommended size for an image placed in a half page column.

The image below shows a row with two columns, the left half column contains an image.

 

WordPress Image is in half page Divi column

 

To find the recommended size of this image use this image size guide by Elegant themes, the creators of Divi.

If you look at the guide you will see a section containing the different layouts and the recommended pixel widths. The image below is a small section from that guide.

 

Divi image guide size for half column

 

 

You can easily find the minimum width your image needs to be using this guide.

Next you need to find the height. The height depends on the aspect ratio you want for your image. I don’t want to repeat what is already in the image size guide, so I recommend you read it and find your ideal image height.

Remember you can always crop your images with free online tools. Read my guide here about image optimisation which contains a link to a free online image cropping tools.

How to optimise images for the web in 2 simple steps

If you have the right size image but it is still too small then you need to check the following.

 

2. Your inserted image is the right size.

 

After you have uploaded your image, but before you insert it into your page, you need to select the image from the library then choose which size to you use.

WordPress gives you a few options, thumbnail, medium, large and full, depending on how big your original image is. Make sure you select the size appropriate for your page.

 

Size options when inserting an image in WordPress

 

If after making sure 1 and 2 are correct you still find your image is too small then you need to check the following.

 

3. Your CSS is defining your image sizes.

 

This check is more technical so if you are not technically confident please contact me so I can help you out.

To check if any CSS (cascade style sheets) is being applied to your image you need to inspect the HTML code, this is the code that is interpreted by your web browser which then displays your page.

I will explain how to inspect the code in the Chrome browser using an image in this post.

Hover your cursor above the image you want to inspect.  Do a right click with your mouse to display some browser options then click on ‘Inspect’.

 

How to display the chrome inspection tool

 

A window will appear at the bottom of the browser. It will be full of code. This may freak you out if you are not technically confident. If you are confident then find your image element. To do this click on the <img> tag in the code or hover over it. As you hover over the various html elements you will see a border around the corresponding element on the page. The image below shows the border around my image and the corresponding html code in the panel below.

 

 

 

 

 

 

 

 

Once you are confident the correct element is selected and highlighted, look to the panel on the right. Here you will find the CSS. Again, this will be tricky to understand for some people but for those who are happy to press on, look for the corresponding tag in the right hand panel. On this occasion I am looking for the ‘img’ tag. I can see the CSS reads;

img {
max-width:100%;
height:auto;
}

I know from experience that this isn’t forcing the image to be smaller. If it was it would say something like;

img {
width:200px;
height:100px;
}

 

Conclusion

 

Now you have three things to check to see what might be stopping you from having the perfectly sized images. If you try all three checks here and still find you have a problem, you can get in touch with me and let me know so I can help you.