Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsThere is no single “website thumbnail size.” The correct pixel dimensions depend on where the image is rendered: a WordPress image preset, a social-link preview, a YouTube video or Short, or a responsive card in your own page. Identify that rendering system first, then choose an image large enough for its largest display, preserve the required aspect ratio, serve an appropriate file size, and test the actual crop.
Choose the size from the destination
“Website thumbnail” can mean several different things. A WordPress archive may use a theme-registered crop; a link shared in a chat app may read Open Graph metadata; YouTube applies its own upload rules; and a custom card on your site may need responsive image variants. These systems do not share one universal canvas.
| Destination | Practical dimensions | Aspect ratio | Important constraint |
|---|---|---|---|
| WordPress thumbnail or featured image | Use the generated preset that matches the template; defaults include 150×150, 300×300, 768px wide and 1024×1024 maximum | Preset- or theme-defined | Settings and theme registrations control resizing and cropping |
| Open Graph link preview | Use a dedicated landscape source; 1200×630 is a common convention, not a protocol requirement | Usually about 1.91:1 for the convention | The protocol requires an image URL; each network decides presentation and cropping |
| YouTube standard video | 3840×2160 recommended; 640px minimum width | 16:9 | JPG or PNG; upload limit depends on device |
| YouTube Short | 2160×3840 recommended; 640px minimum height | 9:16 | Vertical-video surfaces can substitute an automatic crop |
| Responsive page card | Source large enough for the largest rendered slot, then provide responsive variants | Template-defined | Reserve the aspect-ratio box and set dimensions in markup |
Pixel dimensions alone do not determine quality. Crop behavior, compression, file type, display density, and the actual CSS slot all matter. An oversized file can slow a page, while an image that is too small will become soft on high-density screens.
WordPress thumbnail and featured-image sizes
What WordPress creates by default
WordPress’s standard image sizes are configurable presets, not a web-wide standard:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Thumbnail: 150×150 pixels maximum.
- Medium: 300×300 pixels maximum.
- Medium Large: 768 pixels wide, with no height limit.
- Large: 1024×1024 pixels maximum.
- Full: the original uploaded image.
“Maximum” means proportional resizing unless the crop setting says otherwise. A 1600×900 source may produce a medium image around 300×169 rather than a 300×300 square.
Check the settings before exporting
- In the WordPress dashboard, open Settings → Media.
- Review the thumbnail width and height, and whether thumbnails are cropped to those exact dimensions.
- Review maximum width and height for medium and large images.
- Inspect the active theme’s documentation or code for additional registered sizes.
- Open a real archive, search page and post page, then compare the rendered slot with the generated image URL.
The active theme can register its own sizes and choose proportional resizing or hard cropping. For example, set_post_thumbnail_size(50, 50, true) requests an exact 50×50 crop; omitting the final crop flag keeps proportional resizing. A theme may therefore use a “featured image” size that is neither 150×150 nor 300×300.
What to upload
Upload a clean source large enough for the biggest template that will use it. Let WordPress generate smaller variants rather than placing the original multi-megapixel file into every card. Keep the subject away from edges when a theme may crop to a square or panoramic ratio, and verify both desktop and mobile templates.
Open Graph dimensions for link previews
Required metadata
The Open Graph protocol requires four properties for a page: og:title, og:type, og:image and og:url. The og:image value is the absolute URL of the image representing the page. It is not an instruction to resize the image to one universal dimension.
Useful image properties
When your implementation supports them, add:
og:image:secure_urlfor an HTTPS image URL.og:image:typesuch asimage/jpegorimage/png.og:image:widthandog:image:height.og:image:altdescribing the image.
A 1200×630 landscape canvas is a practical convention for many social previews, but label it as a convention rather than a protocol rule. The receiving network, app or messenger can crop, scale or replace the preview. Keep important text and faces inside a safe central area, and test the URL after publishing because crawlers may cache an earlier image.
Example head markup
Replace the values with the page-specific URL and image:
<meta property="og:title" content="Example article">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/images/article-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Description of the article image">YouTube thumbnail dimensions
Standard videos
YouTube currently recommends a custom thumbnail of 3840×2160 pixels in a 16:9 ratio, with a minimum width of 640 pixels. JPG and PNG are supported. The maximum upload size listed by YouTube is 2 MB on mobile and 50 MB on desktop for video thumbnails.
Shorts
For Shorts, the recommended canvas is 2160×3840 pixels at 9:16, with a minimum height of 640 pixels. Keep titles and faces away from the top and bottom interface areas where controls may overlap.
Vertical-video caveat
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 visible in the watch feed, watch history and on non-mobile platforms. Create a vertical thumbnail for a Short instead of relying on a landscape file.
Responsive thumbnails on your own site
Start with the rendered slot
Measure the largest CSS slot at the breakpoints where the card appears. Export a source that can cover that slot, then generate smaller variants for phones and narrow columns. Serving a 2400-pixel image into a 280-pixel card wastes bytes; serving a 400-pixel image into a 900-pixel card produces blur.
Rank #3
Reserve space before the image loads
Set intrinsic width and height attributes or an equivalent aspect-ratio box. WordPress’s developer guidance notes that explicitly specifying dimensions lets the browser reserve the correct space and improves cumulative layout stability.
<img src="card-800.jpg"
srcset="card-400.jpg 400w, card-800.jpg 800w, card-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 33vw"
width="1200" height="675"
alt="Description of the article">The width and height above describe a 16:9 source ratio. Change them to the real ratio of your files. Use object-fit: cover only when intentional cropping is acceptable; use object-fit: contain when the entire image must remain visible.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Choose a file format deliberately
- JPEG: usually efficient for photographic thumbnails; excessive compression creates blocking and ringing.
- PNG: useful for transparency, screenshots and sharp flat graphics, but often heavier for photos.
- GIF: supports simple animation but is inefficient for photographic content.
Compare visual quality at the actual rendered size, not only at 100% zoom. Confirm that your image pipeline preserves the color profile and does not strip required metadata from social-preview files.
A repeatable thumbnail workflow
- Name the destination: WordPress preset, Open Graph preview, YouTube video, Short or custom card.
- Record the slot and ratio: measure CSS dimensions and note whether the platform hard-crops.
- Create a master: keep a larger original with text and subjects inside safe margins.
- Generate variants: create the WordPress, responsive or platform-specific files rather than reusing one crop everywhere.
- Add dimensions and metadata: include intrinsic image dimensions in HTML and the relevant Open Graph properties.
- Test real surfaces: inspect archive cards, mobile layouts, link previews and YouTube pages where the image will appear.
- Check delivery: verify file size, cache behavior, HTTPS accessibility and that the image URL returns the intended MIME type.
Troubleshooting common thumbnail problems
The image is blurry
Check whether the rendered slot is larger than the selected WordPress or responsive variant. Increase the source or choose a larger srcset candidate, then inspect compression quality.
The subject is cut off
The template is probably hard-cropping to a different ratio. Inspect the theme’s registered size and CSS, then create a crop designed for that ratio or switch to proportional resizing where the design permits.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The social preview shows an old image
Open Graph consumers cache previews. Confirm that og:image points to the new absolute URL, that the file is publicly reachable over HTTPS, and that width, height and MIME metadata match the file. Retest after the consumer refreshes its cache.
Recommended Free Tools
The page jumps while loading
Add accurate width and height attributes or an aspect-ratio container. Do not let a late-loading image determine layout height.
YouTube rejects the file
Check orientation, minimum dimensions, format and the upload limit for the device you are using. A desktop limit does not automatically apply to mobile uploads.
The image makes the page slow
Do not deliver the full master to every card. Resize to the largest needed display, provide responsive candidates, compress according to content, and avoid loading below-the-fold thumbnails eagerly when your layout supports lazy loading.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need repeatable screenshots of pages to inspect thumbnail rendering, ScreenshotNeo provides a single HTTP request and an MCP server for AI agents. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Use the API documentation at https://screenshotneo.com/docs/ for all options, including viewport and device presets, full-page capture with lazy images loaded, CSS-selector element capture, dark mode, retina scale, PDF output, custom CSS or JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data and the OpenAPI specification.
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}`);The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account to capture your test pages.
FAQ
Is 1200×630 mandatory for every website thumbnail?
No. It is a common Open Graph convention. WordPress templates, YouTube and custom card layouts use different dimensions and ratios.
Should I upload one enormous image and let the browser scale it?
Only as a source for generating variants. Delivering an unnecessarily large file increases transfer cost and can delay rendering.
Crashes, 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 minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Can one crop serve both a YouTube video and a Short?
Not reliably. Standard videos use 16:9 while Shorts use 9:16, and YouTube may replace an unsuitable landscape thumbnail on vertical-video surfaces.
Frequently Asked Questions
Does WordPress always display a 150×150 thumbnail?
No. That is the default thumbnail preset’s maximum, while themes can register other sizes and choose proportional or hard-cropped resizing.
What Open Graph image properties should I include besides the URL?
Where supported, include secure URL, MIME type, width, height and alt text so consuming services have complete image metadata.
What is the minimum YouTube thumbnail size?
YouTube lists a 640-pixel minimum width for standard 16:9 thumbnails and a 640-pixel minimum height for 9:16 Shorts thumbnails.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The Bottom Line
Choose thumbnail dimensions from the system that renders the image: WordPress preset, Open Graph consumer, YouTube orientation or your own responsive slot. Preserve the intended ratio, generate delivery-sized variants, reserve layout space with explicit dimensions, and test the real crop and file weight.
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.
