I Shaved 156 MB Off My Blog by Converting PNGs to WebP

2026-05-18 · by Hannah Vernon · in tools

A factory conveyor belt where oversized PNG cubes pass through a compression machine and emerge as tiny polished WebP gems, monitored by a woman engineer

I just shaved 156 MB off my blog. Not the database, not the theme, not some plugin audit. The images.

The Problem Nobody Talks About

If you use AI to generate featured images for your blog posts, those PNGs are probably massive. I never thought to check mine. Then I did.

139 featured images. All PNG. Average size: 2.7 MB. The largest: 8.3 MB. Total media weight: roughly 168 MB of featured images alone.

Every visitor to any post was downloading 1.5-8 MB just for the hero image before reading a single word. WordPress generates six derivative sizes per upload, so my media library was full of enormous PNG thumbnails that nobody asked for.

AI image generators (Gemini, DALL-E, Midjourney) output PNG by default because it’s lossless. That’s great for archival. It’s terrible for web delivery.

WebP: The Fix

WebP is Google’s image format, and it’s been supported by every major browser since Safari 16 in late 2022. Global browser support is north of 97%. If your visitors are using a browser that can’t render WebP, they have bigger problems than your blog images.

The pitch: lossy WebP at quality 90 produces images visually indistinguishable from the PNG original, at a fraction of the file size.

How much of a fraction? Here’s what I measured on my actual images:

Image Type	PNG Size	WebP Q90	Savings
1536×1024 (typical AI)	1,880 KB	138 KB	91%
1734×907 (wide format)	2,378 KB	196 KB	92%
1424×752 (flat color areas)	8,308 KB	105 KB	99%

That’s not a typo. An 8.3 MB image became 105 KB. AI-generated images compress extraordinarily well in WebP because they have large regions of smooth color gradients – exactly the kind of content WebP’s predictive coding eats for breakfast.

The Non-Obvious Blocker: IIS

I run WordPress on Windows with IIS (yes, really – it works great, and I’ll fight anyone who says otherwise). The first thing I discovered is that WordPress will happily accept a WebP upload via the REST API, report success, generate all the derivative sizes, and then… serve a 404 when you try to load the image.

IIS doesn’t know what a .webp file is unless you tell it. Add this to your web.config inside the <system.webServer> section:

</staticContent>

The remove before add is defensive – it prevents a “duplicate entry” error if the MIME type already exists at the machine level.

If you’re on Apache or Nginx, you probably don’t hit this. If you’re on IIS, this will cost you an hour of debugging before you think to check MIME types.

The Tool: cwebp

Google publishes a standalone WebP encoder called cwebp. No installer, no dependencies – just download the zip, extract, and run.

Download: libwebp 1.5.0 for Windows x64

Basic usage:

1	cwebp.exe -q 90 input.png -o output.webp

Quality 90 is the sweet spot. I tested Q70 through Q95 on several images. Below Q85, you start seeing compression artifacts in gradients. Q90 to Q95 is visually identical, but Q90 is 20-30% smaller.

Automating the Bulk Conversion

I had 139 images to convert, and each one needed six steps:

Download the PNG from WordPress
Convert to WebP with cwebp
Upload the WebP back to WordPress
Back up the post’s HTML content (just in case)
Update the post’s featured_media to point to the new image
Find and replace any inline <img> references in the post body

Here’s the PowerShell script that does it all via the WordPress REST API:

[CmdletBinding()]
param(
    [Parameter(Mandatory)]
    [string]$SiteUrl,

[Parameter(Mandatory)]
    [string]$Username,

[Parameter(Mandatory)]
    [string]$AppPassword,

[string]$CwebpPath = "C:\temp\libwebp\libwebp-1.5.0-windows-x64\bin\cwebp.exe",
    [int]$Quality = 90,
    [string]$WorkDir = "C:\temp\webp-batch",
    [int]$BatchSize = 10,
    [int]$Skip = 0
)

$ErrorActionPreference = 'Stop'
New-Item -Path $WorkDir -ItemType Directory -Force | Out-Null

