How to Resize Images for a Blog
Blog images live or die by two numbers: their pixel dimensions and their file weight. Upload a 6 MB camera photo straight into a post and it slows every reader's page load; shrink it to a blurry thumbnail and the post looks amateur. The fix is a repeatable recipe — exact sizes for each image role, the right format, and one batch pass per post. Here's the full workflow with Re-Sizefy.
Recommended sizes by image role
- Hero / featured image: 1600px wide (16:9 crop if your theme uses one). This is the largest image on the page and the one Google measures for loading speed — keep it under 200 KB.
- Inline content images: 1200px wide maximum, matching your content column. Most blog themes render text at 700–800px, so 1200px gives crisp retina rendering without waste. Target under 150 KB each.
- Thumbnails and card images: 800px wide is plenty for archive grids and related-post cards. Under 100 KB.
- Social preview (og:image): exactly 1200×630px JPG. Social platforms crop unpredictably at other sizes, and WebP support for link cards is still unreliable — use JPG here even if everything else is WebP.
The per-post workflow
- Sort images by role. Before touching the tool, decide which photo is the hero, which are inline, and which become the social card. Each role gets its own batch run.
- Batch-resize each group. Drop the hero candidates in, set 1600px wide with the aspect ratio locked, and export. Repeat for inline images at 1200px. Two runs, two minutes.
- Convert to WebP at quality 75–80. Convert during the same pass. Body images in WebP load noticeably faster, which directly improves the page's loading metrics and reader experience.
- Make the social card separately. Crop or resize one image to 1200×630, export as JPG at quality 80, and set it as your og:image. Test it in a link preview debugger before publishing.
- Name files descriptively. Use the renaming rules to produce names like
post-slug-hero.webp. Descriptive filenames are a small but real SEO signal, and they keep your media library searchable.
Don't forget alt text
Resizing gets the file right; alt text gets the meaning right. Write one plain sentence describing what each image shows — it helps screen readers, gives search engines context, and displays if the image fails to load. Keep it under 125 characters and skip phrases like "image of". This is the one part no tool can do for you.
Blog-specific pitfalls
- Uploading originals "just in case". WordPress and most CMS platforms generate their own thumbnails from whatever you upload — feeding them a 6000px original means every derivative is computed from a bloated source. Pre-size before uploading.
- One giant image per post. Ten 150 KB images load progressively and feel fast; one 1.5 MB hero blocks everything. Distribute visual weight across the post.
- Forgetting mobile. Over half of blog traffic is mobile, often on slow connections. The 1200px/150 KB targets above are chosen with those readers in mind — they look sharp on phones and load quickly.
Prep your next post
Open the free Re-Sizefy tool — batch your hero, inline, and thumbnail images to the right sizes in one session, all processed in your browser. No sign-up, nothing uploaded.