Images are usually 60–80% of a blog page’s weight. Done wrong, they slow your site, kill Core Web Vitals, and frustrate readers. Done right, they’re invisible — fast, sharp, and accessible. This post is the complete image optimization stack.

Short answer: Resize images before uploading (max 2400px wide). Convert to WebP. Use a compression plugin (Imagify, ShortPixel). Set width/height attributes. Lazy-load below-the-fold images. Serve via CDN (Cloudflare). The combined stack typically cuts image weight by 70–90%.
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 format (WebP / AVIF).
  3. Compress.
  4. Set dimensions and lazy-load.
  5. Serve via CDN.

Each step compounds the others.

Step 1: Resize before upload

The single biggest mistake: uploading 6000px images straight from a camera.

Reasonable maximums:

  • Hero images: 2000–2400px wide.
  • In-content images: 1200–1800px wide.
  • Thumbnails: 600–800px wide (handled by WordPress automatically).

For retina displays (2x density), 2x the displayed size is enough. If your content column is 700px wide, 1400px source is plenty.

How to resize

  • Photo editing apps (Lightroom, Photoshop, Affinity Photo) on export.
  • Free online tools (Bulk Resize Photos, Squoosh).
  • Mac Preview / Windows Photos for one-offs.

Resize-on-upload plugins

Some plugins auto-resize on upload (Imsanity is the classic). Forgetful uploaders benefit.

Step 2: Convert format

JPEG

Good default for photos. Lossy compression, widely supported.

PNG

For graphics with transparency or sharp text. Lossless, larger files.

Don’t use PNG for photos.

WebP

Google’s modern format. Typically 25–35% smaller than equivalent JPEG, supports transparency like PNG. Supported by all modern browsers (95%+ globally).

Use WebP for most images going forward.

AVIF

Newer format. Even smaller than WebP (typically 50% smaller than JPEG). Less universal browser support but growing.

If your image plugin supports AVIF with WebP fallback, use it.

Step 3: Compress

Compression plugins reduce file size without visible quality loss.

Imagify

  • Free tier: 20MB/month.
  • Paid: $9.99+/month.
  • WebP conversion built-in.
  • Three compression levels.
  • Made by the WP Rocket team.

ShortPixel

  • Free tier: 100 images/month.
  • Paid: pay-as-you-go credits.
  • WebP and AVIF support.
  • Bulk optimization.

Smush

  • Free tier with basic compression.
  • Paid tiers for more features.
  • By WPMU DEV.

EWWW Image Optimizer

  • Free option to optimize locally on your server.
  • Paid cloud option for better compression.

Optimole

  • Cloud-based optimization + CDN.
  • Serves optimized images from their CDN automatically.

For most bloggers: pick one, install, run bulk optimization on existing library, let it handle new uploads automatically.

Step 4: Dimensions and lazy loading

Width and height attributes

Every <img> should have explicit width and height. Tells browser how much space to reserve, prevents layout shift.

WordPress 5.5+ adds these automatically. Verify your theme isn’t stripping them.

Lazy loading

Images load only when scrolling brings them into view. Saves initial page weight.

WordPress has native lazy loading since 5.5. Most themes use it.

Important exception: don’t lazy-load above-the-fold images. The hero image should load immediately (and have fetchpriority="high" if possible).

How to exclude hero from lazy load

Some plugins (Perfmatters, WP Rocket) let you exclude the first image. Or set loading="eager" manually.

Step 5: Serve via CDN

CDN delivers images from servers near your visitor, reducing load time.

Cloudflare

  • Free tier handles CDN basics.
  • Polish (paid): auto-converts and compresses images.
  • Mirage (paid): mobile image optimization.

BunnyCDN

  • ~$1+/month minimum.
  • Bunny Optimizer adds WebP, resizing, optimization.

Image-specific CDNs

  • Cloudflare Images: $5/month + usage. Full image management.
  • ImageKit: resize/format on demand.
  • Imgix: high-end.

For most blogs: Cloudflare’s free tier + WebP via Imagify is enough.

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

Filename SEO

Image filenames affect SEO. Bad:

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

Good:

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

Rename before uploading. Hyphens between words, lowercase, descriptive.

Alt text

Every image needs alt text. See the accessibility post for detail. Briefly:

  • Describe what’s in the image.
  • Don’t keyword-stuff.
  • Empty alt for decorative images (alt=””).

WordPress image sizes

WordPress generates multiple sizes from each upload (thumbnail, medium, large, full).

Themes register additional sizes for specific uses (featured image grid, hero, etc.).

Settings → Media controls the default sizes.

WordPress serves the right size automatically via srcset, so browsers get appropriate sizes per device.

Regenerating thumbnails

After:

  • Theme changes (theme may register new sizes).
  • Settings → Media changes.
  • Plugin changes that affect image generation.

Run Regenerate Thumbnails plugin. Recreates all sizes from originals.

Featured images

Featured images appear in archives, social shares, related-post widgets.

Best practices:

  • Consistent aspect ratio across posts (3:2 or 4:3 common).
  • Optimized like other images.
  • Sized for the largest expected display (usually 1200×800 or 1600×900).
  • Visually clear at thumbnail size.

Social images (Open Graph)

The image shown when a post is shared on Facebook/Twitter/LinkedIn.

Default: usually the featured image.

Recommended size: 1200×630 (the OG image standard).

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

Pinterest images

Pinterest favors vertical: 1000×1500 (2:3 ratio).

Strategy: include a vertical “pinnable” image somewhere in each post (often near the top). Use Tasty Pins plugin to hide it from the post visually but make it pinnable.

Image galleries

For posts with many images:

  • WordPress Gallery block (basic grid).
  • Envira Gallery, NextGEN Gallery (advanced).
  • Modula (drag-to-customize).

Galleries should lazy-load aggressively — only visible images matter for initial load.

Stock photos

Free sources:

  • Unsplash, Pexels, Pixabay.
  • Free Stock Photos sites (varying license terms).

Paid:

  • Shutterstock, Adobe Stock, Getty.
  • Death to the Stock Photo (curated subscription).

Always check license terms. Even free sites have some restrictions.

AI-generated images

Midjourney, DALL-E, Stable Diffusion can generate custom images.

Considerations:

  • Quality is high for many use cases.
  • Licensing for commercial use varies by provider.
  • Some platforms (Pinterest) increasingly flag or restrict AI content.
  • Disclose if relevant (some style guides require it).

Common mistakes

  • Uploading 8MB images and relying on plugin compression for everything.
  • Using PNGs for photos (3x larger than necessary).
  • Hot-linking images from other sites (slow, may break).
  • No alt text.
  • Generic filenames.
  • Auto-lazy-loading the hero image (LCP killer).

The honest summary

Image optimization is the highest-impact performance work on a blog. Resize before upload (max 2400px). Convert to WebP. Compress with a plugin (Imagify, ShortPixel). Set dimensions and lazy-load below-the-fold images. Serve via CDN (Cloudflare). Rename files descriptively. Add meaningful alt text. The combined stack typically cuts image weight 70–90%, which means dramatically better Core Web Vitals, ranking, and reader experience.