Image optimization at the root in WordPress

If you’ve spent any time working in platforms like Webflow, one of the biggest quality-of-life benefits is how image optimization is handled automatically. You upload an image, and without much thought, it’s resized, compressed, and served efficiently. That kind of native optimization prevents an entire class of performance problems before they ever reach production.

WordPress takes a different approach. It gives you far more flexibility, but it also assumes you’ll make deliberate choices about performance. Out of the box, WordPress will accept oversized images, store them as-is, and serve them repeatedly unless you intervene. Over time, this becomes one of the most common sources of bloat we uncover during audits.

Why root-level image optimization matters

Most image optimization plugins work after the fact. They scan the media library, compress images in bulk, or introduce additional processing during page loads. While this can help, the problem has already been introduced into the system.

Our approach at Liminals is to handle image optimization at the point it matters most: when an image is uploaded. By processing compression and modern formats at the root level, the media library stays clean by default. There’s less reliance on ongoing cleanup, fewer moving parts, and fewer surprises later on.

This approach mirrors what modern platforms do natively, while still preserving the freedom and flexibility that make WordPress such a powerful option.

A simplified look at our approach

Internally, our setup is slightly more involved, but the core idea is simple and reliable. Images should be resized responsibly, converted into modern formats, and stored efficiently from the start. Below is a pared-down version of a snippet we use regularly, written to be approachable and easy to modify.

This version focuses on converting uploaded images into WebP for broad browser support. If your server supports AVIF, the same logic can be adapted with minimal changes.

The Liminals image optimization snippet (WebP)

/**
 * Liminals image optimization
 * Converts uploaded images to WebP on upload
 * Compatible with PHP 7.4+
 */

add_filter('wp_handle_upload', 'liminals_convert_upload_to_webp', 20);

function liminals_convert_upload_to_webp($upload) {

    // Only process image uploads
    if (!isset($upload['type']) || strpos($upload['type'], 'image/') !== 0) {
        return $upload;
    }

    // Allow common image types
    $allowed_types = [
        'image/jpeg',
        'image/png',
    ];

    if (!in_array($upload['type'], $allowed_types)) {
        return $upload;
    }

    $file_path = $upload['file'];
    $editor = wp_get_image_editor($file_path);

    if (is_wp_error($editor)) {
        return $upload;
    }

    // Check WebP support
    if (!$editor->supports_mime_type('image/webp')) {
        return $upload;
    }

    // Prepare new file name
    $path_info = pathinfo($file_path);
    $new_file = $path_info['dirname'] . '/' . $path_info['filename'] . '.webp';

    // Set a balanced quality level
    $editor->set_quality(82);

    // Save as WebP
    $saved = $editor->save($new_file, 'image/webp');

    if (is_wp_error($saved)) {
        return $upload;
    }

    // Update upload data
    $upload['file'] = $saved['path'];
    $upload['url']  = str_replace(
        basename($upload['url']),
        basename($saved['path']),
        $upload['url']
    );
    $upload['type'] = 'image/webp';

    return $upload;
}

Adapting this for AVIF

If your server supports AVIF generation, this same snippet can be adapted by changing the target mime type and file extension. AVIF offers even better compression than WebP, but support can vary depending on hosting environment and PHP image libraries.

For teams that want to move incrementally, WebP provides a strong baseline, while AVIF can be layered in once server support is confirmed.

Why we prefer this over plugin-heavy solutions

We’re not opposed to plugins. But performance decisions compound over time. Each plugin adds complexity, maintenance overhead, and potential conflicts. For something as foundational as images, a small amount of intentional code at the root level is far more predictable than stacking optimizations later.

When images are handled correctly from the start, the entire site benefits. Pages load faster, layouts feel more responsive, and performance gains come without ongoing effort.

A final thought

Fast websites are rarely the result of one dramatic optimization. They’re the outcome of many quiet decisions made early and consistently. Image handling is one of the simplest places to establish that discipline.

This is the kind of work we quietly implement for our clients so they don’t have to think about whether their site is serving oversized, inefficient assets. It’s handled once, at the foundation, and it simply works as the site grows.