DEV Community

Cover image for Auto-Convert Every WordPress Upload to WebP (Free, No Cloud Service)
Simran Kaur
Simran Kaur

Posted on

Auto-Convert Every WordPress Upload to WebP (Free, No Cloud Service)

If you have ever run a Lighthouse audit on a content-heavy WordPress site, you know the usual verdict: "Serve images in next-gen formats." Translation: your JPEGs and PNGs are too heavy, and WebP would cut them down a lot.

The problem is that nobody wants to convert images by hand, and most automated options either run as a bulk job you have to remember to trigger, or push your images to a cloud service with a monthly quota.

I wanted something simpler: upload an image, get a WebP, done. So I built a free plugin called Pixellize Image Optimizer, and this post walks through the problem, how the plugin solves it, and how it works under the hood.

Why WebP is worth it

WebP files are usually 25 to 35 percent smaller than the equivalent JPG or PNG at the same visual quality.
On an image-heavy page that is a real difference:

  • Faster Largest Contentful Paint, which is one of the Core Web Vitals Google uses for ranking.
  • Less bandwidth, which matters if you pay for CDN traffic.
  • No visible quality loss at sensible quality settings.

Browser support is no longer a concern. Every current browser handles WebP.

The approach: convert on your own server, on upload

Instead of a cloud API, the plugin converts images locally with the PHP GD or Imagick extension (almost every host has one). There is no account, no API key, and no paid tier.

The core flow:

  1. You upload an image to the Media Library as usual.
  2. The plugin generates a WebP version of the full image and every thumbnail size.
  3. Your front end serves the WebP automatically.

How it works under the hood

For WordPress developers, here is the interesting part. The plugin hooks into the standard upload and rendering pipeline rather than fighting it:

  • On upload, it taps into the attachment metadata generation so it can convert the full image and every registered sub-size, not just the original. That matters because responsive images use srcset, and a half-converted set defeats the purpose.
  • On the front end, it rewrites image URLs to the WebP version through the same filters WordPress already uses: attachment image source, the responsive srcset, and post content. If a WebP does not exist for a given file, the original is served, so nothing breaks.
  • File naming mirrors the original: image.jpg becomes image.webp, and a duplicate upload that WordPress renames to image-1.jpg gets image-1.webp. No surprises.

Keep your originals, or save the space

This is the part I am happiest with in version 0.4. You get to choose:

  • Replace mode (default): the upload becomes a single WebP and the original is removed to save disk space.
  • Keep mode: the original stays in your Media Library, a WebP is built alongside it, visitors are served the WebP, and you can put any image back to its original whenever you want.

In keep mode there is a one-click Restore action in the Media Library that points an attachment back at its source file and rebuilds its sizes. And when you delete an image, the plugin cleans up the WebP copies with it, so you do not end up with orphaned files piling up on disk.

Getting started

  1. Install "Pixellize Image Optimizer" from the WordPress plugin directory and activate it. It checks for GD or Imagick before activating.
  2. Optionally visit Tools then Pixellize Image Optimizer to set the WebP quality. The default of 85 is a good balance for most sites.
  3. Upload images the way you always do.

That is the whole workflow. The settings page also shows a savings panel: how many images were converted and how much storage you have saved.

A note on quality

Quality is adjustable from 0 to 100. A value between 80 and 90 keeps images looking clean while still cutting file size meaningfully. Going below 60 starts to show visible artifacts on detailed photos, so I would not push it lower without checking the results.

What is next

Bulk conversion of images you uploaded before installing the plugin is the next big feature on my list, followed by an option to resize oversized images on upload.

Try it

The plugin is free and open source (GPL):
https://wordpress.org/plugins/pixellize-image-optimizer

If you try it, I would genuinely like to hear what works, what breaks, and what you would want next. Drop a comment or open a thread on the plugin support page.

Set published: false so you can preview on dev.to first, then flip to true. Want me to add a cover image line, a code snippet showing the WordPress filter usage, or trim it shorter for a quicker read?

Top comments (0)