How to optimize images in WordPress?

To optimize images in WordPress, you resize them to the dimensions your theme actually displays, compress them to reduce file size, serve them in modern formats like WebP or AVIF, and let WordPress lazy load anything below the fold. You can do most of this before uploading with a desktop tool, or automate it after uploading with an image optimization plugin. Done well, image optimization is often the single biggest improvement you can make to page weight.

Images usually make up the largest share of bytes on a typical WordPress page, so a few careful habits pay off quickly in load time, Core Web Vitals, and hosting bandwidth. This article walks you through why image optimization matters, how WordPress handles images out of the box, the manual and plugin-based ways to optimize, and a handful of developer tweaks for finer control.

Why Does Image Optimization Matter in WordPress?

Every image on a page has to be downloaded before a visitor can see it. A single uncompressed photo straight from a phone or camera can weigh several megabytes, which is more than the entire rest of a well-built page combined. Multiply that across a gallery or a blog archive and your site starts to feel sluggish, especially on mobile connections.

Optimizing images helps you:

• Load pages faster: Smaller files download quicker, which improves perceived speed and your Largest Contentful Paint (LCP) score.
• Improve SEO: Page experience signals are part of how search engines evaluate pages, and optimized images with good alt text are easier to index in image search.
• Save storage and bandwidth: Leaner media libraries keep backups smaller and reduce data transfer on metered hosting plans.
• Create a better mobile experience: Visitors on slow or capped connections are far less likely to abandon a page that loads quickly.
• Reduce server load: Fewer bytes per request means your server and CDN can handle more visitors.

If you've already worked through a general speed checklist, images are usually where the remaining gains are hiding.

How Does WordPress Handle Images by Default?

Before adding plugins, it helps to understand what WordPress already does for you. Modern WordPress (6.x) includes a surprising amount of image handling in core.

1. Multiple image sizes: When you upload an image, WordPress creates several resized copies: thumbnail, medium, medium_large, and large, plus any extra sizes your theme or plugins register. You can adjust the default dimensions under Settings > Media.

2. Responsive images: WordPress adds srcset and sizes attributes to images in your content, so browsers can pick the most appropriate size for the visitor's screen instead of always downloading the full-size file.

3. Big image scaling: If you upload a very large image (wider or taller than 2560 pixels by default), WordPress scales it down and uses the scaled version as the "full" size, keeping your original file on the server with a -scaled suffix for the working copy.

4. Native lazy loading: WordPress adds loading="lazy" to most images, so images further down the page only load when the visitor scrolls near them. Recent versions also try to skip lazy loading for the first large image in the viewport and add fetchpriority="high" to the likely LCP image.

5. Modern format support: WordPress can accept WebP uploads, and newer releases also support AVIF, provided your server's image library (Imagick or GD) supports those formats.

6. Default compression: When WordPress generates resized copies, it applies a quality setting (82 by default for JPEGs) to keep sizes reasonable.

What WordPress does not do by default is aggressively compress your original upload, strip unnecessary metadata from every file, or automatically convert everything to WebP or AVIF. That's where manual work or a plugin comes in.

Step 1: Choose the Right Image Format

Picking the right format is the foundation of image optimization. Each format has strengths:

• JPEG: Best for photographs and images with lots of colors and gradients. Offers good compression with adjustable quality.
• PNG: Best for graphics that need transparency or sharp edges, such as logos, icons, and screenshots with text. Files can be large for photos.
• WebP: A modern format that supports both lossy and lossless compression plus transparency. WebP files are typically noticeably smaller than equivalent JPEGs or PNGs.
• AVIF: A newer format that often compresses even better than WebP, though encoding is slower and support depends on your server's image library.
• SVG: A vector format ideal for logos and icons. WordPress blocks SVG uploads by default for security reasons, since SVG files can contain scripts, so use a plugin that sanitizes them (such as Safe SVG) if you need them.
• GIF: Only really useful for simple animations, and even then a short MP4 or WebM video is usually far smaller.

As a rule of thumb, use JPEG or WebP for photos, PNG or WebP for graphics with transparency, and SVG for simple logos.

Step 2: Resize Images Before Uploading

One of the most common mistakes is uploading a 6000-pixel-wide photo to display in a content area that is 800 pixels wide. Even with responsive images, the full file is still stored on your server, and some themes or blocks may load it directly.

Here's a practical approach:

1. Check your content width: Find out how wide your theme's content area is. Block themes define this in theme.json as contentSize and wideSize, and many classic themes list it in their documentation.

2. Pick a sensible maximum: For most blogs, 1600 to 2000 pixels wide covers full-width images on high-density screens. Inline content images rarely need to be larger than about twice your content width.

