How to Resize Images for Your Blog (Complete 2026 Guide)

A blog post with 5 uncompressed stock photos can weigh 15–25 MB. That single decision — uploading images at full size — is the #1 reason beginner blogs are slow, rank poorly, and frustrate readers on mobile. The fix takes 3 minutes per image. This guide tells you exactly what to do.

You'll learn the right dimensions for every type of blog image, which file format to use, how to compress without losing quality, and how to build a simple workflow that keeps every post fast.

Why Image Size Directly Affects Your Rankings

Since 2021, Google uses Core Web Vitals as a direct ranking factor. The three metrics — LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift) — are heavily influenced by your images. Large, unoptimized images hurt all three.

WordPress makes this worse by default: when you upload a 5 MB image, WordPress automatically generates 5–10 size variants — meaning a single unoptimized upload creates 25–50 MB of server storage across all variants. Multiply that by 100 blog posts and you have a serious performance problem.

⚡ The Rule: Never upload an image larger than the size it will actually be displayed at. If your blog content area is 1200px wide, your images only need to be 1200px wide — uploading at 4000px wastes bandwidth and hurts your Core Web Vitals without any visual benefit.

Exact Image Dimensions for Every Blog Use Case

Use these dimensions as your baseline. Your specific theme may display images slightly differently — check your theme’s documentation or measure your content area width using browser DevTools (right-click → Inspect → hover over your content area).

Image Formats Explained — Which One to Use

Choosing the right format is as important as choosing the right dimensions. The wrong format can double your file size with zero quality benefit — or cause images to display incorrectly across browsers.

✅ 2026 Standard: Use WebP for everything. WordPress has supported native WebP upload and display since version 5.8 (2021). Export as WebP from Canva, Squoosh, or any modern image editor. You’ll get 25–35% smaller files than JPG with no visible quality difference — a straightforward Core Web Vitals win.

File Size Targets — What to Aim For

These are the maximum file sizes to target for each image type. Staying under these thresholds keeps your pages loading fast and your Core Web Vitals scores in the green zone.

Best Free Tools to Resize & Compress Images

All of these tools are free. The first three require no software installation — they run entirely in your browser. For a workflow that covers both resizing and compression, use Squoosh first.

💡 Recommended Workflow: Squoosh → WordPress. Open Squoosh.app, drag your image in, resize to your target dimensions (e.g., 1200×628 px), switch format to WebP, set quality to 80%, download. Then upload directly to WordPress. Total time: 90 seconds per image. The Smush plugin handles any remaining optimization automatically.

The Complete Image Workflow — Step by Step

Follow this exact process for every image before uploading to your blog. Takes 2–3 minutes per image once you’ve done it a few times.

Part A: Resize and Compress (Before WordPress)

1. Know your target dimensions before you start — Check the cheat sheet above. Featured image? 1200×628. In-post image? 800×450. Don’t start resizing until you know exactly what dimensions you’re targeting. Saves redoing it.
2. Open Squoosh.app and drag your image in — Go to squoosh.app in your browser. No signup required. Drag your image file directly onto the page. You’ll see a side-by-side comparison editor with your original on the left.
3. Resize to your target dimensions — On the right side, click the Resize panel. Enter your target width (e.g., 1200). Keep “Maintain aspect ratio” checked — height adjusts automatically.
4. Set format to WebP and quality to 80% — Change the format dropdown to WebP. Set quality to 80. Watch the file size number in the bottom right. Aim for under 150 KB for featured images.
5. Fine-tune quality if needed — If the file is still over target, reduce quality to 70 or even 60 and check the preview. For most blog photos, the difference between 80% and 65% quality is invisible to the human eye but the file size difference is significant.
6. Download and rename the file — Click the download button. Rename the downloaded file before saving: use descriptive keywords with hyphens — e.g., how-to-write-seo-blog-posts-featured.webp. Never upload with the default Squoosh filename.

Part B: Upload to WordPress Correctly

