Skip to content
WordPress Guide

How to Crop an Image in WordPress and Resize It

The two places to crop an image in WordPress, how scaling and rotating work, how to restore the original, and why resizing before upload is usually better.

A hand on a white keyboard beside a monitor
7 sections · 7 min read
In this article · 7 sections

The photo is nearly right. There is a bin in the corner, or the shot is sideways because a phone decided it knew best, or it is so tall it pushes the whole page down. You do not want to open Photoshop for that, and you have heard WordPress can fix it itself.

It can, within limits. There are two places to crop an image in WordPress and one place to scale it, and they behave differently. Knowing which one you are using saves you from editing the wrong copy, or from shrinking a picture when you meant only to frame it.

Three tools that look alike

Tool Where it is What it changes
Crop in the Image block The block’s toolbar, in the page editor Saves a new, cropped copy to the Media Library and uses it in this block
Edit Image in the Library Media → Library, on the image itself Edits that Library item, which affects where it is used afterwards
Aspect ratio and Width settings The block’s sidebar Only how the image is displayed; the file is untouched

The third one is not really cropping at all. Setting the Aspect ratio to Square, for example, trims what visitors see, but the full file still loads. That is perfect for making a row of photos look even, and pointless if your aim was a smaller download.

How to crop an image in WordPress from the page editor

Use this when the picture only needs reframing for this one page.

  1. Open the page and click the image to select it.
  2. In the toolbar above the image, click Crop.
  3. Drag the image inside the frame to choose what shows, and use the zoom slider to tighten the shot.
  4. Pick an aspect ratio from the toolbar menu if you want a fixed shape, such as square or 16:9, or leave it free.
  5. Use the rotate button if the photo is on its side.
  6. Click Apply.
  7. Save or update the page.

When you apply, WordPress creates a new image in the Library with your crop and places it in the block. The original upload stays as it was, so other pages using it are not affected, and you can always go back to it with Replace. The flip side is that every crop adds another item to the Library, so it is worth not cropping the same photo five times while you make up your mind.

If the Crop button is missing, the image probably came from another site by URL or is an SVG; the editor can only crop images stored in your own Library.

Editing an image in the Media Library

Use the Library editor when the change should apply wherever the image is used from now on, for example straightening a crooked photo before you put it on several pages, or trimming a logo with too much empty space.

  1. Open Media → Library and select the photo you want to change.
  2. When its details open, click Edit Image below the preview.
  3. Above the image are Crop, Image Rotation (which also holds the flip options), and Undo and Redo. The panels on the right hold Scale Image and Thumbnail Settings, plus Crop Image once you start cropping. The layout has shifted a little between versions.
  4. To crop, click Crop, drag on the image to draw a selection and adjust its corners, then click Apply Crop. The crop panel also lets you type an aspect ratio or an exact selection size.
  5. Under Thumbnail Settings, choose whether the change applies to all image sizes, only the thumbnail, or all sizes except the thumbnail. The middle option is handy when only the small square on the blog page looks wrong.
  6. Click Save Edits. Nothing is kept until you do.

The original is kept

WordPress does not overwrite your upload. It writes new files for the edited version and remembers the original. After an edit, a Restore original image option appears in the editor’s right-hand panel, and it undoes every change in one go.

One thing to expect: pages where you had already placed the image may keep showing the old version, because the block stores the file address it was given at the time. If a page still shows the old crop, select its image and use Replace to pick it again from the Library.

How to resize an image in WordPress, and when not to

In the Library editor, the Scale Image panel shows the original dimensions. Type a new width, the height follows to keep the proportions, and click Scale. WordPress will only make an image smaller this way. It cannot enlarge one, and you would not want it to: enlarging only spreads the same pixels thinner.

Scaling here is useful in one situation: you uploaded a huge photo, you do not have the original file handy, and you want the full-size copy to be sensible. For everything else, resizing before upload is better. A file resized on your computer is smaller from the start, uses less storage, and gives you control over sharpness and compression. Our post on image dimensions versus file size explains what width to aim for, and the free image compressor on our site resizes and compresses in the browser without uploading anything to us.

WordPress does some resizing automatically. It makes smaller copies of each upload for thumbnails and phones, and it scales very large photos down when they arrive. That automatic work does not shrink your original, and it is not a reason to upload camera-sized files. How those copies are used is part of our guide to how WordPress handles images.

Showing an image smaller without changing the file

Often you do not need a new file at all, only a smaller display. In the Image block sidebar:

  • Resolution chooses which copy WordPress loads: Thumbnail, Medium, Large or Full Size. Picking Medium for a small image beside text means visitors download the smaller file.
  • Width and Height set the displayed size. Leave one blank, or use the aspect ratio setting, to avoid squashing.
  • Aspect ratio with the Scale option (cover or contain) controls how the image fills a fixed shape.

Choose the Resolution first, then fine-tune the width. Setting a width of 300 pixels on a Full Size image still makes visitors download the full file.

What can go wrong

  • The crop looks right in the editor but not on the site. Your theme may apply its own crop, especially on blog lists and featured images. Check whether the image you edited is the one the theme is using.
  • The edited image looks soft. You cropped a small part out of a small photo. There are not enough pixels left; use a larger original.
  • Thumbnails on the blog page cut off faces. That is the theme’s crop size, not your edit. Use the Library editor’s thumbnail-only option to reframe, or read our post on blurry and wrongly cropped WordPress images for the deeper causes.
  • The photo is still sideways. Phones store orientation separately from the pixels. Rotating once in the Library editor and saving usually settles it.

If you landed here while learning your way round the dashboard in general, our beginner’s guide to running WordPress takes the other everyday jobs one at a time.

Frequently asked questions

Does cropping in WordPress make the page load faster?

A little, if the crop removes a lot of the picture, because the new file holds fewer pixels. The Aspect ratio setting in the block does not help, since it only hides part of the same file. If speed is the goal, resizing and compressing the photo before upload makes a much bigger difference than any crop inside WordPress.

Can I crop several images to the same size at once?

Not with the built-in tools, which work one image at a time. For a uniform look, the block’s Aspect ratio setting is the quickest route because it applies a shape without new files. The Gallery block also has an option to crop images so they line up. For real batch cropping, do it on your computer before uploading.

Why is the Edit Image button missing for some files?

The editor needs the server’s image library, usually GD or Imagick, and it works only on formats that library can handle. SVG files, PDFs and images on another site cannot be edited. If the button is missing for ordinary JPEGs, the server may lack image support, which your host can check.

Will restoring the original image undo crops made in the block editor?

No. A crop made in the Image block is saved as a separate new item in the Library, so the original’s restore option does not touch it. To undo a block crop, select the image in the page, choose Replace, and pick the original image from the Library again.

If the photos on your site keep coming out at odd sizes however carefully you crop them, the cause is often in the theme’s image settings rather than in the pictures. Tracing a fault like that is what our WordPress bug fixing service is for.

Next in this series: How to Set a Featured Image in WordPress

Is Your Website Working Properly?

Get a free website health check from WebMaintor. We'll review your website's speed, security, forms, and technical health — and tell you exactly what needs attention.

No obligation. No automated reports. A real review by our team.