Website Thumbnail Image Size: The Complete Guide for WordPress, Open Graph and YouTube

There is no single website thumbnail size. Choose the dimensions from the system that displays the image: WordPress, an Open Graph link preview, YouTube, or your own responsive card. The safest workflow is to identify the destination, match its aspect ratio and crop rules, export an appropriately sized source, then generate responsive variants.

Destination	Practical starting point	What controls the final result
WordPress post or archive thumbnail	Use the image size generated by your active theme and Media settings	Registered theme size, proportional resize or hard crop
Open Graph link preview	A landscape social-preview canvas such as 1200×630 is a convention	The consuming network’s crop and cache behavior
YouTube video	3840×2160, 16:9; minimum width 640px	YouTube’s device limits and placement
YouTube Shorts	2160×3840, 9:16; minimum height 640px	Vertical placement and automatic crops
Responsive website card	Create a source large enough for the largest display, then serve variants	Card aspect ratio, CSS object-fit and device pixel density

1. Identify what “website thumbnail” means

The phrase can describe several unrelated outputs:

A WordPress featured image or archive card generated by the theme.
An Open Graph image shown when a URL is shared in a social network, chat app or collaboration tool.
A YouTube video or Shorts thumbnail.
A card image in a custom website layout.

These systems can use different aspect ratios, crops, file-size limits and metadata. A dimension that works for a WordPress archive can be cropped badly in a social preview, while a YouTube thumbnail is governed by YouTube’s upload rules.

2. WordPress thumbnail and featured-image sizes

WordPress’s defaults are configurable settings, not a universal web standard. The official Theme Handbook lists these defaults:

Generated name	Default dimensions	Resize behavior
`thumbnail`	150×150px maximum	May be cropped according to the Media setting
`medium`	300×300px maximum	Proportional unless configured otherwise
`medium_large`	768px wide	No height limit
`large`	1024×1024px maximum	Proportional unless configured otherwise
`full`	Original upload	No generated resize

Open Settings → Media to inspect thumbnail width and height, whether thumbnails are cropped to those exact dimensions, and the maximum dimensions for medium and large images. The active theme or a plugin can register additional sizes, so inspect the template that actually renders the card before choosing an export size.

Hard crop versus proportional resize

A hard crop forces the requested canvas and can remove faces, logos or other important edges. A proportional resize preserves the entire image but may produce dimensions that do not fill a fixed card. WordPress documents set_post_thumbnail_size(50, 50, true) as an exact-crop example; omitting the crop flag keeps proportional resizing.

<?php
// Exact 400×250 crop for a theme card.
set_post_thumbnail_size(400, 250, true);

// Proportional resize: the image fits within these bounds.
add_image_size('article-card', 800, 500, false);
?>

Use the generated size that matches the largest rendered card. Uploading a very large original does not guarantee that WordPress will deliver it efficiently; the template must request the appropriate generated size.

3. Open Graph thumbnail dimensions

Open Graph requires an og:image URL for the preview image. The protocol also supports optional structured properties for a secure URL, MIME type, width, height and alternative text. It does not prescribe one universal pixel canvas because each consuming service decides how it displays and crops the image.

<meta property="og:title" content="Website Thumbnail Image Size">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/website-thumbnail-image-size">
<meta property="og:image" content="https://example.com/images/thumbnail-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/thumbnail-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Website thumbnail size guide">

A 1200×630 landscape image is a practical convention for many link previews, but label it as a convention rather than a protocol requirement. Keep important content inside a central safe area because platforms can crop the edges, and verify the result in the target network after its cache refreshes.

4. YouTube video and Shorts thumbnails

YouTube’s current guidance recommends a thumbnail as large as practical:

Standard videos: 3840×2160px, 16:9, with a minimum width of 640px.
Shorts: 2160×3840px, 9:16, with a minimum height of 640px.
Formats: JPG or PNG.
Upload limits: the help page lists 2 MB for video thumbnails on mobile and 50 MB on desktop.

YouTube warns that a vertical video using a 16:9 custom thumbnail can be replaced by an automatically generated 4:5 thumbnail on Home, Explore and subscription pages. The custom image remains on the watch feed, watch history and non-mobile platforms. Design a Shorts thumbnail for the 9:16 canvas and keep its focal subject away from areas likely to be covered by interface controls.

5. Responsive website cards

For a card you control, start with the largest size the design will display and generate smaller variants for smaller screens. Reserve the aspect-ratio box before the image loads so the page does not jump.

<figure class="card-media">
  <img
    src="/images/story-800.webp"
    srcset="
      /images/story-400.webp 400w,
      /images/story-800.webp 800w,
      /images/story-1200.webp 1200w"
    sizes="(max-width: 640px) 100vw, 33vw"
    width="1200"
    height="630"
    alt="A browser window showing a responsive layout"
    loading="lazy"
    decoding="async">
</figure>

.card-media {
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}
.card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Explicit dimensions let the browser reserve space before loading, which improves layout stability. WordPress notes that display size, file size, resolution and file type all affect image performance. An image wider than its content area wastes bytes and can disrupt the layout.

6. Export and format checklist