• Upload via the block editor — In your WordPress post, click the + block button → Image → Upload. Or go to Media Library and drag your file in. Either method works — the Media Library lets you add alt text immediately after uploading.
• Add alt text immediately after upload — In the Media Library, click your newly uploaded image and fill in the Alt Text field on the right. Describe what’s in the image and include your post’s target keyword naturally.
• Set as Featured Image (for your post header) — In the post sidebar → Featured Image → Set featured image. Select your 1200×628 px optimized image. This controls what appears at the top of your post AND what appears in social share previews.
• Enable lazy loading (built into WordPress) — WordPress 5.5+ automatically adds loading="lazy" to images below the fold — meaning images don’t load until the reader scrolls to them. This is automatic, but verify it’s not disabled in your theme settings.
• Verify with PageSpeed Insights after publishing — After publishing, go to pagespeed.web.dev, enter your post URL, and run the mobile test. Check for “Properly size images” or “Serve images in next-gen formats” warnings. If they appear, you still have unoptimized images on that page.

Retina Screens, Responsive Images & WordPress Handling

Modern screens — especially Apple Retina and high-DPI Android displays — have pixel densities 2–3× higher than standard screens. An image that looks crisp at 600px on a standard screen will look blurry at 600px on a Retina screen, because the display is rendering at 1200 or 1800 physical pixels.

The Retina Rule for Bloggers

Upload images at 2× your intended display width to look sharp on Retina screens. If your content area is 800px wide, upload at 1600px wide. But — and this is critical — compress aggressively so the file size stays under your target despite the larger dimensions.

⚠️ Practical Balance: Doubling dimensions for Retina roughly quadruples file size. In practice, the recommended approach for most bloggers is to upload at 1200px wide for featured images (not 2400px) and keep file sizes under 150 KB. This provides a good balance between sharpness and performance — WordPress and modern browsers handle the display scaling.

WordPress Automatic Size Variants

When you upload any image to WordPress, it automatically creates several resized versions:

• Thumbnail — 150 × 150 px (cropped)
• Medium — 300 × 300 px (max)
• Medium Large — 768px wide
• Large — 1024px wide
• Full size — Your uploaded dimensions

WordPress’s built-in responsive images (srcset) automatically serves the right size to each device — a mobile visitor gets the 768px version, a desktop visitor gets the 1200px version. This works automatically as long as you upload at the correct dimensions in the first place.

5 Image Mistakes That Hurt Your Blog Performance

✗ Uploading images straight from camera or stock site: Raw photos from DSLRs or stock sites are typically 3000–6000px wide and 5–20 MB in size. Uploading these directly to WordPress without resizing creates massive files that slow every page they appear on — and WordPress generates 5–10 variants, multiplying the storage impact. Always resize and compress first.

✗ Using PNG for photographs: PNG is lossless — it preserves every pixel perfectly. For photographs with thousands of color gradients, this creates enormous file sizes (5–10× larger than WebP or JPG). PNG should only be used for graphics with transparent backgrounds, logos, screenshots, or images with text. All photographs should be WebP or JPG.

✗ Forgetting to add alt text: Missing alt text is both an SEO problem and an accessibility problem. Google uses alt text to understand what your image shows and connect it to search queries. Screen readers for visually impaired users read alt text aloud. Make adding alt text a non-negotiable step every single upload.

✗ Not specifying image dimensions in HTML: When WordPress inserts images without explicit width and height attributes, the browser doesn’t know how much space to reserve — causing Cumulative Layout Shift (CLS) as images load and push content down. WordPress automatically adds these attributes when you insert images through the block editor, but custom HTML blocks may not.

✗ Ignoring existing unoptimized images: If you’ve been uploading unoptimized images for months, your existing posts are still slow. Use the free Smush plugin’s bulk optimization feature to compress all previously uploaded images in one click. This retroactively fixes the damage and can produce significant page speed improvements across your entire blog.

Image Optimization Checklist

• Resized to correct dimensions (see cheat sheet above)
• Exported as WebP at 80% quality
• File size under target (<150 KB for featured)
• Renamed with descriptive keyword-rich filename
• Uploaded to WordPress Media Library
• Alt text added — describes image + includes keyword
• Set as Featured Image for the post
• Smush plugin installed (auto-compresses on upload)
• No PNG used for photographs
• PageSpeed Insights checked after publishing

Tags: how to resize images for blog, image optimization WordPress, WebP format 2026, Core Web Vitals images, Squoosh tutorial, blog image dimensions, compress images free