Images are usually 60% to 80% of a blog page’s total weight. Done wrong, they slow your site, kill your Core Web Vitals, and frustrate readers who give up before the page even finishes loading. Done right, they’re invisible: fast, sharp, and accessible without drawing attention to themselves. This post covers the complete image optimization stack.

Before and after comparison of image optimization showing 3.2MB JPEG reduced to 280KB WebP

The five-step optimization stack

  1. Resize before upload.
  2. Convert the format to WebP or AVIF.
  3. Compress.
  4. Set dimensions and lazy-load.
  5. Serve via CDN.

Each step compounds the ones before it, so skipping one weakens the whole stack.

Step 1: Resize before upload

The single biggest mistake bloggers make is uploading 6,000px images straight from a camera without touching them first.

Reasonable maximums to aim for:

  • Hero images: 2,000 to 2,400px wide.
  • In-content images: 1,200 to 1,800px wide.
  • Thumbnails: 600 to 800px wide, which WordPress handles automatically.

For retina displays running at 2x pixel density, twice the displayed size is enough. If your content column is 700px wide, a 1,400px source image is plenty, and anything larger is wasted bandwidth.

How to resize

  • Photo editing apps like Lightroom, Photoshop, or Affinity Photo, resized on export.
  • Free online tools like Bulk Resize Photos or Squoosh.
  • Mac Preview or Windows Photos for quick one-off resizes.

Resize-on-upload plugins

Some plugins auto-resize images on upload, and Imsanity is the classic example. Forgetful uploaders benefit the most from setting one of these up once and forgetting about it.

Step 2: Convert format

JPEG

A good default for photos. Lossy compression, and supported absolutely everywhere.

PNG

Best for graphics with transparency or sharp text. Lossless, but noticeably larger files as a result.

Don’t use PNG for photos. It’s the wrong tool for that job.

WebP

Google’s modern format. Typically 25% to 35% smaller than an equivalent JPEG, and it supports transparency the way PNG does. As of 2026, WebP is supported by roughly 97% of browsers globally, according to web.dev’s own performance guidance, which makes it a safe default for most images going forward.

AVIF

A newer format, often even smaller than WebP, sometimes by as much as 50% compared to JPEG. Browser support has caught up quickly and now sits close to WebP’s, in the mid-90% range.

If your image plugin supports AVIF with a WebP fallback, use it. The fallback protects the small remaining share of visitors on older browsers.

Step 3: Compress

Compression plugins reduce file size without visible quality loss to the eye.

Imagify

  • Free tier covers roughly 200 images a month.
  • Paid plans start around $5.99/month for about 5,000 images, with an unlimited tier around $11.99/month.
  • WebP conversion is built in.
  • Offers three compression levels to choose from.
  • Made by the same team behind WP Rocket.

ShortPixel

  • Free tier covers 100 images a month.
  • Paid plans run on pay-as-you-go credits, starting around $3.99/month.
  • Supports both WebP and AVIF.
  • Includes bulk optimization for existing media libraries.

Smush

  • Free tier with basic compression.
  • Paid tiers unlock more advanced features.
  • Built by WPMU DEV.

EWWW Image Optimizer

  • A free option that optimizes locally, right on your own server.
  • A paid cloud option available for stronger compression results.

Optimole

  • Cloud-based optimization paired with a built-in CDN.
  • Automatically serves optimized images straight from their CDN.

For most bloggers, the process is simple: pick one plugin, install it, run a bulk optimization pass on your existing library, then let it handle new uploads automatically from then on.

Step 4: Dimensions and lazy loading

Width and height attributes

Every image tag should have explicit width and height attributes. This tells the browser how much space to reserve before the image loads, which prevents layout shift as the page renders.

WordPress 5.5 and later adds these automatically. It’s still worth verifying your theme isn’t stripping them out somewhere in the template.

Lazy loading

Lazy-loaded images only load once scrolling brings them into view, which saves meaningful weight on the initial page load.

WordPress has had native lazy loading since version 5.5, and most themes rely on it by default.

One important exception: don’t lazy-load above-the-fold images. The hero image should load immediately, ideally with fetchpriority="high" set if your setup supports it.

How to exclude the hero from lazy load

Some plugins, like Perfmatters and WP Rocket, let you exclude the first image from lazy loading automatically. Otherwise, you can set loading="eager" manually on that specific image.

Step 5: Serve via CDN

A CDN delivers images from servers physically closer to each visitor, which reduces load time meaningfully, especially for visitors far from your origin server.

Cloudflare

  • The free tier handles CDN basics at no cost.
  • Polish (a paid add-on) auto-converts and compresses images.
  • Mirage (also paid) optimizes images specifically for mobile.

BunnyCDN

  • Starts around $1+/month.
  • Bunny Optimizer adds WebP conversion, resizing, and optimization on top.

Image-specific CDNs

  • Cloudflare Images: around $5/month plus usage, with full image management.
  • ImageKit: resizes and converts formats on demand.
  • Imgix: a high-end option built for larger operations.