$cred = [Convert]::ToBase64String(
    [Text.Encoding]::ASCII.GetBytes("${Username}:${AppPassword}")
)
$headers = @{
    Authorization = "Basic $cred"
    "User-Agent"  = "WebP-Converter/1.0"
    Referer       = "$SiteUrl/"
}

# Step 1: Build the queue
Write-Host "Fetching posts..."
$allPosts = @()
$page = 1
do {
    $batch = Invoke-RestMethod `
        "$SiteUrl/wp-json/wp/v2/posts?per_page=100&page=$page&_fields=id,slug,featured_media&status=publish,future,draft" `
        -Headers $headers -TimeoutSec 30
    $allPosts += $batch
    $page++
} while ($batch.Count -eq 100)

$postsWithImages = $allPosts | Where-Object { $_.featured_media -gt 0 }
Write-Host "Posts with featured images: $($postsWithImages.Count)"

# Step 2: Filter to PNG-only featured images
$pngPosts = @()
foreach ($p in $postsWithImages) {
    $media = Invoke-RestMethod `
        "$SiteUrl/wp-json/wp/v2/media/$($p.featured_media)?_fields=id,mime_type,source_url" `
        -Headers $headers -TimeoutSec 15
    if ($media.mime_type -eq 'image/png') {
        $pngPosts += [PSCustomObject]@{
            PostId   = $p.id
            PostSlug = $p.slug
            MediaId  = $media.id
            MediaUrl = $media.source_url
            Basename = [IO.Path]::GetFileNameWithoutExtension(
                $media.source_url.Split('/')[-1]
            )
        }
    }
}

Write-Host "PNG featured images to convert: $($pngPosts.Count)"
$queue = $pngPosts | Select-Object -Skip $Skip -First $BatchSize
$rollback = @()

# Step 3: Convert each image
foreach ($item in $queue) {
    $basename = $item.Basename
    Write-Host "--- Post $($item.PostId) ($basename) ---" -NoNewline

try {
        # Download
        $pngPath = Join-Path $WorkDir "$basename.png"
        Invoke-WebRequest $item.MediaUrl -OutFile $pngPath -TimeoutSec 60
        $pngSize = (Get-Item $pngPath).Length

# Convert
        $webpPath = Join-Path $WorkDir "$basename.webp"
        & $CwebpPath -q $Quality $pngPath -o $webpPath -quiet 2>$null
        $webpSize = (Get-Item $webpPath).Length

# Skip if WebP is not smaller
        if ($webpSize -ge $pngSize) {
            Write-Host " SKIP (WebP not smaller)"
            $rollback += [PSCustomObject]@{
                PostId=$item.PostId; OldMediaId=$item.MediaId
                NewMediaId="SKIPPED"; Status="SKIP"
            }
            continue
        }

# Upload WebP via curl (Invoke-RestMethod doesn't handle binary well)
        $uploadResult = curl.exe -s -X POST `
            "$SiteUrl/wp-json/wp/v2/media" `
            -H "Authorization: Basic $cred" `
            -H "Content-Disposition: attachment; filename=$basename.webp" `
            -H "Content-Type: image/webp" `
            --data-binary "@$webpPath" --max-time 30

$newMedia = $uploadResult | ConvertFrom-Json
        if (-not $newMedia.id) { throw "Upload failed" }

# Back up the post content
        $post = Invoke-RestMethod `
            "$SiteUrl/wp-json/wp/v2/posts/$($item.PostId)?context=edit" `
            -Headers $headers -TimeoutSec 30
        [IO.File]::WriteAllText(
            (Join-Path $WorkDir "backup-post-$($item.PostId).html"),
            $post.content.raw
        )

# Replace inline image references
        $newContent = $post.content.raw
        $escaped = [regex]::Escape($basename)
        $refs = [regex]::Matches(
            $newContent,
            "https://[^`"'\s]*$escaped[^`"'\s]*\.png"
        )
        foreach ($ref in $refs) {
            $oldUrl = $ref.Value
            $year = (Get-Date).Year
            $month = (Get-Date).ToString("MM")
            $newUrl = $oldUrl -replace `
                "/uploads/\d{4}/\d{2}/", `
                "/uploads/$year/$month/"
            $newUrl = $newUrl -replace '\.png$', '.webp'
            $newContent = $newContent.Replace($oldUrl, $newUrl)
        }
        $newContent = $newContent.Replace(
            "wp-image-$($item.MediaId)",
            "wp-image-$($newMedia.id)"
        )

# Update the post
        $null = Invoke-RestMethod `
            "$SiteUrl/wp-json/wp/v2/posts/$($item.PostId)" `
            -Method POST -Headers $headers `
            -Body @{
                featured_media = $newMedia.id
                content = $newContent
            } -TimeoutSec 30

$savings = [math]::Round((1 - $webpSize/$pngSize) * 100, 1)
        Write-Host (" {0}KB->{1}KB ({2}%) | OK" -f `
            [math]::Round($pngSize/1024),
            [math]::Round($webpSize/1024),
            $savings)

