Google's Blogger platform (Blogger.com) is a popular content engine for creators, but its post editor handles images in ways that are specific to the platform, different enough from a typical CMS that some of the general advice in this series needs a Blogger-specific version. Uploading raw graphics through Blogger without checking your settings can still leave you with uncompressed assets, missing accessibility attributes, and a slower PageSpeed Insights score than necessary.
Welcome back to BytebaseX. I'm Suptojit Modak, and in this twelfth guide of the Image Optimization series, I'll cover what Blogger already handles for you automatically in 2026, what still needs manual attention, how its CDN image URL parameters actually work, and how to fix the responsive layout issues that show up in a lot of custom Blogger themes. If you missed the previous post comparing the best free image compression tools, you can read it here.
Start With Your Dashboard Settings, Not the URL
A lot of older Blogger tutorials, including plenty still floating around today, tell you to manually edit every image URL to add a -rw parameter for WebP conversion. This used to be genuinely necessary. It no longer is, and following that advice today means doing manual work for something Blogger already automates.
Blogger added two settings directly to the dashboard: "Serve post images using WebP" and "Lazy load images." Both live in the same place:
- Log into your Blogger dashboard and open Settings in the left sidebar.
- Scroll to the Posts section.
- Switch on "Serve post images using WebP." This tells Blogger's servers to automatically convert your uploaded JPEGs and PNGs to WebP when a visitor's browser supports it, with no manual URL editing required.
- Switch on "Lazy load images" too, if it isn't already on. This applies native lazy loading to your post images automatically, the same behavior covered in an earlier post in this series, without you touching a single
<img>tag.
If both toggles are already on, and for most Blogger accounts created or updated in the past couple of years they are, you can skip manually appending -rw to your image URLs entirely. The platform is already doing it server-side for every image inserted through the standard post editor. This is worth checking first, before you spend time hand-editing URLs for a problem that might already be solved.
Understanding Blogger's CDN URL Parameters (For the Cases That Still Need Them)
Even with the dashboard settings handling the common case, it's still useful to understand how Blogger's image URLs work, because there are situations the automatic settings don't cover: images in your theme's header, sidebar widgets, or custom layout elements outside the post editor, where the dashboard toggle doesn't reach.
When you upload an image through Blogger, it's hosted on Google's content delivery network, and the generated URL includes a size parameter that controls how the image is rendered:
<!-- Typical Blogger CDN image URL structure -->
https://blogger.googleusercontent.com/img/b/.../s1600/my-photo.jpgThe /s1600/ segment tells Google's CDN to serve the image capped at 1600 pixels on its longest side. You can edit this segment directly in the URL to control the output:
- Change
/s1600/to/s800/: caps the image at 800 pixels instead, useful for images you know will never display larger than that in your layout, like a sidebar thumbnail or a widget icon. - Use
/w800-h450/instead of a single size value: sets an exact width and height independently rather than a single square-fit dimension, useful when you need a specific aspect ratio rather than Blogger's default fit behavior. - Append
-rwto the size segment (e.g.,/s800-rw/): forces WebP conversion on that specific URL, which is now mainly useful for images outside the post editor's automatic handling, like theme assets, since post images are already covered by the dashboard toggle from the previous section.
A practical note: these parameters work on any googleusercontent.com image URL, not just ones Blogger itself generated, which is occasionally useful if you're referencing an image hosted elsewhere on Google's infrastructure. But for anything inside a normal blog post, check your dashboard settings first; manually chasing down and editing every post image URL is solving a problem the platform most likely already solved for you.
Adding Alt Text and Cleaning Up the Image Element
Blogger lets you add alt text either through the visual editor or directly in HTML view, and both paths matter, since a missing alt attribute is a real accessibility and SEO gap covered in more depth in an earlier post in this series.
Using the Compose Editor
- Click the uploaded image inside Blogger's Compose view.
- Click the gear icon that appears in the floating toolbar.
- Fill in the Alt text field with a clear, specific description of the image, following the same guidance from the Image SEO post earlier in this series: describe function and context, not just what's visually there.
- Choose a display size. Stick to Original Size or Large rather than a small preset size that then gets visually stretched by your theme's CSS, since stretching a small source image up in the browser produces a soft, blurry result no compression setting can fix.
Using HTML View
If you're editing the raw HTML directly, keep your image tag clean, with explicit width and height, and without extra inline styling that fights your theme's CSS:
<img src="https://blogger.googleusercontent.com/img/b/.../s800/hero.jpg"
alt="Step-by-step tutorial preview on Blogger optimization"
width="800"
height="450"
loading="lazy">If your dashboard's lazy loading setting is already on, Blogger applies this automatically to post images, so a manually added loading="lazy" attribute here is redundant but harmless. It becomes necessary again for any image placed outside the main post body, in a widget or a custom template section, where the automatic setting doesn't reach.
Fixing Mobile Overflow on Custom Themes
A common problem on older or third-party Blogger XML themes is images that overflow their container on small screens, spilling past the edge of the visible layout instead of scaling down. This happens when a theme's CSS doesn't include a basic responsive image rule, something modern default Blogger themes include but many older or heavily customized ones don't.
You can fix this platform-wide with a small CSS addition. Go to Theme > Customize > Advanced > Add CSS in your Blogger dashboard, and add:
/* Responsive image reset for Blogger themes */
.post-body img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 10px auto;
}The !important flags here are doing real work, not just being cautious: many Blogger themes set specific pixel dimensions inline or in a more specific selector elsewhere in the theme's CSS, and without !important, this reset can get overridden and quietly fail to apply on some templates. Once this is in place, test it on an actual phone or with your browser's responsive design mode, not just by shrinking a desktop window, since Blogger's own mobile theme rendering sometimes behaves differently from a simple resize.
How to Actually Verify WebP Is Being Served
Turning on the dashboard toggle is one thing; confirming it's actually working on your live site is worth doing once, since settings toggles occasionally don't apply retroactively to images uploaded before you switched them on. Open any published post in Chrome, right-click a content image, and choose "Open image in new tab." Look at the resulting URL and the file extension. If the toggle is active and working, you should see either a .webp extension or a -rw segment in the URL, even though you never typed that yourself.
A faster way to check across an entire page at once: open Chrome DevTools, go to the Network tab, filter by "Img," and reload the page. The Type column will show the actual format being downloaded for each image request. If you still see jpeg or png in that column for images inserted through the post editor after you turned the setting on, the toggle may not have applied to older posts retroactively, which is a known gap. In that case, the manual -rw parameter from earlier in this post is still your fallback for images published before you changed the setting.
A Word on Blogger's Automatic Resizing Limits
One thing the dashboard settings don't fix, and can't fix, is an oversized original file. Blogger's WebP conversion changes the format of what you uploaded, it doesn't intelligently crop or resize the source image to match how it's actually displayed on the page. If you upload a 4000-pixel-wide photo straight from a phone or camera and it displays in your post at 800 pixels wide, Blogger's automatic WebP conversion produces a WebP version of that same oversized 4000-pixel image, just in a lighter format. You've gained the format-level savings from WebP, but you're still sending far more pixel data than the visitor's screen will ever use, which is exactly the "Properly size images" problem covered earlier in this series.
This is why the resizing step from that earlier post still matters even on a platform that automates format conversion for you. Resize your source image to roughly match its actual display width before you upload it, then let Blogger's WebP setting handle the format conversion on top of that already-correctly-sized file. The two steps solve different problems, and skipping the resize step means leaving a real chunk of savings on the table even with WebP switched on.
What This Looks Like Once It's All Set Up
Put together, a properly optimized Blogger workflow looks like this: WebP serving and lazy loading are both switched on once in your dashboard settings, so every image inserted through the normal post editor gets both automatically going forward. You still resize and compress your source image before uploading, exactly as covered earlier in this series, since Blogger's automatic WebP conversion doesn't fix an oversized 4000-pixel source photo, it just changes its format. You add proper alt text through the Compose editor as you write. And your theme's CSS has a responsive image rule in place so nothing overflows on mobile.
Quick Reference
| What You Want | Where to Do It | Still Needed Manually? |
|---|---|---|
| Serve post images as WebP | Settings > Posts > "Serve post images using WebP" | No, once the toggle is on |
| Lazy load post images | Settings > Posts > "Lazy load images" | No, once the toggle is on |
| Resize an oversized source photo | Resize and compress before upload (see earlier posts in this series) | Yes, always |
| WebP or lazy loading on theme/widget images | Manual URL parameter or loading="lazy" attribute |
Yes, dashboard settings don't reach these |
| Fix mobile image overflow | Theme > Customize > Advanced > Add CSS | Yes, one-time setup |
| Add alt text | Compose editor gear icon, or HTML view | Yes, per image |
Conclusion
Optimizing images on Blogger in 2026 needs less manual work than most tutorials still suggest, since the platform has quietly absorbed two of the most commonly recommended manual fixes, WebP conversion and lazy loading, into a pair of dashboard toggles. What's left for you to handle manually is exactly what the earlier posts in this series already cover: resizing and compressing your source images before upload, writing genuinely useful alt text, and making sure your theme's CSS doesn't fight against responsive scaling. Check your settings first, and you'll likely find you have less manual cleanup ahead of you than you expected.
This is the twelfth post in the Image Optimization series on BytebaseX. In the final installment, I'll bring every technique across this series together into one comprehensive master guide to image optimization for website speed and performance.
