Resize Images Automatically in WordPress with DevKit Pro

Clients upload photos straight from their camera or from stock sites, and every original of 2 MB or more stays on your server and in every backup. DevKit Pro can resize images automatically in WordPress: new uploads get scaled down to a max width and height you set, and images already on the server can be batch-resized in one click. In our test, a 2.3 MB upload ended up at 143 KB, and four existing images went from about 10 MB to about 500 KB.

The problem: huge original uploads

WordPress keeps the full-size original of every image you upload. When the page design never shows an image wider than about 1200 px, a 2–3 MB original is wasted disk space, and it gets copied into every backup you make.

In the video we drag four Unsplash photos into Media → Add New Media File. They are between 1.7 MB and 2.3 MB each. WordPress generates its thumbnails and a -scaled version, but the large originals stay in the uploads folder. With a whole media library of files like these, backups get big fast.

To start clean, we select all four in the Media Library and use Delete permanently.

Auto-resize on upload (set max width/height)

It's easier to stop oversized images at upload than to clean them up later. In DevKit Pro, the old Thumbnails tab has been renamed to Image Optimization, and it now has a Resize images section at the top.

1. Go to DevKit → Image Optimization.
2. Under Resize on upload, check Enable resize feature.
3. Enter a Max width and Max height. We used 1200 for both.
4. Click Save settings.

From then on, any image bigger than those limits is resized proportionally while it uploads. Your registered thumbnail sizes stay where they were, in the Thumbnails section further down the same tab.

Real example: 2.3 MB → 143 KB

Next we check that the resize really happens on the file, not just in the image's metadata.

1. Go to Media → Add New Media File and upload a single test image.
2. Open the uploads folder. The original of this image was 2.3 MB. The stored file is now 143 KB.
3. Open the file and check its size. The largest side is 1200 px, matching the limit we set.

Then we drop in the rest of the images together. Each one is resized as it uploads, and the files end up roughly 10 to 20 times smaller. If you know the largest size your design ever uses, enter that number and every image uploaded after that will fit it. You save that space on the server and again in every backup.

Batch-resize existing oversized images

Resize on upload won't help with a project that already has a full media library, like a site you just took over. For those images there is a second section on the same tab, Resize already uploaded images.

To show it, we first turned off Enable resize feature, saved, deleted the test images, and uploaded the four big originals again. That gave us a couple of megabytes per image in the uploads folder, sorted by size.

1. Go back to DevKit → Image Optimization.
2. Check Enable resize feature and click Save settings.
3. Under Resize already uploaded images, DevKit compares your existing images against the max width and height and shows how many are larger. In our case: Total Images: 4.

Run the resize job

Click Resize Old Images. The job runs in the background, and the section shows its progress as it goes: Resized Images counts up and Progress shows a percentage (we caught it at 2 of 4, 50.00%).

When it finishes, the counter shows Total Images: 0, Resized Images: 4 and Progress: No images to resize.

Result: 10 MB → 500 KB

Sorting the uploads folder by size again, the four images had dropped from about 10 MB to about 500 KB, in one click. On a real site with hundreds of oversized uploads, the savings on disk and in backups are much larger.

This feature does not compress anything. It only resizes images proportionally. A portrait image gets its height capped at the max value, and its width scales to keep the original aspect ratio. Landscape images work the same way with width. You get smaller files without any compression artifacts.

Who is this for

• Site builders whose clients upload camera or stock photos directly: set a max size once and every new upload stays small.
• Developers taking over an existing site with a bloated uploads folder: batch-resize everything that's too big without re-uploading anything.
• Anyone paying for backup storage or waiting on slow backups: smaller originals mean smaller backups.
• Anyone who wants smaller images without lossy compression: this is proportional resizing only.

FAQ

How do I automatically resize images on upload in WordPress? With DevKit Pro, go to DevKit → Image Optimization, check Enable resize feature under Resize on upload, set Max width and Max height, and click Save settings. Every image uploaded after that is resized proportionally to fit those limits.

Can I resize images that are already in the media library? Yes. With the resize feature enabled and saved, the Resize already uploaded images section shows how many existing images are bigger than your limits. Click Resize Old Images and DevKit resizes them in a background job that shows its progress.

Does DevKit Pro compress my images? No. At this point it only resizes proportionally. There is no compression, so you don't get compression artifacts.

Will portrait images get stretched or cropped? No. Resizing keeps the aspect ratio. For a portrait image the height is capped at your max value and the width scales to match.

How much space can this save? In the video, a 2.3 MB upload became 143 KB, and batch-resizing four existing images took them from about 10 MB to about 500 KB. Your results depend on the size of your originals and the limits you set.

Get DevKit Pro → dplugins.com