$rollback += [PSCustomObject]@{
            PostId=$item.PostId; OldMediaId=$item.MediaId
            NewMediaId=$newMedia.id; Status="OK"
        }
    } catch {
        Write-Host " ERROR: $($_.Exception.Message)"
        $rollback += [PSCustomObject]@{
            PostId=$item.PostId; OldMediaId=$item.MediaId
            NewMediaId="FAILED"; Status="ERROR"
        }
    }
}

# Save rollback data
$rollbackPath = Join-Path $WorkDir `
    "rollback-$(Get-Date -Format 'yyyyMMdd-HHmm').csv"
$rollback | Export-Csv $rollbackPath -NoTypeInformation
Write-Host "`nRollback saved to: $rollbackPath"
$rollback | Format-Table -AutoSize

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

[CmdletBinding()]

param(

[Parameter(Mandatory)]

[string]$SiteUrl,

[Parameter(Mandatory)]

[string]$Username,

[Parameter(Mandatory)]

[string]$AppPassword,

[string]$CwebpPath = "C:\temp\libwebp\libwebp-1.5.0-windows-x64\bin\cwebp.exe",

[int]$Quality = 90,

[string]$WorkDir = "C:\temp\webp-batch",

[int]$BatchSize = 10,

[int]$Skip = 0

)

$ErrorActionPreference = 'Stop'

New-Item -Path $WorkDir -ItemType Directory -Force | Out-Null

$cred = [Convert]::ToBase64String(

[Text.Encoding]::ASCII.GetBytes("${Username}:${AppPassword}")

)

$headers = @{

Authorization = "Basic $cred"

"User-Agent" = "WebP-Converter/1.0"

Referer = "$SiteUrl/"

}

# Step 1: Build the queue

Write-Host "Fetching posts..."

$allPosts = @()

$page = 1

do {

$batch = Invoke-RestMethod `

"$SiteUrl/wp-json/wp/v2/posts?per_page=100&page=$page&_fields=id,slug,featured_media&status=publish,future,draft" `

-Headers $headers -TimeoutSec 30

$allPosts += $batch

$page++

} while ($batch.Count -eq 100)

$postsWithImages = $allPosts | Where-Object { $_.featured_media -gt 0 }

Write-Host "Posts with featured images: $($postsWithImages.Count)"

# Step 2: Filter to PNG-only featured images

$pngPosts = @()

