How to Resize Images in WordPress

There are three different jobs called "resize" in WordPress, and only two of them change the file. Dragging an image's handles in the editor changes how big it looks, not how much it weighs. Scaling in the media editor changes one file. Capping uploads with big_image_size_threshold changes every future file. A library that is already heavy needs a bulk tool.

Displayed size vs file size

In the block editor, the Image block offers two controls that look alike:

• Width and height (or dragging the handles) set the display size in HTML. The file does not change.
• Resolution picks which generated file is used — thumbnail, medium, large or full. This one changes what downloads.

Selecting "full" puts the largest file in src. The browser can still pick a smaller file from srcset, but an eager, above-the-fold image often loads the 1536 or 2048 version where a 600-pixel one would do. Pick the smallest resolution that fills the slot; the sizes on offer are explained in WordPress image sizes.

Resize one image in the media editor

1. Media → Library, open the image, click Edit Image.
2. Under Scale Image, enter a new width; the height follows the ratio.
3. Click Scale. The change is saved immediately.

WordPress saves a new full-size file with a suffix like -e1729500000000. The existing thumbnail, medium and large files are not rebuilt, so regenerate that image if you need them to match. The original stays on disk and Restore image brings it back. Scaling only reduces — WordPress will not enlarge an image, here or anywhere else.

Resize automatically on upload

Since WordPress 5.3, any upload with a side longer than 2560 pixels is scaled to 2560 and saved as photo-scaled.jpg. That scaled file becomes the full size used everywhere; the camera original is kept but not used. Change the limit with a filter:

<?php
// Cap the longest side at 1920 px.
add_filter( 'big_image_size_threshold', fn () => 1920 );

<?php
// Turn scaling off entirely.
add_filter( 'big_image_size_threshold', '__return_false' );

Put it in a small plugin or functions.php. Notes:

• PNG is included since WordPress 6.8. Versions 5.3–6.7 skipped PNG uploads, so older sites may hold full-size PNGs.
• New uploads only — until you regenerate. A full wp media regenerate rebuilds from the camera original and applies the current threshold to existing images too.
• Disabling it makes "full" the true original again — sensible for photography sites, wasteful for blogs.

1920 is a reasonable cap for most content sites: it covers full-width heroes on large screens. Photography and portfolio sites may want to keep 2560.

Bulk resize an existing library

Core has no bulk resize. The options:

• An image optimization plugin with a "resize larger images" setting. It shrinks originals above a maximum width during its bulk run, together with compression. Imagify, for example, resizes oversized originals to a width you set (its minimum is your largest registered size — 2048 px unless you remove the hidden 2048×2048 size) and keeps a backup of each one, so the bulk pass is reversible — useful on a blog where years of phone uploads went in at 4000 pixels.
• A dedicated resize plugin, if you want resizing without compression.
• Command line on the server, for large libraries, then regenerate thumbnails so every size is rebuilt from the smaller originals. If an image has a -scaled copy, resize the camera original as well, or regeneration restores the old size.

Before any bulk resize:

1. Back up wp-content/uploads — see WordPress backup plugins.
2. Run on a staging copy or a small batch first.
3. Check a few images at full size on the front end.

Selection criteria for optimizers are in choosing an image optimization plugin.

Choosing the right maximum

The cap is a trade-off between sharpness on large screens and weight everywhere else:

Whatever you choose, set it before a bulk resize, not after: the bulk pass should shrink originals to the same cap new uploads will get.

Resizing for mobile

WordPress already serves smaller files to phones through srcset, as long as the image is inserted through the editor or core functions and the generated sizes exist. Mobile-specific resizing is needed only for CSS background images, which bypass srcset — hero backgrounds being the usual case. For those, upload a sensibly sized file (1920 wide at most) and compress it hard, or use a page builder's per-device background setting.

WooCommerce

Product images use WooCommerce's own sizes, set in the Customiser, and are regenerated automatically when those sizes change. Inconsistent product image heights are a cropping question rather than a resizing one — see WooCommerce product image size.

Common mistakes

• Shrinking with the editor handles and expecting a lighter page.
• Setting the threshold below your content width, so full-width images are upscaled by the browser and look soft — see blurry images.
• Uploading photos as PNG, which makes every generated size several times heavier than JPEG or WebP.
• Bulk resizing without a backup. The resized originals cannot be enlarged again.
• Forgetting regeneration after resizing originals outside WordPress, leaving old, larger thumbnails in place.

Verify

1. Upload a photo larger than your threshold and check the uploads folder for a -scaled file at the expected size.
2. Inspect an image on the front end: the src should be a generated size, not the original, and srcset should list several widths.
3. After a bulk run, compare the total size of wp-content/uploads before and after.