WordPress Image Compression: WebP Cuts 25–35%; srcset Chooses Sizes

Oct 15, 2026

The fastest way to shrink images on a WordPress site is to serve next-gen formats like WebP or AVIF, resize images to their actual display dimensions, and turn on automatic optimization or run a bulk optimizer across your media library. WebP files typically run 25 to 35% smaller than JPEG or PNG at similar quality, and WordPress already builds responsive image markup behind the scenes to serve the right size to each device.


TL;DR:

  • WebP typically cuts image sizes by 25% to 35% versus JPEG or PNG; AVIF can save around 60% versus JPEG in some tests, with browser fallbacks.
  • WordPress creates responsive image copies, but its newer browser based processing runs only when browser features and device conditions permit; otherwise, processing shifts server side.
  • Test five to ten representative images before a bulk rollout, preserve originals or use staging, and compare page weight and Largest Contentful Paint afterward.
  • Bulk runs can take hours on large catalogs and strain hosting CPU or storage, so schedule them off peak or use cloud processing.

Webby Website Optimisation
Make Your WordPress Site Faster
Webby helps local service businesses improve their websites with design, development and speed optimization services.

Explore website services

Table of Contents

High-impact quick wins you can do in minutes

Before touching plugins or code, a few changes produce most of the visible improvement. These are the same fixes we check first during any website audit.

  • Resize images to the dimensions they actually display at, not the full camera or export resolution.
  • Turn on automatic optimization for new uploads, then run a one-time bulk optimize across your existing media library.
  • Convert JPEGs and PNGs to WebP or AVIF where your theme and plugins support it, and enable lazy loading for images below the fold.
  • Clear any page or object cache afterward, then re-run a speed test to confirm the change actually reduced page weight.

An oversized photo displayed in a much narrower content column wastes bandwidth on every single visit, regardless of how well it’s compressed afterward. Fixing the dimension mismatch first means the compression step has less work to do.

Pro Tip: Sort your media library by file size before you start. Fixing the heaviest images can often shrink total page weight more than optimizing the rest combined.

How WordPress actually processes and serves your images

WordPress doesn’t just store whatever file you upload. Since WordPress 4.4, the platform automatically generates several copies of each image at different sizes and outputs srcset and sizes attributes so browsers can request the version that matches the visitor’s screen, rather than downloading a desktop-sized file on a phone. Themes can and should customize which sizes get generated with wp_calculate_image_sizes, since the defaults don’t always match a theme’s actual content width, according to the official responsive images documentation.

Image variants selected for different screen sizes

More recently, WordPress 7.1 introduced client-side media processing, which runs compression, resizing, format conversion, rotation, and thumbnail generation directly in the browser using a technology called wasm-vips, before the file ever reaches your server. This depends on browser features like SharedArrayBuffer and checks device and network conditions before deciding whether to proceed; when those conditions aren’t met, WordPress quietly falls back to the traditional server-side processing it has always used. That fallback matters practically: it means you can’t assume client-side processing is always active, and a plugin doing server-side optimization afterward isn’t necessarily redundant.

A handful of filters control this behavior for anyone comfortable editing a theme’s functions.php file:

  • image_editor_output_format maps one image format to another, such as converting JPEG uploads to WebP automatically.
  • wp_editor_set_quality sets the compression quality applied when WordPress generates each image sub-size.
  • big_image_size_threshold controls the pixel dimension above which WordPress automatically scales down an oversized original.

Understanding which of these settings already apply to your install helps you avoid installing a plugin to solve a problem WordPress core already handles.

Checklist: what an image optimizer actually needs to do

Whether you choose a plugin or a hosted service, the feature list that matters is the same. Run any option you’re considering against this list before committing.

  • Converts to next-gen formats like WebP and AVIF while keeping a safe fallback to the original format for unsupported browsers.
  • Optimizes new uploads automatically and offers asynchronous bulk optimization for images already in your library.
  • Gives you control over compression level, whether that’s labeled lossy, lossless, or a “glossy” middle ground, plus a backup of originals you can restore from.
  • Offers CDN delivery or image offloading, and serves adaptively sized images so phones don’t download desktop-resolution files.
  • Supports lazy loading, works inside galleries and page builders, and respects the WordPress filters covered above rather than fighting them.

Price and quota structures vary widely between free tiers and paid plans, so check the compression limits before assuming “free” covers a site with thousands of product images.

Your step-by-step workflow to compress images safely

Follow this sequence whether you’re doing the work yourself or briefing a developer.

  1. Audit first. Run your homepage and two or three heavy pages (a gallery, a product page) through PageSpeed Insights or Lighthouse, and list your largest images by byte size.
  2. Test a manual path on a sample. Pick five to ten representative images, resize them to display dimensions, export as WebP or AVIF, and swap them in manually to confirm quality holds up before you commit to a site-wide change.
  3. Or take the plugin path. Install an optimizer, enable automatic optimization on upload, then run the bulk optimization tool against your existing library, watching your hosting account for CPU or storage quota warnings as it works.
  4. Protect yourself with a backup. Use a plugin’s built-in backup/restore feature for originals, or do the whole rollout on a staging site first, and write down the exact steps to reverse the change if something looks wrong.
  5. Verify the result. Re-run PageSpeed Insights or Lighthouse, compare Largest Contentful Paint and total page weight against your baseline, and spot-check a few galleries and product pages by eye.

Large catalogs or image-heavy galleries can take hours to process in bulk, so don’t start a full optimization run right before a traffic spike or a scheduled backup job.

Pro Tip: Keep your baseline PageSpeed report open in a separate tab. Comparing numbers side by side catches regressions that are easy to miss when you’re just eyeballing “it looks faster.”

