No-fuss websites in Kent and the south east, with applegreen
Skip navigation

Manipulating Images in WordPress

We are assuming some knowledge of how to add images to WordPress posts and pages, gained either from the reader's own experience of from our more basic instructions page.

Basic size and alignment

So you've added your image but you're not really happy with how it sits in the page: you need to define its size and position.

For information, image size in websites is defined by width, not height, because width is the biggest constraint. It is defined in pixel (or px).

WordPress allows three sizes for images which it calls Thumbnail (smallest, usually square), Medium, Large and Full size. These options will be available for each image as it is inserted into a post or page (unless the image is smaller than the sizes defined). If you want to see where these sizes are defined, head over from the Dashboard to Settings > Media, where you can change the defaults for Thumbnail, Medium and Large sizes.

To change the parameters of an image you have inserted into a page or post, navigate (via the Dashboard) to the editing screen of the page or post concerned. With some installations, you may need to make sure you are in Visual Mode. Click on the image to select it, and some options will appear above it:

Selecting an image in WordPress

The first four square-ish icons concern alignment: play around with these to see what they do. The highlighted one indicates the alignment status of the image, in this case, left-aligned with no text next to it. You can choose to centre the image, or to align left or right with the text pulled up alongside.

The pencil icon to the right of the alignment icons takes you to the settings for the image in relation to this particular page or post. Click it to reach this screen:

Images options in WordPress

The alignment options are repeated there, but you have the size options as well, in this case medium. The Link To option determines what happens if the image is clicked: does it enlarge to a full version of itself, or take you to another page? The simplest option is None.

You can also add a caption (which will display near the photo if your theme is set up to support captions). The Alternative Text is a feature that enables blind users to know what the image is about, and it is also used by search engines. This should be descriptive and very short.

Don't forget to save your work: click the Update button on the Image Details screen to confirm your choices, and click the Update button on your page or post to make your changes take effect.

Resizing and cropping images in WordPress

This stage concerns images after they are uploaded but before they are inserted into a page or post.

Scaling
Images on a website should not be vastly bigger than is needed for the slot they occupy. If an image is oversized, you may not immediately notice because websites are designed to "squash" them into their slots. But this is done at the cost of load time, and you may find that your pages are heavy and take ages to load. This is especially important if your page is being viewed on a mobile phone.

Ideally, images should be only slightly larger than the slot available. So how do we achieve this, when modern phones and cameras take high-quality photos that can be very large?

To give an idea of size in pixels, most websites are not much more than 1000px wide. Full-size header images may go up to 2000px, but images inserted in text may need to be no wider than 800px. But many cameras produce images of 4-5000px, and the very good ones, 10,000px wide.

WordPress provides some handy tools for coping with this problem. Head over to Media from the Dashboard, click on an image you would like to resize and choose the Edit button underneath it:

Images options in WordPress

You will be taken to a screen where you can further manipulate your image. Look at the options under the Scale Image heading:

Scaling images in WordPress

Type your desired width in the left-hand box, and the size in the right-hand box, representing the image's height, will adjust automatically to the aspect ratio of your image. Click the Scale button underneath these boxes to save your image.

Cropping
The image below has been scanned and uploaded with a lot of white space around it. This will be unsightly when the image is embedded in a page or post:

Images that needs cropping in WordPress

Start by clicking on the Edit Image button to be taken to the same editing screen we saw earlier, but this time we will use the Crop functions:

Cropping an image in WordPress

Click on the Crop button to trigger the crop handles around the image. Drag these to the desired locations around the image, and click the crop button a second time to confirm the crop. More options are available by clicking the little question mark next to Image Crop on the right.

Then save your image in its cropped state: the new image will replace the old one. If this image is already in use in a page or post, it will update automatically there.

Further image options

If you have a large website with many unsized images, there are plugins you can use to reduce them all at once, for example Smush. Smush will not crop them for you, only compress the image files and reduce the load time of pages.

Some themes enable a featured image option: if so, you will find it in the right-hand column of the editing screen of your page or post. If your theme was designed by Applegreen Websites, the featured image, if enabled, will have a special purpose which will have been explained to you, consistent with the page design. If the theme is not one of ours, there is no harm in experimenting with adding an image and seeing where it ends up: you can always remove it if you don't like it!

What now?

Browse Applegreen's own collection of Wordpress designs. Have a look at what it's like working with us or contact us for a quote.

Last updated February 2020