Tutorials

How To Edit Images Using The WordPress Image Editor?

Posts written in WordPress often contain several images that enhance the value of the content. Acquiring, processing and adding these images into posts or pages is often time-consuming work.

Though there are sophisticated image processing software and plugins that facilitate complex image editing, for most purposes, the built-in Image Editor in WordPress does a fairly neat job. Basic image processing activities like cropping an image to required size, rotating an image and resizing can be done using this image editor.

How to Open an Image in the WordPress Image Editor?


# Method 1

To open an image for editing in the WordPress Image Editor, go to the admin Dashboard and click on Media.

In the Media Library page, click on the Add New button.

In the Upload New Media page that appears, click on the Select Files button. Choose the image file that you want to add.

Once the file is uploaded, the file name and its thumbnail are displayed on the screen. You will find an Edit link against each image that you have uploaded. Click on this link.

The image and its details appear. Click on the Edit Image button below the image to open the image in the Image Editor.

# Method 2

Alternately, you can edit an image while you insert it into a post. To do this, from the post editor, click on the Add Media button.

On the Insert Media screen, choose the Upload Files tab and click on the Select Files button to upload an image.

Alternately, if you have already uploaded the image you require, choose it from the Media Library.

Before clicking on the Insert into Post button, click on the Edit Image link in the Attachment Details section on the right.

Inside the Image Editor

Once you are inside the image editor, you can see the image and its details. The title of the image is on top and it can be changed. The permalink for the image is given below that. The image processing tools are lined up below that followed by the image itself. Two buttons – Save and Cancel are placed underneath so as to save or cancel the changes made.

The caption for the image, the alternate text (text that appears if the image cannot be displayed on the page ) and the description follow at last. The last three details can be usually filled in the Insert Media screen itself, but in case you miss it there, you can always edit them here.

Apart from the above details, there is a meta box titled Save on the right showing the details of the image file. The date and time of upload of the file, the URL of the image file which shows the path and filename with extension (format) of the file, the file name, the type of the file, the size of the file and its dimensions in pixels are displayed. These are for the user’s reference and cannot be changed directly here. When the image is edited, these details change accordingly.

Editing option 1: Scale

Often times, the user has to resize the image to make it fit into the layout defined by the theme. Scale or Resize is the option for this purpose.

On the right, there is a Scale Image meta box. The original dimensions of the image in pixels are mentioned in width x height format. You can specify the new dimensions in the input boxes provided underneath. Once you enter the new width or the new height, the other dimension gets automatically calculated and filled in.

Click on the Scale button to resize.

On resizing, a message Image saved appears. You can notice that the meta box displays the new dimensions now.

Usually, scaling down or resizing to a smaller size is preferred to resizing to a bigger size (scaling up). This is because scaling up causes a loss in image quality.

Editing option 2: Restore

Sometimes, the user may edit an image, find that the original version is a better choice and hence want to get it back. In such cases, the Restore Original Image option below can be used. Clicking on this expands it and displays a Restore image button. Click on this button to restore the image to its previosu form.

Note that the image gets restored to its original dimensions, in this case, with a success message.

This option can be used after any of the editing operations described below too.

Editing option 3: Crop

Another way of fitting an image within a post is to crop away the unnecessary portions from the image. To do this, click anywhere on the image and drag the mouse to make a selection.

On doing this, the Image Crop meta box shows the dimensions (width x height) of the selection in pixels. You can change these to adjust the size.

Alternately, you may want to have a certain aspect ratio i.e., the proportional relationship between its width and its height. In such a case, fill in the aspect ration in the input boxes, the selection automatically adjusts and the dimensions of the selection are displayed in the meta box.

Hovering the mouse over the selection shows the move cursor and you can move the selection window to adjust the area, keeping the dimensions intact.

Once a selection is made, the crop button above the image is enabled and you can click on it to crop the image to selection.

Editing option 4: Flip

Do you want a mirror image of the original? Click on the vertical flip button. Note that the dimensions remain the same.

You can also turn the image upside down by doing a horizontal flip. Note that the image dimensions again remain the same.

Editing option 5: Rotate

Do you want to rotate an image by 90°? Click on the rotate anticlockwise button to rotate it by -90°

Click on the rotate clockwise button to restore it and click on it again to rotate the original image by 90°

Though the rotation operation should interchange the width and height, the dimensions are not updated or displayed till the change is saved by clicking on the Save button.

Editing option 6: Undo

At some point of editing, do you want to undo one or more edits? The undo button gets enabled whenever a change is made.

Whenever a save is made, the undo button gets disabled. So, undo operations can undo changes made after the last save only.

Editing option 7: Redo

Whenever an undo is made, the redo button gets enabled. Undo the undo or redo the edit using this button.

After the required edits are made, click on the Save button to save the changes.

Finally, click on Update to update the media image of all the changes.

With the above basic utilities, you can do simple and quick edits on an image file before inserting it into a post or page.

Now Read: 11+ Best WordPress Image Optimization Plugins to Speed Up Your Site

This article is contributed by Menaka S, a WordPress developer, who loves to pen down the learning and thoughts of her day-to-day work. You can follow her on her Twitter handle @smenaka.

How To Edit Images Using The WordPress Image Editor?
5 (100%) 10 votes

1 Comment

  1. David

    Wow Though it’s very simple topic still I see very often any big publication or blogs actually go after this topic in-depth. Anyway thanks for the article I also have a site on wpwebhelp.com.

Comments are Closed

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!