The adage, “a picture is worth a thousand words” has never been truer, especially where your WordPress website images are concerned.
With WordPress, you can embed images easily into your content but put in an image of the wrong size, and it will do nothing to enhance your readers’ experience, only serving to distract them.
WordPress does provide a handful of sizes that you can choose for your image but these sizes won’t always be right for the post – they may be too big or too small and sometimes you want just a little bit more control.
How to Set Your Dimensions
There are two ways to do this and the method you choose will make a difference to the effect. You can choose to add your image as a Featured Image, but you get no real control over the size – to change it you would need to get involved in editing the page template or using CSS to override it.
Adding your image directly to the post, using the Add Media button, gives you a great deal more control.
Using Add Media
When you use the Add Media button to insert an image, to start with you are given four size options:
- Thumbnail
- Medium
- Large
- Full size
Each one of these will have a dimension which is influenced by your original image size, the dimensions already specified in WordPress, and other factors. You will not see a way of specifying any different dimensions so how do you customize these?
The simplest way is to insert your image into your post and then edit it afterward. Go into the post content screen, select the image, and then click on the Edit panel – from there you can change the drop-down for the image size to ‘Custom Size’ and now you have full control.
One of the coolest features here is that when you change one of the dimensions, either height or width, the other updates automatically, ensuring the correct ratio or perspective is retained.
This is brilliant if you only want to change the image size. What about if you want more control though? You might want your images to have rounded edges or padding, for example, and, in that case, you would need to turn to CSS but that is more involved and not for this post.
Why You Need to Specify a Size
So, why can’t you just upload an image, in the size that you want it, and then set everything as full-size? What does it matter if the variables for the height and the width are set?
You might not care very much but I can assure that the search engines do care. To ensure that your WordPress site is fully optimized for SSO, one of the most basic things to do is to specify a dimension for the width and height for every image.
Once you specify the settings in the image dialog, WordPress will then add all the code in for you.
Avoid Issues with Resizing
Once upon a time, a long time ago, websites would only ever be viewed on desktop monitors.
Now, a website must look good on everything – a desktop, laptop, smartphone, tablet, even a smart TV and one of the best things you can do is, wherever you can, use ’max’ settings and percentages.
For example, if you have an image on a post that can’t be any bigger than 500px wide, rather than specifying it as 500px, use ‘max-width: 500px’ instead.
This won’t work for all images but be aware; what might not look too different on a laptop or desktop can look wildly different on a mobile device! Also, you might find that doing the work now means you don’t have to worry about responsiveness or resizing issues later.