✍️ Blog Image Optimization
JPG to WebP for Bloggers
Your blog's hero image is almost certainly the LCP element — the metric Google cares about most for rankings. Switching from JPG to WebP cuts image weight 25–35%, improving load times and Core Web Vitals scores without changing visual quality.
Works on WordPress, Ghost, Webflow
Free, unlimited
No account needed
Batch convert entire posts
Quick answer: For bloggers, converting images to WebP reduces page weight by 25–35%, directly improving Core Web Vitals and user experience. WordPress 5.8+, Ghost, and Webflow all support WebP natively. Use
Convertlo's JPG to WebP converter — free, in-browser, no upload.
Convert Blog Images to WebP — Free
Drop your JPG hero and in-post images. Convert. Upload to your blog.
Convert JPG to WebP →
Recommended Blog Image Sizes
| Image Type | Recommended Size | Target File Size (WebP) | Notes |
|---|
| Hero / Featured image | 1200 × 630 px | Under 120 KB | og:image standard — used by all social platforms |
| In-post content images | 800 px wide | Under 80 KB | Keep height proportional; add loading="lazy" |
| Infographics | 800 × 1200 px | Under 200 KB | Tall format ranks better in Google Image Search |
| Author headshot | 200 × 200 px | Under 20 KB | Use WebP or PNG; often displayed at 48–80px |
| og:image (social share) | 1200 × 630 px | — | Keep as JPG for og:image; use WebP for the <img> tag |
og:image tip: Serve WebP for the actual image in your post's <img> tag. But set your og:image meta tag to a JPG URL — some social media crawlers and Slack unfurls don't handle WebP og:image well.
Blog Platform WebP Support
Image Optimization Workflow for Bloggers
1
Size before convert
Resize your hero to 1200×630 px and in-post images to 800 px wide. Don't upload oversized originals — that wastes storage and conversion time.
2
Convert to WebP
Drop all blog post images into Convertlo. Enable batch mode, set quality to 85, convert all at once.
3
Name your files well
Rename: how-to-bake-sourdough-starter.webp. Google Image Search indexes filenames as a ranking signal.
4
Upload & add alt text
Upload to your blog platform. Add descriptive alt text to every image — it's both an accessibility requirement and an SEO signal.
Blogger Image SEO Tips
LCP
Hero image = LCP element
In most blog posts, the hero/featured image is the Largest Contentful Paint element. Cut its file size with WebP and add fetchpriority="high" to tell the browser to load it first.
Lazy Loading
Lazy-load all images below the fold
Add loading="lazy" to every in-post image. Do NOT add it to the hero — that delays the LCP element and hurts your score.
Filenames
Descriptive filenames = free Image SEO
Before uploading, rename images to describe the content: sourdough-starter-day3.webp. Google reads filenames as context for image ranking.
Alt Text
Alt text doubles as image SEO copy
Write alt text that describes what's in the image, not keyword stuffing. "A sourdough starter in a glass jar on a wooden counter" beats "sourdough bread recipe blog post."
Social Sharing
Keep og:image as JPG for wider compatibility
Use WebP for <img> tags in your post. Set your og:image meta tag to a JPG — Twitter, LinkedIn, and some Slack versions prefer JPG for link preview images.
File Size Target
Under 100 KB per in-post image
A WebP at quality 80–85 typically reaches under 100 KB for a 800 px wide image. If it's still over 150 KB, run it through Convertlo's compressor after converting.
Frequently Asked Questions
What is the best image format for blog posts?
WebP for all in-post images. JPG as og:image for social sharing metadata. PNG only for screenshots containing text or graphics requiring pixel-perfect clarity. WebP at quality 85 produces files 25–35% smaller than equivalent JPGs at the same visual quality — directly improving page load times and LCP scores.
What size should blog hero images be?
1200 × 630 px — the og:image standard used by Facebook, Twitter/X, LinkedIn, and Slack when your post is shared. This exact ratio (1.91:1) fills the link preview card on all major platforms. As a WebP at quality 85, a 1200 × 630 image should be under 120 KB.
Does WebP work on WordPress blogs?
Yes, since WordPress 5.8 (July 2021). Upload WebP directly to your Media Library — no plugin needed. WordPress generates thumbnail variants from the WebP original automatically. For older WordPress versions, either update WordPress or use a plugin like WP Rocket to handle WebP serving.
Will converting to WebP affect my blog's social share images?
Only if your og:image URL points to a .webp file. Set og:image to a JPG URL, and use WebP for the actual post image. This way your in-post images are fast WebP, and your social share thumbnails use the universally compatible JPG format.
How do I check if my blog images are hurting SEO?
Run your blog post URL through Google PageSpeed Insights (pagespeed.web.dev). Look for "Serve images in next-gen formats" and "Properly size images" under Opportunities. These two flags are fixed by converting to WebP and resizing before upload. Also check your LCP score — it should be under 2.5s for a "Good" rating.
How do I optimize images for blog SEO?
Four steps: (1) Resize to 1200 × 630 px for hero, 800 px wide for in-post. (2) Convert to WebP — 25–35% smaller than JPG. (3) Add descriptive filenames: 'chocolate-chip-cookie-recipe.webp' not 'IMG_3842.webp'. (4) Write alt text describing the image content for screen readers and Google Image Search. Also add loading='lazy' to all images except the first hero image.
Does WebP work on Ghost, Webflow, and Substack?
Ghost and Webflow both support WebP uploads natively and serve WebP to compatible browsers. Substack accepts WebP uploads. Medium automatically optimizes images on upload (their CDN converts to WebP). For all self-hosted platforms, uploading WebP directly is the recommended approach.
Key Questions About JPG to WEBP, Answered
Direct answers structured for AI extraction, voice search, and featured snippets.
Will converting my blog photos to WebP make them look worse?
At a sensible quality setting (80-85), no — the difference is not visible to readers. WebP can't add back detail that JPG's compression already removed, but it can store the same visual result in a noticeably smaller file. For blog post images, that trade-off is almost always worth it: the size reduction speeds up page loads without readers noticing any quality difference.
- Quality 80-85 WebP looks the same as the JPG to readers at normal screen sizes
- WebP can't restore detail the JPG already lost — it just stores it more efficiently
- Keep your original JPGs if you ever need to re-export at a different quality
- For hero images or photography-focused posts, use 85-90 to be safe
How much smaller will my blog images be as WebP?
Typically 25-35% smaller than the equivalent JPG at a similar visual quality. For a blog with dozens of images per post, that adds up to real load-time savings — smaller images mean faster page loads, which matters for both readers and search rankings.
- Expect roughly 25-35% smaller files at matched visual quality
- Faster-loading posts tend to perform better in Core Web Vitals and search rankings
- Batch-convert your existing image library to update older posts at once
- If a WebP comes out larger than expected, try a slightly lower quality setting
Why should bloggers bother converting to WebP at all?
Page speed affects both reader experience and SEO, and images are usually the biggest contributor to page weight on a blog. Google's PageSpeed Insights specifically flags JPG images with a "serve images in next-gen formats" suggestion — converting to WebP addresses that directly, and most modern blogging platforms and themes display WebP images without any extra setup.
- Smaller images reduce page weight, which is the most common blog performance issue
- Addresses PageSpeed Insights' "next-gen formats" recommendation directly
- Most modern themes and browsers display WebP without extra plugins
- Convert your most-viewed posts first for the biggest practical impact
Will transparent images (like logos or graphics) still work after converting?
Yes — WebP supports a full alpha channel, so any transparency in a PNG-based graphic carries over correctly. JPG images don't have transparency to begin with, so converting a JPG to WebP won't add or remove anything in that regard — both will be fully opaque.
- WebP fully supports alpha transparency, just like PNG
- JPG images have no transparency to begin with, so nothing changes for those
- Logos and icons exported from PNG stay transparent when converted to WebP
- Test a converted graphic on your site's background colour before publishing