3. Resize with a desktop tool: Use a tool you're comfortable with, such as Photoshop, Affinity Photo, GIMP, macOS Preview, or a browser-based tool like Squoosh.

4. Upload the resized version: WordPress will then generate its own smaller copies from a reasonably sized source image.

Step 3: Compress Your Images

Compression reduces file size by removing data. There are two types:

• Lossy compression: Removes some image data permanently. At sensible quality settings (roughly 70 to 85 for JPEG), the difference is hard to see, but savings are significant.
• Lossless compression: Reduces file size without discarding visual information, mostly by optimizing how data is stored and stripping metadata. Savings are smaller.

For most websites, a moderate lossy setting gives the best balance. You can compress images before uploading using tools like Squoosh, TinyPNG, ImageOptim (macOS), or the export settings in your image editor.

Strip Unnecessary Metadata

Photos from cameras and phones often include EXIF metadata such as camera model, lens settings, and sometimes GPS coordinates. Removing it trims a bit of file size and protects your privacy. Most optimization tools and plugins can strip metadata automatically.

Step 4: Use an Image Optimization Plugin

If you publish often or have many contributors, doing all of this by hand becomes tedious. An image optimization plugin can compress images automatically as they're uploaded and bulk-optimize your existing media library.

Popular, well-established options include:

Smush: Offers automatic compression on upload, bulk smushing, lazy loading, and WebP conversion in its paid tier.

EWWW Image Optimizer: Can optimize images on your own server without an external service, with optional cloud compression and WebP/AVIF conversion.

ShortPixel Image Optimizer: A cloud-based optimizer with lossy, glossy, and lossless modes plus WebP and AVIF generation. It uses a credit system with a free monthly allowance.

Imagify: From the team behind WP Rocket, offering compression levels and WebP/AVIF conversion with a straightforward interface.

Optimole: Optimizes and serves images from a CDN, resizing them on the fly for each visitor's device.

Converter for Media: Focuses on converting images to WebP or AVIF and serving them to supported browsers.

When choosing a plugin, check:

1. Where compression happens: Some plugins process images on your server, others send them to an external API. Local processing avoids quotas but uses server resources.
2. Backup of originals: Good plugins let you keep original files so you can restore or re-optimize later.
3. Format conversion: Look for WebP or AVIF support if you want modern formats.
4. Bulk optimization: Important if you have an existing library to process.
5. Pricing model: Free tiers vary widely, and many services charge by the number of images or data processed, so check current plans before committing.

Avoid running two image optimization plugins at once. They can compress the same file twice, degrade quality, or conflict when rewriting image URLs.

How to Bulk Optimize an Existing Media Library

Most plugins follow a similar process:

1. Install and activate the plugin from Plugins > Add New Plugin.
2. Configure your settings, such as compression level, whether to keep originals, and whether to strip metadata.
3. Go to the bulk optimization screen, usually found under Media or the plugin's own menu.
4. Start the bulk process and leave the tab open until it completes. Large libraries may take a while.
5. Spot-check results by opening a few optimized images on the front end to confirm quality is acceptable.

Take a backup of your wp-content/uploads folder before bulk-processing a large library, just in case you want to roll back.

Step 5: Serve Modern Formats Like WebP and AVIF

Converting images to WebP or AVIF can shrink file sizes considerably compared to JPEG and PNG. You have a few options:

• Upload WebP or AVIF directly: WordPress accepts these formats if your server supports them.
• Let a plugin convert and serve them: Plugins such as EWWW, ShortPixel, Imagify, or Converter for Media create modern-format copies and deliver them to browsers that support them.
• Use a CDN with image optimization: Services like Cloudflare (with its image features), Jetpack's Site Accelerator, or Optimole can convert and serve optimized formats at the edge.

WebP is a big topic on its own, so if you want to go deeper into conversion methods and server configuration, a dedicated WebP guide is worth reading.

Step 6: Make Lazy Loading and Priority Work for You

WordPress handles lazy loading natively, but a few checks help you get the most out of it:

1. Don't lazy load your hero image: The main image at the top of the page is usually your LCP element. It should load immediately. WordPress tries to detect this, but some themes and page builders output images in ways core can't recognize.
2. Avoid double lazy loading: If your caching or optimization plugin also adds JavaScript-based lazy loading, you may not need both. Native lazy loading is lightweight and widely supported.
3. Set width and height: Images with explicit dimensions let the browser reserve space, which prevents layout shifts (CLS). WordPress adds these automatically for images inserted through the editor.

Step 7: Use a CDN

A content delivery network (CDN) stores copies of your images on servers around the world and delivers them from a location close to each visitor. This reduces latency and offloads bandwidth from your origin server. Many hosts include a CDN, and services like Cloudflare, Bunny.net, and Jetpack's Site Accelerator are common choices for WordPress sites.

