Sirv Content Hub
Tutorial
February 16, 2026

How to Set Up a WordPress Image CDN (Step-by-Step)

Step-by-step guide to setting up an image CDN for WordPress. Covers plugin setup, auto WebP/AVIF, responsive images, and performance testing.

S
Sirv Team

Images eat up roughly half the average web page’s total weight. On image-heavy WordPress sites, that number climbs to 70% or more. An image CDN fixes this by optimizing and delivering your images from edge servers worldwide, slashing load times without you manually compressing every file.

This guide walks you through the full setup, from install to performance testing, with real config examples and benchmarks.

Why WordPress Sites Need an Image CDN

WordPress doesn’t optimize images aggressively out of the box. When you upload a photo through the media library, WordPress generates several predefined sizes (thumbnail, medium, large, full) but keeps the original format and applies barely any compression. The result: most WordPress sites serve oversized JPEGs and PNGs from a single origin server, often hundreds of miles from the visitor.

An image CDN solves three problems at once:

  1. Format optimization. It converts images to WebP or AVIF automatically based on the visitor’s browser, cutting file sizes by 30-50% with no visible quality loss.
  2. On-the-fly resizing. Instead of relying on WordPress’s fixed thumbnail sizes, an image CDN generates any dimension on demand through URL parameters.
  3. Global delivery. Images are cached at edge locations worldwide. A visitor in Tokyo gets served from a nearby node, not your origin server in Virginia.

The impact on Core Web Vitals is huge. Sites that move to an image CDN typically see LCP improvements of 40-60%.

How Image CDNs Work with WordPress

The core mechanism is URL rewriting. When a visitor requests a page, image URLs that normally point to yoursite.com/wp-content/uploads/photo.jpg get rewritten to the CDN domain instead, like yourname.sirv.com/wp-content/uploads/photo.jpg.

The CDN intercepts the request, fetches the original from your server on the first hit, optimizes it, caches the result, and serves it. Every request after that hits the cache directly. The whole process is invisible to visitors.

Most image CDN plugins handle URL rewriting automatically. Install the plugin, enter your CDN credentials, and every image on your site routes through the CDN. No changes to your media library or existing content.

Setting Up Sirv as Your WordPress Image CDN

Sirv is an image CDN with automatic format conversion, responsive image delivery, a 360-degree product viewer, and deep zoom. Here’s how to get it running on WordPress.

Step 1: Create a Sirv Account

Sign up at sirv.com. The free plan includes 500 MB of storage and 2 GB of monthly CDN transfer. That’s plenty to test the setup before committing.

Step 2: Install the Sirv Plugin

In your WordPress admin, go to Plugins > Add New and search for “Sirv”. Install and activate.

Or install via WP-CLI:

wp plugin install sirv --activate

Step 3: Connect Your Account

After activation, go to Settings > Sirv and enter your API credentials. The plugin connects and shows your account status.

Step 4: Configure CDN Delivery

In the plugin settings, enable CDN for WordPress images. This rewrites image URLs from:

https://yoursite.com/wp-content/uploads/2026/02/product.jpg

to:

https://yourname.sirv.com/wp-content/uploads/2026/02/product.jpg

The CDN version is automatically optimized, compressed, converted to WebP or AVIF, and served from the nearest edge node.

The plugin handles syncing your WordPress media library to Sirv. Existing images sync in the background, new uploads get pushed automatically.

Step 5: Enable Responsive Images

Turn on the Responsive images toggle in the plugin settings. This adds srcset attributes with CDN URLs so browsers request the optimal size for their viewport:

<img src="https://yourname.sirv.com/image.jpg?w=800"
     srcset="https://yourname.sirv.com/image.jpg?w=400 400w,
             https://yourname.sirv.com/image.jpg?w=800 800w,
             https://yourname.sirv.com/image.jpg?w=1200 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     loading="lazy"
     alt="Product image">

Step 6: Enable Lazy Loading

The plugin can add native loading="lazy" to all below-the-fold images. Enable this in settings. It stops offscreen images from loading until the user scrolls near them, cutting initial page weight by a lot.

URL-Based Image Transformations

Once your images are served through Sirv, you can manipulate them directly through URL parameters. This is great for developers building custom themes or for cases where you need specific sizes beyond what WordPress generates:

# Resize to 600px wide, maintain aspect ratio
https://yourname.sirv.com/photo.jpg?w=600

# Resize and convert to WebP with 80% quality
https://yourname.sirv.com/photo.jpg?w=600&format=webp&q=80

# Crop to exact dimensions
https://yourname.sirv.com/photo.jpg?w=400&h=400&scale.option=fill

# Add a text watermark
https://yourname.sirv.com/photo.jpg?text=© YourBrand&text.size=20

Auto WebP/AVIF and Quality Settings

Automatic Format Conversion

Sirv reads the Accept header from each visitor’s browser and serves the most efficient format automatically. Chrome and Firefox visitors get AVIF where supported, or WebP as a fallback. Safari visitors get WebP. Older browsers get the original JPEG or PNG. You don’t need to configure anything. This is on by default.

Quality Settings

