WordPress: Image Too Big? Resize It

A client blog site had an image that was too big for the theme, so it stuck out over text.

You could use a dedicated image editing program to change the size of the image, using algorithms that keep the quality of the image as good as possible. One great program is Irfanview (free, I used it to add the red boxes on the images on this page).

WordPress however has built-in tools to crop (change what portion of an image gets displayed) or scale (proportionally adjust the display size of the image) . No having to FTP the image to your computer, edit it, upload the changes, and change the size  in your HTML. Here’s how to do it:

New Image:

You can resize an image when you add it to your post, just use the settings on the Add an Image screen:

(This image was too large to fit in the post, at 612 x 512 pixels, so I picked Medium (300 x 166). Click on it to see it full size.)

In the Size section, pick “Full Size” if the image is below about 500 pixels wide, depending on the Theme you are using. (The size is shown in the bottom right of the section, as Full Size. The image being imported when I grabbed the screen image was 448 wide by 249 tall.)

Existing Image:

Click on the Media button. You’ll see the Media Library. Find the image you want to edit.

Hover over the image, and you’ll see a link to Edit it. Click that link.

On the Edit Media screen, click the Edit Image button.

This screen lets you crop the image (only display a portion of it). Drag the mouse over the picture, adjust the edges of the white crop area by dragging the square handles (click the Image Crop “Help” link to see keyboard hints), click the Crop icon (the left-most icon). [Note: Some Themes and some Plug-Ins will interfere with the Crop feature, you may have to disable plug-ins or crop outside of WordPress.]

Click the Scale button to show the detail fields. You’ll get fields to adjust the size. As you change the width or height the other gets automatically adjusted to keep the proportions correct. Many Themes have room for about 500 pixels wide.

You will need the new URL for the picture (the old URL will have the original size). This is at the bottom of the Edit Media screen, in File URL.

After you’ve saved your changes, go back to your post, and put in the URL of the new image. (If you don’t, the post will keep showing the original image…)