Step 8: Write Good Alt Text and File Names

Optimization isn't only about bytes. Descriptive file names and alt text help accessibility and search engines understand your images.

• File names: Rename IMG_4821.jpg to something descriptive like blue-ceramic-coffee-mug.jpg before uploading.
• Alt text: Describe what the image shows and why it matters in context. Screen readers read this aloud, so write for people first.
• Decorative images: If an image is purely decorative, leave the alt text empty so assistive technology skips it.

You can add alt text in the block editor's image settings sidebar or in Media > Library when editing an attachment.

Developer Tweaks for Image Optimization

If you're comfortable with code, WordPress offers filters that give you finer control. Add these snippets to your child theme's functions.php file or, better, a small custom plugin so they survive theme changes. Always test on a staging site first.

Adjust the Default Compression Quality

WordPress applies a quality of 82 to generated image sizes. You can change this with the wp_editor_set_quality filter, which also receives the MIME type so you can treat formats differently:

/**
 * Set image quality per MIME type for generated sizes.
 */
function sajjad_image_quality( $quality, $mime_type ) {
    if ( 'image/webp' === $mime_type ) {
        return 80;
    }

    if ( 'image/jpeg' === $mime_type ) {
        return 78;
    }

    return $quality;
}
add_filter( 'wp_editor_set_quality', 'sajjad_image_quality', 10, 2 );

This only affects images generated after you add the code. To apply it to existing images, you'll need to regenerate thumbnails.

Change the Big Image Threshold

The default threshold for scaling large uploads is 2560 pixels. You can lower it to keep the "full" size smaller:

/**
 * Scale uploads larger than 2000px down to 2000px.
 */
function sajjad_big_image_threshold( $threshold ) {
    return 2000;
}
add_filter( 'big_image_size_threshold', 'sajjad_big_image_threshold' );

Returning false disables scaling entirely, which is rarely a good idea for performance.

Remove Image Sizes You Don't Use

Every registered size means another file generated per upload. If your theme never uses a particular size, you can stop generating it:

/**
 * Stop generating image sizes this site does not use.
 */
function sajjad_remove_unused_image_sizes( $sizes ) {
    unset( $sizes['medium_large'] ); // 768px wide.
    unset( $sizes['1536x1536'] );
    unset( $sizes['2048x2048'] );

    return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'sajjad_remove_unused_image_sizes' );

Be careful here. Removing sizes that srcset relies on can make responsive images less efficient, so only remove sizes you're sure you don't need.

Convert JPEG Uploads to WebP Automatically

Since WordPress 5.8, the image_editor_output_format filter lets you tell WordPress to save generated sizes in a different format. This example outputs WebP sub-sizes for JPEG uploads, assuming your server supports WebP:

/**
 * Save generated sub-sizes of JPEG uploads as WebP.
 */
function sajjad_output_webp( $formats ) {
    $formats['image/jpeg'] = 'image/webp';

    return $formats;
}
add_filter( 'image_editor_output_format', 'sajjad_output_webp' );

You can check whether your server supports WebP under Tools > Site Health > Info > Media Handling.

How to Measure Your Results

After optimizing, confirm the changes actually helped:

1. Run PageSpeed Insights or Lighthouse: Look at LCP and warnings such as "Properly size images" and "Serve images in next-gen formats."
2. Check the Network tab: In your browser's developer tools, filter by images and look at the transferred size of each file.
3. Compare before and after: Test the same pages before and after optimizing so you can see real improvements rather than guessing.
4. Test on mobile: Use device emulation or a real phone on a slower connection to see how images load for mobile visitors.

Common Image Optimization Mistakes to Avoid

Over-compressing: Pushing quality too low creates blotchy, blurry images that hurt trust more than a slightly slower page would.

Using PNG for photos: A photo saved as PNG can be many times larger than the same image as a JPEG or WebP.

Ignoring existing images: Optimizing new uploads is great, but older posts often hold the heaviest files. Run a bulk optimization at least once.

Stacking plugins: Running multiple optimizers or multiple lazy loading solutions can cause conflicts and broken images.

Forgetting the hero image: Lazy loading or over-compressing your most prominent image often does more harm than good.

---

FAQ: Optimizing Images in WordPress

---

Conclusion

Optimizing images in WordPress comes down to a few repeatable habits: choose the right format, resize to realistic dimensions, compress sensibly, and let WordPress handle responsive images and lazy loading. A good optimization plugin can automate most of that work, including converting to WebP or AVIF and cleaning up your existing library.

Start by measuring a few key pages, optimize your largest images first, and then build the process into your publishing routine so every new upload is lean from day one. Your visitors, your Core Web Vitals, and your hosting bill will all benefit.