Exact WordPress settings and filters to tune

A handful of configuration changes prevent most of the oversized-image problems that compression plugins are otherwise asked to fix after the fact.

  • Adjust big_image_size_threshold so any upload above your chosen pixel width gets scaled down automatically, which stops enormous camera-resolution originals from ever reaching your media library.
  • Use image_editor_output_format to map JPEG uploads to WebP at the point of upload, when your theme and browser support allow it.
  • Set wp_editor_set_quality (sometimes referenced as jpeg_quality) to a consistent compression level across every generated sub-size, rather than leaving it at the WordPress default everywhere.
  • Where your theme uses fixed display widths, customize wp_calculate_image_sizes so the srcset markup offers sizes that actually match your layout instead of generic defaults.
  • After changing any of these, regenerate thumbnails for existing images and test the result on a staging site before pushing the change to your live site.

These are code-level changes, so back up your theme files or use a child theme before editing functions.php.

How to measure and report the impact of compression

Numbers settle the question of whether your changes worked. Run your pages through Lighthouse or PageSpeed Insights and check the “serve images in next-gen formats” and “efficiently encode images” audits specifically, since those flag exactly which files are still oversized.

WebP files typically cut file size by 25 to 35% compared with JPEG or PNG, and AVIF can push savings to around 60% versus JPEG in some tests, which directly affects how fast your Largest Contentful Paint element loads.

  • Track Core Web Vitals, especially LCP, and compare before-and-after timing alongside total bytes transferred.
  • Record file-size reductions for a handful of representative pages, with before-and-after screenshots for anyone you need to report results to.
  • If you’re using a CDN, check cache hit rates and bandwidth usage after the optimization to confirm the delivery layer is doing its part.
  • Repeat the measurement later, since caching and CDN propagation can mask the full effect at first.

Fixing common problems after you optimize

Most post-optimization issues fall into a few predictable categories.

  • Images appear broken or missing: flush your page cache, regenerate thumbnails, and confirm the plugin’s rewrite rules or CDN URLs are configured correctly.
  • Quality looks noticeably worse: dial back compression aggressiveness or switch to a higher-quality preset, often labeled “glossy” or “lossless,” rather than the default lossy setting.
  • Hosting hits CPU or disk limits mid-bulk-run: shift heavy processing to a cloud-based compression API instead of local server binaries, or schedule the bulk job during low-traffic hours.
  • Something looks off on a specific template: check the homepage, product pages, and gallery templates individually on staging before rolling the change out to production, since page builders sometimes cache their own copies of an image.

Author background and relevant experience

This guide is based on hands-on WordPress speed and media-optimization work. Our team at Webby Website Optimisation regularly handles WordPress speed work, website audits, and performance troubleshooting for local service businesses, with documented case studies showing improved traffic and lead generation tied to site performance fixes. If you want these recommendations implemented and verified on your own site, our website audit process covers image and asset optimization alongside broader speed issues.

When to handle this yourself versus hiring a specialist

Doing this yourself makes sense for a small site with a manageable media library and some comfort installing plugins and testing on staging. Once you’re dealing with thousands of product images, complex galleries, custom theme templates, or hosting limits that choke on bulk jobs, the time cost of troubleshooting usually outweighs what you’d pay a specialist. Expect quick wins to take an afternoon; a full audit-and-implementation engagement is closer to a multi-day project.

— Steve Doig

How we can help with site audits and managed optimization

If working through filters, bulk optimization, and staging rollbacks isn’t how you want to spend your week, we handle this as part of our website audit service, which maps directly onto the tasks in this guide: we measure your current image weight and Core Web Vitals, prioritize the fixes that will move the needle fastest, implement the compression and configuration changes, then re-test to confirm the result.

Webby Website Optimisation

For sites needing deeper work beyond images, our WordPress Help & Support plans cover ongoing maintenance starting at Monthly Maintenance for $59 AUD per month, with Monthly Updates at $123 AUD per month and Monthly Development at $600 AUD per month for larger ongoing projects. If you’d rather start with a one-off diagnosis, the Website Audit runs $1,250 AUD and gives you a prioritized list before you commit to anything larger. For readers who also want ongoing backup and hosting support once image optimization is in place, this guide on WordPress backup practices is a useful next read. Reach out through our site to scope what your project actually needs.

FAQ

How do I optimize photos for WordPress?

Resize each photo to the dimensions it will actually display at, convert it to WebP or AVIF where supported, and either enable automatic optimization on upload or run a bulk optimizer across your existing media library. Confirm the result with PageSpeed Insights, checking that the “serve images in next-gen formats” audit no longer flags your pages.

Is WP-Optimize a good choice for image compression?

WP-Optimize is one of several WordPress plugins offering image compression alongside database cleanup and caching features, and whether it fits depends on which specific features your site needs, such as WebP conversion, bulk processing, or CDN delivery. Compare its compression controls and backup options against the checklist in this guide before choosing it over a dedicated image optimizer.

How do I avoid over-compressing my images?

Use a lossless or “glossy” compression preset rather than the most aggressive lossy setting, and always keep a backup of your original files so you can restore them if quality drops too far. Testing a small sample of images first, before running a full bulk optimization, catches quality problems before they affect your whole media library.

How do I stop WordPress from scaling my images?

WordPress automatically scales down any upload wider than the configured big_image_size_threshold; raising that threshold or setting it to false via the filter prevents automatic scaling. Keep in mind that disabling this entirely means oversized originals will reach your media library unprocessed, which works against the file-size goals covered earlier in this guide.

Sources

These sources informed the technical details in this guide and are worth reading directly if you want to go deeper on implementation specifics.