foreach ($p in $postsWithImages) {

$media = Invoke-RestMethod `

"$SiteUrl/wp-json/wp/v2/media/$($p.featured_media)?_fields=id,mime_type,source_url" `

-Headers $headers -TimeoutSec 15

if ($media.mime_type -eq 'image/png') {

$pngPosts += [PSCustomObject]@{

PostId = $p.id

PostSlug = $p.slug

MediaId = $media.id

MediaUrl = $media.source_url

Basename = [IO.Path]::GetFileNameWithoutExtension(

$media.source_url.Split('/')[-1]

)

}

Write-Host "PNG featured images to convert: $($pngPosts.Count)"

$queue = $pngPosts | Select-Object -Skip $Skip -First $BatchSize

$rollback = @()

# Step 3: Convert each image

foreach ($item in $queue) {

$basename = $item.Basename

Write-Host "--- Post $($item.PostId) ($basename) ---" -NoNewline

try {

# Download

$pngPath = Join-Path $WorkDir "$basename.png"

Invoke-WebRequest $item.MediaUrl -OutFile $pngPath -TimeoutSec 60

$pngSize = (Get-Item $pngPath).Length

# Convert

$webpPath = Join-Path $WorkDir "$basename.webp"

& $CwebpPath -q $Quality $pngPath -o $webpPath -quiet 2>$null

$webpSize = (Get-Item $webpPath).Length

# Skip if WebP is not smaller

if ($webpSize -ge $pngSize) {

Write-Host " SKIP (WebP not smaller)"

$rollback += [PSCustomObject]@{

PostId=$item.PostId; OldMediaId=$item.MediaId

NewMediaId="SKIPPED"; Status="SKIP"

}

continue

}

# Upload WebP via curl (Invoke-RestMethod doesn't handle binary well)

$uploadResult = curl.exe -s -X POST `

"$SiteUrl/wp-json/wp/v2/media" `

-H "Authorization: Basic $cred" `

-H "Content-Disposition: attachment; filename=$basename.webp" `

-H "Content-Type: image/webp" `

--data-binary "@$webpPath" --max-time 30

$newMedia = $uploadResult | ConvertFrom-Json

if (-not $newMedia.id) { throw "Upload failed" }

# Back up the post content

$post = Invoke-RestMethod `

"$SiteUrl/wp-json/wp/v2/posts/$($item.PostId)?context=edit" `

-Headers $headers -TimeoutSec 30

[IO.File]::WriteAllText(

(Join-Path $WorkDir "backup-post-$($item.PostId).html"),

$post.content.raw

)

# Replace inline image references

$newContent = $post.content.raw

$escaped = [regex]::Escape($basename)

$refs = [regex]::Matches(

$newContent,

"https://[^`"'\s]*$escaped[^`"'\s]*\.png"

)

foreach ($ref in $refs) {

$oldUrl = $ref.Value

$year = (Get-Date).Year

$month = (Get-Date).ToString("MM")

$newUrl = $oldUrl -replace `

"/uploads/\d{4}/\d{2}/", `

"/uploads/$year/$month/"

$newUrl = $newUrl -replace '\.png$', '.webp'

$newContent = $newContent.Replace($oldUrl, $newUrl)

}

$newContent = $newContent.Replace(

"wp-image-$($item.MediaId)",

"wp-image-$($newMedia.id)"

)

# Update the post

$null = Invoke-RestMethod `

"$SiteUrl/wp-json/wp/v2/posts/$($item.PostId)" `

-Method POST -Headers $headers `

-Body @{

featured_media = $newMedia.id

content = $newContent

} -TimeoutSec 30

$savings = [math]::Round((1 - $webpSize/$pngSize) * 100, 1)

Write-Host (" {0}KB->{1}KB ({2}%) | OK" -f `

[math]::Round($pngSize/1024),

[math]::Round($webpSize/1024),

$savings)

$rollback += [PSCustomObject]@{

PostId=$item.PostId; OldMediaId=$item.MediaId

NewMediaId=$newMedia.id; Status="OK"

}

} catch {

Write-Host " ERROR: $($_.Exception.Message)"

$rollback += [PSCustomObject]@{

PostId=$item.PostId; OldMediaId=$item.MediaId

NewMediaId="FAILED"; Status="ERROR"

}

# Save rollback data

$rollbackPath = Join-Path $WorkDir `

"rollback-$(Get-Date -Format 'yyyyMMdd-HHmm').csv"

$rollback | Export-Csv $rollbackPath -NoTypeInformation

Write-Host "`nRollback saved to: $rollbackPath"

$rollback | Format-Table -AutoSize

Run it in batches:

# First 10

.\Convert-WebP.ps1 -SiteUrl "https://www.example.com" `

-Username "admin" -AppPassword "xxxx xxxx xxxx xxxx" `

-BatchSize 10 -Skip 0

# Next 10

.\Convert-WebP.ps1 -SiteUrl "https://www.example.com" `

-Username "admin" -AppPassword "xxxx xxxx xxxx xxxx" `

-BatchSize 10 -Skip 10

Key Design Decisions

Quality 90, not 80. Most WebP guides recommend Q80. I went with Q90 because these are hero images displayed prominently at 768px wide. The difference is ~30 KB per image but noticeably sharper on high-DPI screens. When your total savings are measured in megabytes, an extra 30 KB for visual quality is a trade worth making.

Skip when WebP is larger. One of my 139 images was a tiny 17 KB screenshot. WebP encoded it at 40 KB – the overhead of the WebP container exceeded the savings. The script detects this and leaves the original PNG in place. Don’t blindly convert everything.

Keep the originals. The old PNG media items stay in WordPress. They cost disk space and nothing else. If something goes wrong with a WebP image six months from now, the rollback CSV tells me exactly which PNG to restore.

Back up before modifying. Every post’s raw HTML is saved to disk before the script touches it. Belt and suspenders. The rollback CSV maps old media IDs to new ones, so reverting a single post is a one-liner.

Use curl for uploads. PowerShell’s Invoke-RestMethod doesn’t handle binary file uploads to the WordPress media endpoint reliably. curl.exe with --data-binary works perfectly every time.

The Results

Metric	Before	After
Total featured images	139 PNG	138 WebP + 1 PNG
Total media weight	~168 MB	~12 MB
Average image size	2.7 MB	~100 KB
Per-page hero image	1.5-8 MB	60-400 KB
Best compression	–	99% (8.3 MB to 105 KB)
Worst meaningful	–	63% (complex screenshot)
Conversion failures	–	1 (timeout, succeeded on retry)

The entire conversion took about 90 minutes, processing 10 images per batch with visual verification between batches.

What I’d Do Differently

Convert before uploading. If I were starting a new blog today, I’d convert every AI-generated image to WebP before uploading it to WordPress. The cwebp command takes less than a second. There’s no reason to upload a 3 MB PNG when a 150 KB WebP is visually identical.

Automate the IIS check. I spent an embarrassing amount of time debugging why uploaded images returned 404 before realizing IIS didn’t have the WebP MIME type. A quick PowerShell check at the top of the script would have caught it:

$testUrl = "$SiteUrl/wp-content/uploads/test.webp"

try {

Invoke-WebRequest $testUrl -Method Head -TimeoutSec 5 | Out-Null

} catch {

Write-Warning "WebP files return 404. Check IIS MIME types."

return

}

Try It Yourself

If your WordPress blog uses AI-generated featured images, you’re probably sitting on hundreds of megabytes of unnecessary PNG weight. The conversion is safe (rollback data is preserved), fast (minutes, not hours), and the page speed improvement is dramatic.

Your visitors’ browsers will thank you. Your hosting provider’s bandwidth bill will thank you. And your Lighthouse score will stop yelling at you about “properly size images.”

Questions? Found a bug in the script? Let me know on Bluesky or LinkedIn.

Tags: iis, image-optimization, powershell, webp, wordpress

I Shaved 156 MB Off My Blog by Converting PNGs to WebP

The Problem Nobody Talks About

WebP: The Fix

The Non-Obvious Blocker: IIS

The Tool: cwebp

Automating the Bulk Conversion

Key Design Decisions

The Results

What I’d Do Differently

Try It Yourself

Related

Let us know your thoughts on this postCancel reply

Search

Categories

Pages

Meta

I Shaved 156 MB Off My Blog by Converting PNGs to WebP

The Problem Nobody Talks About

WebP: The Fix

The Non-Obvious Blocker: IIS

The Tool: cwebp

Automating the Bulk Conversion

Key Design Decisions

The Results

What I’d Do Differently

Try It Yourself

Share this:

Related

Let us know your thoughts on this postCancel reply

Search

Categories

Pages

Meta