There is no universal website article thumbnail size. The right dimensions are determined by the slot where the image appears, its required crop, your theme or CMS, and any search or social metadata destination. Measure the rendered slot, create an appropriately sized source and responsive variants, preserve the image’s proportions unless a deliberate crop is required, and preview every important placement.
Choose the size from the display slot
An archive-card thumbnail, an article’s featured image, a related-post tile and an Open Graph preview can all use different shapes. Start by inspecting the actual rendered slot in your browser at the largest viewport your design supports. Record its CSS width, CSS height and aspect ratio. Then check smaller breakpoints and high-density displays.
- Archive or category card: Measure the card image box and note whether the theme uses a fixed-height crop.
- Article hero or featured image: Measure the content column rather than the full monitor width. A wide source may be displayed responsively inside that column.
- Sidebar or related-post tile: Use the tile’s own ratio; do not reuse a hero crop if it cuts off the subject.
- Search and social metadata: Select an image relevant to the page and check the destination’s current requirements separately. A WordPress thumbnail default is not a social-network specification.
Choose a source large enough for the largest intended display, but do not send the original, full-resolution file to every slot by default. Generate variants that cover the actual layout widths.
Aspect ratio and cropping matter as much as pixels
When scaling, preserve the source height-to-width ratio. Stretching an image to fill a box distorts faces, screenshots and text. If the design requires a fixed ratio, make an intentional crop and inspect the result at each placement. Keep the important subject away from edges that may be clipped.
Free tools Windows power users keep installed
One-click scans. No signup required.
Calculate a proportional size
If an image is 1600 × 900 (16:9) and the slot is 800 pixels wide, a proportional variant is 800 × 450. If the slot is 320 × 240 (4:3), create a deliberate 4:3 crop rather than squeezing the 16:9 file. Keep the uncropped original so you can produce alternate crops later.
Use CSS cropping deliberately
A fixed box with object-fit: cover fills the box while preserving proportions, but it discards edges. Use object-position to keep a face or product in view, and test narrow screens where the crop can change substantially.
WordPress dimensions: defaults, not universal recommendations
WordPress documents these default maximums:
| WordPress size | Documented maximum | What it means |
|---|---|---|
| thumbnail | 150 × 150 px | Square maximum; settings and theme behavior can alter output. |
| medium | 300 × 300 px | Maximum width and height. |
| medium_large | 768 px wide | No height limit is documented for this size. |
| large | 1024 × 1024 px | Maximum width and height. |
| full | Original available file | Not automatically the best choice for a card or hero. |
These are WordPress size options, not evidence that every website should upload or display a 150 × 150 image. A theme can register custom sizes and request a specific crop. In Settings → Media, administrators can set thumbnail width and height, choose whether thumbnails are cropped to exact dimensions, and set maximum medium and large dimensions. Existing uploads may need regeneration after changing settings, depending on your workflow.
Register the size your template actually needs
For a custom theme, define a named size that matches the design and request it in the template:
add_theme_support( 'post-thumbnails' );
add_image_size( 'article-card', 640, 360, true );
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'article-card' );
}The final true requests an exact crop. Omit exact cropping when the image should retain its natural ratio. Confirm that the template requests the registered name; merely registering a size does not make the browser use it.
Responsive delivery with srcset and sizes
WordPress supports native responsive images by adding srcset and sizes attributes to generated markup. The browser then selects an available candidate appropriate to the viewport and device resolution.
<img
src="/uploads/article-640.webp"
srcset="/uploads/article-320.webp 320w,
/uploads/article-640.webp 640w,
/uploads/article-1280.webp 1280w"
sizes="(max-width: 700px) 100vw, 640px"
width="640"
height="360"
alt="Dashboard showing monthly traffic"
>The sizes value must describe the layout, not simply repeat the largest file width. If the image occupies the full viewport below 700 pixels and a 640-pixel column otherwise, the example is appropriate. A theme can customize the value when its real layout differs.
Reserve space to reduce layout shift
Include intrinsic width and height values, or an equivalent aspect-ratio rule, so the browser reserves space before the image arrives. Use the dimensions of the selected variant’s ratio, not arbitrary numbers.
Balance quality and file weight
Physical display size and encoded file size are separate decisions. Compare JPEG, WebP or another format supported by your delivery stack at the intended dimensions and quality. A visually clean 640-pixel card is preferable to a multi-megabyte original that is immediately downscaled. Keep text inside an image legible at the smallest important placement.
Featured images, cards and metadata need separate checks
Do not assume one upload will look correct everywhere. Build a placement checklist:
- Open the article at desktop and mobile widths.
- Check the featured image’s focal subject and crop.
- Open an archive or category page and inspect the card variant.
- Check related-post and sidebar tiles if they use a different ratio.
- Inspect the HTML for the intended
srcset,sizes, width and height. - Validate the image selected for
og:imageor structured data. Google recommends a page-relevant image and advises against generic logos or images containing text; follow each destination’s current constraints.
Search and social previews are metadata consumers, not ordinary in-page thumbnails. Their requirements can change independently of your CMS settings, so verify them for the specific destination and date of publication.
A practical sizing workflow
- Inventory placements. List hero, archive, related, author and metadata uses.
- Measure rendered boxes. Record width, height and ratio at each breakpoint.
- Select a master. Use a source large enough for the largest intended display, with the subject composed for likely crops.
- Define variants. Register CMS sizes or generate widths that cover real slots and high-density screens.
- Choose crop behavior. Preserve ratio for fluid images; use an explicit crop for fixed-ratio cards.
- Enable responsive markup. Confirm that
srcsetcandidates and an accuratesizeshint are emitted. - Reserve layout space. Supply intrinsic dimensions or aspect-ratio CSS.
- Test and revise. Inspect real pages, not only the media-library preview, and adjust focal points or custom crops.
Common mistakes and fixes
Using 150 × 150 everywhere
Cause: Treating WordPress’s thumbnail default as a web standard. Fix: Measure each slot and register the dimensions and crop it needs.
Rank #4
- Reusable Nail practice hand book for acrylic nails Realistic life sized nail practice finger for gel polish nail art. Nail design Workbook nail decal sticker maker Character Nail Art Templates | Nail Art Decal Practice | Cartoon Nail Design Guide | Nail Sticker Templates | DIY Nail Art Practice Nail Art Stencil
- Create your favorite designs by drawing with gel polish 🎨 (you can also use other tools like acrylic paint, pencils, or markers) directly on these laminated sheets. Start by creating a transparent layer with a soft top or base coat, then peel off the design and apply it to your nails! This is a great tool to improve your nail art skills! 💅
- Great for Practice with Gel polish designs Acrylic Application Line Work3D Flowers & Leaves Liquid to Powder Ratio Paint and Designs+ Rhinestones
Blurry featured images
Cause: The source or selected responsive candidate is narrower than the rendered slot, or the browser is forced to use a small file by an inaccurate sizes value. Fix: Add a sufficiently wide variant and correct the layout hint.
Important content is cut off
Cause: An exact crop or object-fit: cover removes the focal area. Fix: Recompose the source, set an appropriate focal position, or use a less aggressive ratio.
Layout jumps while images load
Cause: Missing intrinsic dimensions or aspect-ratio reservation. Fix: Emit width and height (or equivalent CSS) for every important image.
Social preview looks wrong
Cause: The metadata image is being treated like an in-page card, or a cached preview has not refreshed. Fix: Set a page-relevant metadata image, follow the destination’s current rules and recheck after its cache expires.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsChanging Media settings did not alter old files
Cause: New dimensions generally affect generated derivatives, not already-created files. Fix: Regenerate derivatives using your site’s established maintenance process, then verify template requests and cache behavior.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance and reliability considerations
Serve the smallest variant that remains sharp at its actual display size. Lazy-load below-the-fold cards, but prioritize the article’s primary image when it is visible immediately. Keep filenames and alternative text descriptive, and do not put essential editorial text only inside the bitmap. Test with the site’s production theme because plugins, CDN behavior and cache rules can change which candidate is delivered.
Or skip the browser setup
If you need screenshots of article layouts for QA, documentation or previews, ScreenshotNeo returns a PNG, JPEG, WebP or PDF from one request. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Use the ScreenshotNeo documentation for options such as full-page capture, CSS-selector elements, device presets, retina scale, custom CSS and JavaScript, waits, request blocking, cookies, headers, geolocation, PDF settings, caching, signed links, asynchronous webhooks and bulk capture.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://itechguides.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://itechguides.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://itechguides.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
Frequently Asked Questions
Should every article use the same thumbnail dimensions?
No. Use dimensions and crops that match each rendered placement and responsive breakpoint.
Is a square thumbnail required for WordPress?
No. WordPress’s 150 × 150 thumbnail is a configurable default maximum, not a universal requirement.
What should I do when a design has both fixed and fluid image boxes?
Create separate deliberate crops for fixed-ratio boxes and proportional responsive variants for fluid boxes.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
