Resize Images

This is a quick explanation on resizing WordPress images.

Say you setup a page on your website with images, but have to resize WordPress images because they don’t fit your layout. For example, on this page, one image is unpleasantly wider than the other.

No Problem!

Hover over your image in the Post Editor and click the pencil icon to open the Image Details panel.

The Image Details panel will allow you to perform several important functions. We’re looking at image size. Checkout the Display Settings section. Here you can specify the image alignment on the page, it’s size, and set “link to” value.

Click the Size dropdown. There will be at least three default sizes Thumbnail, Medium, and Full. Beside each, the pixel dimensions of the image are specified. The dimensions of Full size and Medium vary by the image. The size of the thumbnail is usually 150 by 150 pixels with a hard crop, meaning some of the image will be clipped.

Resizing WordPress images to match is very easy. Simply use the last option on the dropdown – Custom Size.

In our case, the narrow image was 200px wide and we want the wider image to match. ( I found the width of the narrow image by clicking the image and viewing it’s dimensions in its Image Details panel. ) So, we go to the Image Details panel of the wider image, choose Custom Size, and set the width to 200px. The height of the image is adjusted automatically to keep the image aspect ratio proportional.

Things to Consider when Resizing WordPress Images

For the Professionals: You do not want to scale a huge image down using this technique because it will slow down your website. Resizing the image using this technique does not resize the image file itself, so when someone loads you web page, they will load a very large file even though they won’t use it. Instead, edit the original image, or talk to us about setting up image compression software on your website.