Sirv applies intelligent compression by default, analyzing each image to find the optimal quality level. You can override this globally or per-image with URL parameters:

# Quality 80 (good balance of size and visual fidelity)
https://yourname.sirv.com/photo.jpg?q=80

# Higher quality for hero images
https://yourname.sirv.com/hero.jpg?q=90

For most sites, the default automatic quality is the best choice. Manual overrides make sense when you need pixel-perfect control for specific images like logos or technical diagrams.

Manual CDN URL Rewriting (No Plugin)

Prefer not to use a plugin? Running a headless WordPress setup? You can rewrite image URLs directly in your theme’s functions.php:

function rewrite_image_urls_to_cdn( $url ) {
    if ( strpos( $url, '/wp-content/uploads/' ) !== false ) {
        $upload_dir = wp_get_upload_dir();
        $cdn_base   = 'https://yourname.sirv.com/wp-content/uploads';
        $url = str_replace( $upload_dir['baseurl'], $cdn_base, $url );
    }
    return $url;
}
add_filter( 'wp_get_attachment_url', 'rewrite_image_urls_to_cdn' );
add_filter( 'wp_get_attachment_image_src', function( $image ) {
    if ( is_array( $image ) ) {
        $image[0] = rewrite_image_urls_to_cdn( $image[0] );
    }
    return $image;
});

You’ll also want to rewrite srcset URLs so responsive images go through the CDN:

add_filter( 'wp_calculate_image_srcset', function( $sources ) {
    foreach ( $sources as &$source ) {
        $source['url'] = rewrite_image_urls_to_cdn( $source['url'] );
    }
    return $sources;
});

Before and After: Real Performance Numbers

Here’s what happened on a WooCommerce store with 42 images on the homepage (product grids, banners, category thumbnails):

MetricBefore CDNAfter CDNImprovement
Total image weight8.7 MB2.1 MB76% smaller
LCP (mobile)4.8 s1.9 s60% faster
Image requests blocked by render384Lazy loading
Lighthouse Performance score4188+47 points
Formats servedJPEG/PNGAVIF/WebPNext-gen

The biggest wins come from format conversion (JPEG to WebP/AVIF) and responsive sizing. Sending a 2400px image to a 375px phone screen wastes bandwidth on pixels that will never show up.

To measure your own results, run PageSpeed Insights before enabling the CDN, then again after:

npx lighthouse https://yoursite.com \
  --only-categories=performance \
  --preset=desktop \
  --output=json \
  --quiet | jq '.audits["largest-contentful-paint"].displayValue'

Common Issues and Troubleshooting

Mixed content warnings. If your site runs on HTTPS, make sure your CDN URLs also use HTTPS. Sirv serves everything over TLS by default, but double-check your plugin settings if you see browser warnings.

Images not updating after edits. CDNs cache aggressively. If you replace an image with the same filename, you may need to purge the CDN cache from the dashboard or via the API:

curl -X POST "https://api.sirv.com/v2/files/delete-cache" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '["/path/to/image.jpg"]'

Plugin conflicts. Some caching plugins (WP Rocket, W3 Total Cache) also rewrite image URLs. If you’re running a CDN plugin alongside a caching plugin, make sure only one handles image URL rewriting. Duplicate rewrites produce broken URLs.

WooCommerce gallery thumbnails. WooCommerce generates its own image sizes. After installing a CDN plugin, regenerate thumbnails once:

wp media regenerate --yes

Local development. CDN URL rewriting breaks images in local environments where the CDN can’t reach your origin. Use a conditional check to disable rewriting locally:

if ( ! defined( 'WP_LOCAL_DEV' ) || ! WP_LOCAL_DEV ) {
    add_filter( 'wp_get_attachment_url', 'rewrite_image_urls_to_cdn' );
}

Other CDN Options Worth Knowing

Sirv isn’t the only image CDN out there. Here’s a quick rundown of popular alternatives:

  • Cloudinary has a generous free tier and strong video support, but pricing ramps up fast once you exceed free limits. Its transformation URL syntax is more verbose than most.
  • imgix is developer-focused with great docs and a powerful rendering pipeline. It doesn’t include storage, so you need a separate origin like Amazon S3.
  • BunnyCDN is a general-purpose CDN with an image optimization add-on. Very affordable, but lacks specialized features like 360 product views or deep zoom.

For e-commerce sites that benefit from 360 spins, deep zoom, and built-in digital asset management, Sirv is a strong fit. For video-heavy sites, Cloudinary may work better. For pure performance at the lowest cost, BunnyCDN is worth a look.

Get Started

Adding an image CDN to WordPress is one of the highest-impact performance upgrades you can make, and the setup is genuinely simple. Plugin or a few lines of PHP, the end result is the same: smaller images, faster delivery, modern formats, happier visitors.

If your site is image-heavy (especially WooCommerce), the difference will be immediately visible in your Lighthouse scores and server resource usage. Start with Sirv’s WordPress plugin on the free tier, measure the difference, and scale from there.

Ready to optimize your images?

Sirv automatically optimizes, resizes, and converts your images. Try it free.

Start Free Trial