Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →There is no universal website-thumbnail size. Choose dimensions from the image’s actual display slot, crop ratio, screen density and platform requirements. For a normal blog, start with the theme’s rendered width and keep one consistent ratio. WordPress’s built-in thumbnail is only a maximum 150×150 pixels; it is not a universal featured-image standard. If you are targeting Google Discover, use a separate 16:9 image at least 1200 pixels wide and more than 300,000 total pixels, with large previews enabled.
Quick size guide by placement
“Thumbnail” can mean a small card image, an article’s featured image, or an image Google selects for search and social previews. Those slots have different requirements. Measure the slot your theme actually renders instead of choosing one number for every use.
| Use case | Practical starting point | Ratio or rule | Important qualification |
|---|---|---|---|
| Compact card or post list | Match the card’s rendered width; commonly a square or 4:3 derivative | Use one consistent ratio for every card | The theme may crop your source automatically. |
| Article featured image or hero | At least the maximum CSS width of the hero, with extra pixels for high-density screens | Use the ratio specified by the theme | “Featured image” has no fixed WordPress dimension. |
| WordPress default Thumbnail | 150×150 px maximum | Square when hard cropping is enabled | Settings and themes can change this value. |
| Shopify blog image suggestion | 1200×800 px | 3:2 | Shopify’s general suggestion, not a universal web rule. |
| Shopify thumbnail suggestion | 300×300 px | 1:1 | Adapt it to the store’s actual card size. |
| Google Discover large preview | At least 1200 px wide and more than 300,000 total pixels | 16:9 recommended | Enable max-image-preview:large or use AMP; Discover distribution is not guaranteed. |
How to calculate the right source dimensions
1. Measure the rendered slot
Inspect the card or hero at the largest layout it reaches. Record its CSS width and height on desktop and mobile. If a card is 320 CSS pixels wide, a source around 640 pixels wide gives a 2× density option; it is not a requirement to send that large file to every visitor. The key is having an available derivative that stays sharp at the largest expected display.
2. Pick the crop before exporting
Decide whether the slot is square, landscape or another fixed ratio. Keep faces, product details and text inside the safe center area because a theme, social platform or Google can crop again. Do not use a wide hero source in a square card unless you have checked the crop.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
3. Generate derivatives rather than one oversized upload
Keep a high-quality original, then create derivatives for the card, featured image and preview uses. Serving a 2400-pixel image into a 300-pixel card wastes bytes; serving a 300-pixel file into a 1200-pixel hero produces softness. Responsive markup lets the browser select the appropriate derivative.
WordPress: what the built-in sizes really mean
The WordPress Theme Handbook documents these default image sizes:
| WordPress name | Default maximum | How it behaves |
|---|---|---|
| Thumbnail | 150×150 px | Maximum dimensions; cropping can be enabled or disabled. |
| Medium | 300×300 px | Maximum dimensions while preserving the image ratio unless hard cropping is configured. |
| Medium Large | 768 px wide | No default height limit. |
| Large | 1024×1024 px | Maximum dimensions, subject to the original ratio. |
These are defaults, not promises about your site. In the dashboard, check Settings → Media for configured sizes. A theme or plugin can register additional sizes and decide whether each one is cropped. Templates can also request a custom size for a particular component. Inspect the generated HTML and the CSS width of the actual card before changing settings.
Why “featured image” is not a fixed size
WordPress uses “featured image” (also called a post thumbnail) for an image representing a post, page or custom post type. The active theme decides where it appears and which registered derivative it requests. Two sites can both use WordPress and require completely different featured-image dimensions.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Responsive delivery with srcset and sizes
WordPress can add srcset and sizes attributes so the browser chooses an available image based on viewport width and pixel density. A simplified example looks like this:
<img src="post-768.webp"
srcset="post-320.webp 320w, post-640.webp 640w, post-1280.webp 1280w"
sizes="(max-width: 700px) 100vw, 640px"
alt="Descriptive alternative text">The sizes value should describe the image’s real layout width, not simply repeat the largest file width. If your theme uses an unusual grid, its default sizes attribute may need customization. Test at mobile, desktop and high-density display settings to confirm that the browser receives an appropriate derivative.
Aspect ratio and cropping choices
Square cards
A 1:1 crop works well for compact lists, author grids and product-like cards. Compose the source with the subject near the center and keep edge details expendable.
Landscape cards and featured images
Landscape ratios such as 3:2 or 16:9 provide room for scenes, screenshots and headlines. Use the ratio your theme reserves; consistency matters more than selecting a fashionable ratio.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
When the same post appears in several slots
Do not assume one crop can serve every placement. Keep the original, then create a square card derivative and a wider hero derivative with deliberate focal points. If your CMS supports focal-point controls, set them before regenerating derivatives.
Quality, compression and loading weight
Physical dimensions should fit the layout, resolution should remain clear at the display size, and file weight should be low enough for the page to load promptly. There is no universal byte ceiling that is correct for every thumbnail. A detailed photograph and a flat illustration can have very different compressed sizes at the same pixel dimensions.
- Export JPEG, WebP or another format your delivery stack supports, then compare visual quality at 100% display.
- Remove unnecessary metadata when your workflow permits it.
- Do not enlarge a small source; upscaling creates blur that compression cannot fix.
- Use lazy loading for below-the-fold cards, but load the primary hero image promptly when it is the page’s main content.
- Check the delivered file in browser developer tools rather than judging only the original upload.
Google Discover and search previews are separate requirements
Discover large previews
Google’s Discover guidance recommends an image at least 1200 pixels wide, more than 300,000 total pixels and a 16:9 ratio. A 1280×720 image has 921,600 pixels and meets those thresholds. To permit the large format, set max-image-preview:large or use AMP. Google may crop automatically, so keep the important subject away from the extreme edges. These recommendations improve eligibility for a large preview; they do not guarantee Discover traffic or a particular crop.
Google image and page previews
Google can use schema.org image properties and the og:image metadata as signals. Select an image that represents the page, avoid a generic logo, and avoid extreme ratios. Google chooses previews automatically from several signals, so metadata can influence selection but cannot force one exact image in every result.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
A repeatable do-it-yourself thumbnail workflow
- Inventory placements. List every card, hero, RSS image and social preview that uses the post image.
- Measure layouts. Record each slot’s maximum CSS width and ratio at desktop and mobile breakpoints.
- Choose a master. For Discover-oriented editorial images, prepare a 16:9 master at least 1200 pixels wide. For ordinary cards, use dimensions tied to the theme’s largest slot.
- Set focal points. Keep faces, logos and essential text within the crop-safe area.
- Export derivatives. Produce the card, medium and hero sizes your templates request; preserve the original separately.
- Wire responsive markup. Confirm that
srcsetlists real derivatives and thatsizesmatches the layout. - Validate on devices. Check cropping, sharpness, contrast, loading behavior and accessibility text on mobile and desktop.
- Inspect previews. Verify
og:image, structured image properties and the robots preview directive where Discover eligibility matters.
Or skip the browser setup
If your thumbnail is a screenshot of a webpage, ScreenshotNeo can return a PNG, JPEG, WebP or PDF from one request. Set the viewport or device preset to the card or hero dimensions, then use the resulting image as your source or resize it into your responsive derivatives. The API supports full-page capture with lazy images loaded, CSS-selector element capture, dark mode, retina scale, custom CSS and JavaScript, click-before-capture, selector hiding, waits for selectors, delays or network idle, request and resource blocking, custom headers, cookies, user agents, Authorization, timezone and geolocation, transparent backgrounds, resizing, cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration.
See the ScreenshotNeo documentation for authentication and all options. These are runnable examples; replace the URL and key:
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and each response reports the result in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools to Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.
Troubleshooting common sizing problems
The image looks blurry in the hero
Check the largest rendered CSS width and the selected srcset candidate. If the browser is receiving a derivative smaller than the slot, add a larger derivative and correct the sizes value.
Important content is cut off
The template is applying a different crop, often with object-fit: cover. Change the focal point or create a derivative with the template’s exact ratio instead of shrinking the same wide source.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Cards have uneven heights
Use a consistent aspect ratio or fixed media-box ratio for all cards. Mixed source ratios will produce uneven rows when the theme preserves intrinsic dimensions.
WordPress keeps serving an unexpected size
Inspect the image URL in the rendered HTML, then check Settings → Media and the active theme’s registered sizes. A template may request a custom derivative rather than the default Thumbnail or Large size.
Discover shows a different image
Google selects previews automatically. Confirm that the page exposes a relevant high-resolution image, valid og:image or structured image data, and permits large previews, but do not expect a guaranteed image or crop.
Recommended Free Tools
The page became slower after adding thumbnails
Compare transferred bytes and selected candidates in developer tools. Generate smaller derivatives for narrow slots, use responsive markup, compress at an acceptable quality level and defer below-the-fold images.
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.
