There is no single Blogger thumbnail size that works for every blog. The dimensions and crop seen on a homepage, post list, or featured area are controlled mainly by the active theme and the placement of the image. Blogger’s editor lets you resize an inserted image, but Google does not publish one theme-independent thumbnail specification. The most useful starting point is the image’s display context, not a supposedly universal number.
A February 21, 2024 product-expert answer reported editor choices of 200px, 320px, 400px, and 640px on the longer side. Those are community-observed editor options, not a guarantee for every Blogger account or theme. Use them as display-size examples while you test the actual layout on your blog.
What “thumbnail size” means in Blogger
People use “thumbnail” to describe several different things:
- the image inside a post body;
- a small image beside a homepage or archive excerpt;
- a featured-post image at the top of a template; or
- a card image supplied by a custom widget.
These placements can use different containers, aspect ratios, and CSS rules. A post image that looks correct when opened in the article can therefore appear cropped or enlarged in a feed. The relevant question is not simply “What size does Blogger require?” but “What box does my theme create for this image, and how does it fill that box?”
Recommended Free Tools
#1 Best Overall
Google’s official help explains how to add an image and change its size in the editor, but it does not designate a universal thumbnail width or height. See Google’s Blogger image instructions for the editor controls.
Editor size choices you may see
A Blogger Help Community product-expert reply dated February 21, 2024 listed these longer-side choices in the post editor:
| Editor label | Reported longer side | What the value does not specify |
|---|---|---|
| Small | 200px | The final height, crop, or homepage thumbnail behavior |
| Medium | 320px | The theme’s card width or aspect ratio |
| Large | 400px | Whether edges will be cropped in a feed |
| Extra Large | 640px | How a featured widget will render the source |
These figures come from that community answer, not from a Blogger-wide specification. Accounts, templates, and current editor interfaces can differ. The ratio of the source image still affects its height after resizing; a landscape image and a portrait image with the same longer-side setting will not occupy the same shape.
Rank #2
Choose the source image by placement
Use this decision framework before uploading a replacement:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute| Where the image appears | What to check | Practical choice |
|---|---|---|
| Inside the post | The reading column’s width and whether readers should see the complete image | Preserve the source ratio if the whole image matters; resize in the editor after insertion. |
| Homepage or archive snippet | The card’s fixed width, fixed height, and whether the theme uses a cover-style crop | Prepare a source whose focal subject remains near the center and preview the feed at desktop and mobile widths. |
| Featured-post area | The hero frame’s ratio and any overlay text | Keep important text and faces away from the edges that a cover crop could remove. |
| Custom widget | The widget’s own image settings and CSS selectors | Inspect that widget separately; changing the post-body image size may not change the widget. |
When a layout fills a fixed frame, it may crop the source to avoid empty space. When it shows the complete source, empty bands or unused space can appear instead. Neither result proves that the upload resolution is wrong.
Set and test an image in Blogger
- Identify the failing placement. Note whether the problem is in the post editor, the homepage, an archive, or a featured module. Open the same post on a phone-sized viewport as well as a desktop viewport.
- Check the active theme. In the Blogger dashboard, open the Theme area and review the available customization or HTML controls. Blogger themes can be changed through their HTML and CSS, so the template—not just the uploaded file—can determine the displayed crop. Google documents theme changes at Change the design of your blog.
- Insert or select the image. In the post editor, add the image, select it, and use the displayed size choices. Start with the setting that fits the post column; do not assume that choosing Extra Large will make a homepage card larger.
- Compare the source ratio with the frame. If a wide source is being placed in a nearly square card, expect either cropping or empty space. Reframe the source around its subject when the theme cannot be changed.
- Preview every relevant view. Check the post page, homepage, labels or archive pages, and mobile view. A fix for one placement may have no effect on another because they can use different markup.
- Change theme code only deliberately. If you control the template, back it up before editing HTML or CSS and target the specific thumbnail container. Do not paste a forum snippet as a universal fix: selectors and image rules vary by theme.
Diagnose cropping, zooming, or tiny thumbnails
The image is cropped on the homepage but complete in the post
This pattern usually points to the homepage card’s frame or its CSS. Confirm whether the theme is forcing a fixed height or a cover-style fit. Try a source ratio closer to the card, or adjust the theme’s thumbnail rule if you maintain the template. A Blogger Help Community thread documents a theme-specific cropped-and-zoomed case; it demonstrates that theme code can affect the result, not that one CSS declaration fixes every blog. Read the example at this troubleshooting thread.
The thumbnail looks blurry or too small
Check the displayed width of the card and the source dimensions. A source that is smaller than the rendered frame can look soft when enlarged. Conversely, selecting a larger editor option changes the displayed post image but may not override a widget’s own maximum width. Test a larger source and inspect the theme’s image rule before repeatedly uploading the same file.
Only one widget is wrong
Compare another feed or archive view. If only one module is affected, inspect that widget’s settings or selector rather than changing every post image. A custom widget may generate its own crop from the same source.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The image changes after upload
Google says images uploaded to Blogger may be compressed and optimized for web delivery, which reduces data usage and can speed loading. The official wording is: “Images uploaded to Blogger may be compressed and optimized for the web, which results in less data usage and faster load times for readers.” Do not promise that the editor will preserve an untouched original-quality file or that a larger upload will always produce a sharper thumbnail. The same official guidance notes that these optimized images do not count against Google storage quota; see the image help page.
Rank #4
A repeatable thumbnail workflow
- Record the target frame. Take note of the approximate width, height, and ratio of the card in the theme you actually use.
- Prepare a clean source. Crop around the subject, keep critical details away from edges, and avoid adding text that could be cut off.
- Upload once and use the editor control. Select the nearest displayed size for the post column, then save or update the post.
- Verify generated views. Check the homepage, labels, search or archive lists, and the post itself. Clear a browser cache or use a private window when an old preview persists.
- Change one variable at a time. Test a different source ratio, editor size, or theme rule separately so you know which change produced the result.
This process is more reliable than chasing a single “best resolution.” The correct value is the one that supplies enough detail for the largest frame your theme renders while matching that frame’s shape.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to inspect how a live Blogger page renders, ScreenshotNeo can capture the rendered URL through one request. It is a screenshot API and MCP server, not a replacement for choosing the source image or editing Blogger’s theme; use it to produce repeatable previews of the post, homepage, or archive view.
Before capture, ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page and billing result with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use the API documentation at screenshotneo.com/docs/ for authentication and options. This cURL request captures a Blogger page as a WebP file:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://yourblog.blogspot.com -o shot.webpThe same request from Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://yourblog.blogspot.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)And from Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://yourblog.blogspot.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);You can add full-page capture, a CSS-selected element, a chosen viewport or device preset, retina scale, dark mode, custom CSS or JavaScript, waits for a selector or network idle, hidden selectors, cookies, headers, geolocation, timezone, caching with a chosen TTL, signed links, asynchronous webhooks, and bulk capture of up to 100 URLs per call. Those controls let you compare the same Blogger layout consistently, including a specific thumbnail element.
Every feature is included on every plan: 1,000 shots per month free with no card, Starter is $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; annual billing provides two months free. Create a free ScreenshotNeo account to test your Blogger layouts with 1,000 screenshots a month and no card.
Common mistakes to avoid
- Using a theme-independent number: a number copied from another blog may describe that site’s card, not yours.
- Changing only the post editor size: homepage and featured widgets can apply separate rules.
- Ignoring the source ratio: a square frame cannot show every edge of a very wide image without changing the fit.
- Assuming a larger upload prevents cropping: cropping is often caused by the destination frame.
- Editing CSS without a backup: a selector tied to one theme can break after a template change.
- Judging from one viewport: responsive layouts commonly alter card dimensions between desktop and mobile.
Frequently Asked Questions
Can I set one thumbnail dimension for every Blogger theme?
No. Blogger’s editor offers resize choices, while each theme or widget decides how a thumbnail container is sized and cropped.
How do I tell whether the source file or the theme is responsible for a crop?
Compare the same image in the post body and the homepage or archive. If it is complete in the post but cropped in the feed, inspect that feed’s frame and CSS first.
Does choosing Extra Large guarantee a larger homepage thumbnail?
No. The editor setting affects the inserted post image; a homepage or featured widget may impose its own width, height, and crop behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
