Manipulating images in WordPress
To add an image to your Page or Post, simply click the “Plus” button at the top of the Page/Post editing screen and scroll down to the Image block. From there, choose between uploading an image from your computer to the WordPress system, or using one previously uploaded in the Media libary. Follow the instructions and add the image.
But what next? If 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.
Basic size and alignment
Thee easiest way to resize an image is to highlight it, grab its handles and resize it with your mouse. You can set the alignment with the options that appear above the highlighted image:
Add a caption either at the point of uploading or directly in the Post or Page editor. The Alternative Text describes the image to blind users as well as search engines. It 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.
Scaling and cropping images in WordPress
Use these instructions after you have uploaded images to the system but before you have inserted them 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 viewers will notice increased load times for such pages, especially when using 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 need 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. Under Media, click on an image you would like to resize and choose the Edit button underneath it.
You will reach a screen where you can further manipulate your image. Look at the options under the Scale Image heading:
Type your desired width in the left-hand box. 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 includes with a lot of unsightly white space around it.
Start by clicking on the Edit Image button to reach the same editing screen we saw earlier. This time we will use the Crop functions:
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 cameras have settings to limit the size of images.
If your theme supports a featured image, you will find the slot for it in the right-hand column of the editing screen of your page or post. Featured image usually have a special purpose within the page design.
Want to know more?
Talk to us about your own website. Want more tips like this?
Category: WordPress Help
← Previous post: First steps in using WordPress
→ Next post: Adding a table to a WordPress Page or Post