For most blogs, Cloudflare’s free tier paired with WebP conversion through Imagify is genuinely enough.

A diagram showing image flow: original upload, plugin processes (resize, convert, compress), and CDN delivery to visitors

Filename SEO

Image filenames affect SEO more than people expect. Bad examples:

  • IMG_8472.jpg
  • screenshot-2026-03-15.png

Good examples:

  • wordpress-image-optimization-stack.jpg
  • aurora-theme-archive-layouts.png

Rename files before uploading them. Use hyphens between words, keep everything lowercase, and make the name genuinely descriptive of what’s in the image.

Alt text

Every image needs alt text. Our guide to setting up a blog for accessibility covers this in more depth, but briefly:

  • Describe what’s actually in the image.
  • Don’t keyword-stuff the description.
  • Use an empty alt attribute (alt=””) for purely decorative images.

WordPress image sizes

WordPress generates multiple sizes automatically from each upload: thumbnail, medium, large, and full.

Themes register additional sizes for specific uses, like a featured image grid or a hero banner.

Settings, then Media, controls the default sizes WordPress generates.

WordPress serves the right size automatically via srcset, so browsers pull the appropriate size for each visitor’s device without any extra work from you.

Regenerating thumbnails

Run a thumbnail regeneration after:

  • Theme changes, since a new theme may register different image sizes.
  • Changes under Settings, then Media.
  • Plugin changes that affect how images get generated.

The Regenerate Thumbnails plugin recreates every size from the original files in one pass.

Featured images

Featured images show up in archives, social shares, and related-post widgets, so they’re worth getting right.

Best practices:

  • Keep a consistent aspect ratio across posts, commonly 3:2 or 4:3.
  • Optimize them the same as any other image.
  • Size them for the largest expected display, usually around 1200×800 or 1600×900.
  • Make sure they’re visually clear even at thumbnail size.

A theme built around clean archive and homepage grids, like Aurora, makes consistent featured image sizing much easier to maintain across dozens of posts, since the layout itself enforces the aspect ratio rather than leaving it to guesswork.

Social images (Open Graph)

This is the image shown when a post gets shared on Facebook, Twitter, or LinkedIn.

By default, it’s usually your featured image.

The recommended size is 1200×630, the standard OG image dimension across platforms.

If your featured image doesn’t crop well to 1200×630, set a separate OG image per post in your SEO plugin instead.

Pinterest images

Pinterest favors vertical images, ideally around 1000×1500, a 2:3 ratio.

A common strategy is including a vertical “pinnable” image somewhere near the top of each post, then using a plugin like Tasty Pins to hide it visually from regular readers while keeping it pinnable for Pinterest.

Image galleries

For posts with many images, a few options work well:

  • The WordPress Gallery block for a basic grid layout.
  • Envira Gallery or NextGEN Gallery for more advanced options.
  • Modula for drag-to-customize layouts.

Galleries should lazy-load aggressively, since only the images currently visible actually matter for initial page load.

Stock photos

Free sources worth checking first:

  • Unsplash, Pexels, and Pixabay.
  • Other free stock photo sites, though license terms vary between them.

Paid sources for more selection or exclusivity:

  • Shutterstock, Adobe Stock, and Getty.
  • Curated subscription services like Death to the Stock Photo.

Always check the license terms before using an image commercially. Even free sites carry some restrictions worth reading closely.

AI-generated images

Tools like Midjourney, DALL-E, and Stable Diffusion can generate custom images on demand.

A few things worth considering before relying on them:

  • Output quality is genuinely high for many use cases now.
  • Commercial use licensing varies by provider, so check the specific terms.
  • Some platforms, Pinterest included, increasingly flag or restrict AI-generated content.
  • Disclose AI use where relevant. Some style guides now require it explicitly.
Tip: Before bulk-optimizing an existing media library, export a full backup of your uploads folder first. Compression plugins are generally safe, but a bad batch run on thousands of images at once is much easier to recover from with a backup on hand than without one.

Common mistakes

  • Uploading 8MB images and relying entirely on plugin compression to fix it after the fact.
  • Using PNGs for photos, which run roughly 3x larger than necessary.
  • Hot-linking images from other sites, which is slow and can break without warning.
  • Skipping alt text entirely.
  • Using generic filenames that tell search engines nothing.
  • Auto-lazy-loading the hero image, which quietly kills your LCP score.

Where the effort actually pays off

Image optimization is the highest-impact performance work on most blogs. Resize before upload, capping hero images around 2,400px. Convert to WebP. Compress with a plugin like Imagify or ShortPixel. Set explicit dimensions and lazy-load everything below the fold. Serve through a CDN like Cloudflare. Rename files descriptively, and add meaningful alt text throughout. The combined stack typically cuts image weight by 70% to 90%, which translates directly into dramatically better Core Web Vitals, better rankings, and a noticeably better experience for anyone actually reading your site. If you haven’t tackled page speed more broadly yet, our Core Web Vitals troubleshooting guide is the natural next stop.