Choose the destination and its required aspect ratio.
Make the source at least as large as the largest intended display, accounting for high-density screens.
Keep the subject inside the crop-safe area.
Export JPEG for photographic images when a smaller file is more important than lossless detail; use PNG for transparency or sharp flat graphics.
Generate responsive widths rather than downloading the original for every card.
Set width and height attributes or an equivalent aspect-ratio box.
Inspect the rendered result on desktop and mobile, including the actual social or video platform.

7. Capture exact thumbnails with a browser (DIY)

When the source is a live page, a browser capture can produce a consistent thumbnail after fonts, images and layout scripts finish. The following Playwright example captures a 1200×630 Open Graph image and waits for the page to settle.

npm install playwright
npx playwright install chromium

// save as capture-thumbnail.mjs
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 1200, height: 630 },
  deviceScaleFactor: 1
});

await page.goto('https://example.com/article', {
  waitUntil: 'networkidle',
  timeout: 90000
});
await page.screenshot({
  path: 'thumbnail-1200x630.png',
  type: 'png',
  fullPage: false
});
await browser.close();

For a full-page source, replace fullPage: false with true, then crop or resize the result to the destination canvas. For a specific element, locate it with page.locator('.card').screenshot(). Add a deliberate wait when a site renders content after network idle:

await page.waitForSelector('.hero', { state: 'visible', timeout: 30000 });
await page.waitForTimeout(500);

8. Or skip the browser setup

ScreenshotNeo returns a website screenshot from one GET request and supports PNG, JPEG, WebP and PDF. Its options include full-page capture with lazy images loaded, CSS-element capture, custom viewport and device presets, retina scale, dark mode, custom CSS and JavaScript, click and wait actions, blocked resources, headers, cookies, user agents, timezone and geolocation, resizing, caching and signed links. See the ScreenshotNeo API documentation for the parameter reference.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

Cookie and consent banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are not billed; response headers identify the page verdict and whether it was billed. An MCP server lets Claude, Cursor and other MCP clients use take_screenshot, get_page_info and capture_pdf. The Free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

9. Troubleshooting

Symptom	Likely cause	Fix
WordPress thumbnail is the wrong shape	The theme registered another size or uses a hard crop	Inspect the active theme’s image-size registration and Media settings; regenerate thumbnails after changing them.
Important content is cut off	The destination applies a center or fixed crop	Move the subject into a safe area, change the aspect ratio, or use an uncropped variant.
Open Graph preview shows an old image	The receiving service cached the URL	Confirm the image URL and metadata, then use the service’s URL debugger or wait for its cache to refresh.
Image looks blurry	The source is smaller than the rendered or high-density display	Export a larger source and provide an appropriate `srcset` candidate.
Page shifts while loading	No intrinsic dimensions were supplied	Add `width`/`height` or reserve space with `aspect-ratio`.
YouTube rejects the upload	File format or device-specific size limit	Use JPG or PNG and stay within the applicable mobile or desktop limit.
Playwright captures a blank or incomplete page	Content is delayed, blocked, or rendered after navigation	Wait for a meaningful selector, add a short delay, check console/network failures, and increase the timeout.
ScreenshotNeo response is not an image	The URL failed, timed out, hit a bot check or returned a blank page	Read `X-Page-Verdict` and `X-Billed`, then adjust waits, headers, cookies or blocking options.

10. Performance, reliability and cost

Performance: match the delivered width to the rendered card, compress appropriately, use responsive variants and reserve layout space.
Reliability: wait for a selector or network idle when content is asynchronous; use a fixed viewport and deterministic CSS for repeatable captures.
Cache strategy: cache immutable thumbnails by content version. For dynamic pages, choose a TTL that matches how often the source changes.
Batch work: when generating many images, queue captures and retry transient navigation failures with a limit. Avoid launching an unrestricted browser per URL.
ScreenshotNeo billing: only clean shots are billed. Cache hits, bot checks, CAPTCHAs, blank pages, timeouts and failed loads cost nothing, and the response identifies the verdict and billing state.

11. Decision checklist

Have you named the destination: WordPress, Open Graph, YouTube, Shorts or a custom card?
Does the aspect ratio match the destination’s crop behavior?
Is the source large enough for the largest display and device pixel ratio?
Are important subjects inside the safe area?
Are responsive variants, compression and explicit dimensions configured?
Did you verify the actual rendered preview on desktop and mobile?

12. FAQ

Is 1200×630 the standard website thumbnail size?

No. It is a practical landscape convention for many Open Graph previews. WordPress, YouTube and custom cards use different rules.

Should every WordPress featured image be 150×150?

No. 150×150 is the default maximum for WordPress’s generated thumbnail size. Themes can register other sizes and crop rules.

You can reuse the artwork, but separate crops and exports usually avoid unwanted cropping because the destinations have different aspect ratios.

Do larger pixels always improve results?

Only until the display and platform limits are covered. Oversized files add transfer cost and loading time without improving a smaller rendered card.

Does a thumbnail dimension guarantee more clicks or better ranking?

No independently published universal statistic establishes that one dimension guarantees ranking or engagement. Test the actual destination and audience.