Automatically Downsize Large Images in WordPress Using Hooks & WebP

Uploading big images to your WordPress site? 🐌 Slows it down, right? Nobody likes a slow site—not you, not your visitors, and certainly not Google. But don’t stress! There’s a smart way to automatically downsize large images in WordPress using hooks and convert them to WebP—the web’s favorite lightweight image format.

In this article, we’ll walk you through it all. No developer degree required. Just some simple tweaks and fun coding magic. Let’s roll! 🚀

🎯 Why Optimize Images at All?

Glad you asked! Here’s why optimizing images is a big deal:

• Faster page loads = happier visitors.
• Better SEO – Google loves speed.
• Less storage and bandwidth usage.
• Mobile-friendliness – perfect for smaller screens.

Now imagine doing this automatically—every time you upload an image. That’s the dream. Let’s make it real.

🧩 What Are Hooks in WordPress?

Hooks are awesome. They’re like secret entrances into WordPress code. Using hooks, you can tell WordPress to do something cool every time an event happens. For example, when someone uploads a new image.

There are two types:

• Action hooks – Do something when a certain event happens.
• Filter hooks – Change data before it gets used or displayed.

To downsize images, we’ll use an action hook triggered when media uploads, and then filter the image output to convert it into a WebP.

💡 How to Automatically Downsize Images

Here’s a step-by-step guide to resize images as soon as they are uploaded. No effort, all magic!

1. Open your theme’s functions.php file

   You can find it under Appearance > Theme File Editor. But… always make a backup first!

2. Add this code snippet:

   
   add_filter('wp_handle_upload_prefilter', 'limit_image_dimensions');
   function limit_image_dimensions($file) {
     $imageEditor = wp_get_image_editor($file['tmp_name']);
     if (!is_wp_error($imageEditor)) {
       $size = $imageEditor->get_size();
       if ($size['width'] > 1920 || $size['height'] > 1080) {
         $imageEditor->resize(1920, 1080, false);
         $imageEditor->save($file['tmp_name']);
       }
     }
     return $file;
   }
       

   This code resizes any giant image to max dimensions of 1920×1080. Feel free to adjust!

Once in place, this will make your uploads lighter and faster without you lifting a finger.

🖼️ What About WebP Format?

Glad you remembered. WebP is like JPEG’s smarter cousin. It keeps your image looking sharp but makes the file size way smaller.

WordPress already supports WebP natively from version 5.8 and up. You just need to tell it to convert your images to WebP when they’re uploaded. Let’s do it.

🔄 Convert JPEG/PNG to WebP on Upload

We’ll use a filter hook and a bit of PHP. Don’t worry—it’s painless.

1. Save your original image (optional)

   If you want to keep the original JPEG or PNG too, add this before the conversion line:

   
   // This step is optional:
   copy($file['tmp_name'], $upload_dir['path'] . '/' . $filename . '-original.' . $ext);
       

2. Add this full snippet to functions.php:

   
   add_filter('wp_handle_upload', 'convert_image_to_webp');
   
   function convert_image_to_webp($upload){
     $file = $upload['file'];
     $info = pathinfo($file);
     $ext = strtolower($info['extension']);
   
     if (in_array($ext, ['jpg', 'jpeg', 'png'])) {
       $img = imagecreatefromstring(file_get_contents($file));
       $webpPath = $info['dirname'] . '/' . $info['filename'] . '.webp';
   
       imagewebp($img, $webpPath, 80);
       imagedestroy($img);
   
       unlink($file); // Delete original file
       $upload['file'] = $webpPath;
       $upload['url'] = str_replace($info['basename'], $info['filename'] . '.webp', $upload['url']);
       $upload['type'] = 'image/webp';
     }
   
     return $upload;
   }
       

   That’s it! When you upload a JPEG or PNG, WordPress now replaces it with a WebP version. 💨

🚧 Important Notes

• Make sure your server has imagewebp() support (via GD or Imagick).
• Always test on a staging site before going live.
• Some older browsers don’t fully support WebP. Consider fallbacks if needed.

Want to check if WebP works? Right-click an image > Open in new tab > Check the file extension!”

🛡️ Using a Plugin Instead (For the Lazy Days)

Not feeling like messing with code? No problem. There are great plugins that can do this for you. Some favorites:

• ShortPixel – Converts images to WebP and resizes.
• Smush – Super popular, free versions available.
• WebP Converter for Media – Simple and focused on just that.

Plugins are great. But doing it yourself with hooks gives you full control and doesn’t add any plugin bloat to your site.

💥 Final Tip: Make It Foolproof

Want to go the extra mile? Add a notice if users upload super large images like 5000x5000px. This helps non-tech users know what’s happening behind the scenes.

add_filter('wp_handle_upload_prefilter', 'warn_large_upload');

function warn_large_upload($file){
  list($width, $height) = getimagesize($file['tmp_name']);
  if ($width > 4000 || $height > 4000){
    echo 'Hey! Your image is huge. We’re resizing it for performance. 😎';
  }
  return $file;
}

🎉 Wrapping It All Up

You did it! 🏆 You learned:

• Why large images are bad for WordPress performance.
• How to use hooks to automatically resize them.
• How to convert them to WebP on the fly.
• How to choose between code and plugins.

Your site is now faster, smarter, and more user-friendly. All thanks to a little PHP and a lot of caffeine (probably ☕).

Now go out there and build something amazing. Or, just enjoy that your site is loading like a rocket. Either works. 😄

Happy WordPressing! 💻👍