Website Featured Image Sizes: A Practical Guide for 2026

There is no single featured-image size that fits every website. Your theme or CMS determines where an image appears, which crops it creates, and which file the browser receives at each screen size. For Google Discover, Google recommends a relevant image at least 1200 pixels wide and more than 300,000 pixels total; those are Discover recommendations, not universal requirements for every featured image.

A practical starting point is to create a well-composed source image large enough for your biggest placement, then check the actual crops and responsive output your site produces. If Discover matters, also set a preferred image and allow large previews. These steps make an image eligible for consideration; they do not guarantee that Google will select it or show it.

1. What size should a website featured image be?

Start with the dimensions and crop behavior of the placement where the image will appear. A post header, homepage card, archive card, and social or search preview may all use different shapes. The uploaded original may be resized or cropped before it is shown.

Use	Practical guidance
Your site’s featured-image placement	Check the active theme or CMS settings and inspect the rendered image. There is no theme-independent WordPress dimension.
Google Discover consideration	Use a relevant image at least 1200 px wide and more than 300,000 pixels total. Google gives 1280 × 720 as an example that exceeds the pixel-area recommendation.
Landscape crop	16:9 is a useful option when the image suits that framing. Keep the important subject within the crop.
Responsive display	Provide appropriate image sizes and responsive markup so the browser can select a resource suited to the viewport.

The Discover figures apply to Discover guidance. They are not a WordPress default or a guarantee of selection. A 1280 × 720 image has 921,600 pixels, which is above Google’s stated total-pixel recommendation.

2. Choose the right source image and crop

List the placements. Identify the article header, homepage or archive card, and any discovery preview that matters. Note their shapes and approximate displayed sizes.
Inspect theme output. In WordPress, check the active theme’s featured-image support and registered image sizes. Themes can register custom sizes, and different placements can use different crops. See the WordPress Theme Handbook on featured images.
Compose for the crop. Keep faces, products, and other essential details away from edges that a card or cover crop might remove. Preview at the smallest card size as well as the large header size.
Use a landscape crop only when it fits. If you prepare a 16:9 version, make sure it preserves the subject. Google’s guidance says: “If you choose to crop your images yourself, be sure your images are well-cropped and positioned for landscape usage, and avoid automatically applying an aspect ratio.” See Google Search Central’s Discover guidance.
Set a focal point where supported. A fixed aspect ratio with cover scaling can cut off part of the source. Use the editor’s focal-point control and check the crop in its intended placement.

3. Prepare images for Google Discover

If Discover is an important destination, Google recommends a relevant image at least 1200 px wide with more than 300,000 total pixels. A 1280 × 720 landscape image is one example. Choose a subject that represents the page; Google advises against generic logos and text-heavy images as preferred Discover imagery.

Also make the preferred image clear to Google:

Specify it with structured data or the og:image metadata property.
Set max-image-preview:large or use AMP to enable large image previews.
Keep the image relevant to the page and available to crawlers.

These steps affect eligibility and presentation, but none guarantees a Discover appearance or a particular thumbnail choice. See Get on Discover.

4. Deliver responsive images

Responsive markup lets the browser choose among available image resources based on the viewport and layout. WordPress has supported srcset and sizes since WordPress 4.4 and generates smaller image sizes on upload; theme additions and media settings affect what is available. See the WordPress Responsive Images handbook.

Here is a generic HTML pattern. Replace the example URLs with real image files generated by your site, and adjust the width candidates and sizes expression to match the layout. Keep a normal src fallback and set explicit dimensions:

<img
  src="/images/article-feature-1280.jpg"
  srcset="/images/article-feature-640.jpg 640w,
          /images/article-feature-960.jpg 960w,
          /images/article-feature-1280.jpg 1280w"
  sizes="(max-width: 700px) 100vw, 900px"
  width="1280"
  height="720"
  alt="A concise description of the featured image"
>

The sizes value is an example, not a universal setting. It should describe how wide the image is actually displayed by your layout. Incorrect hints can lead the browser to choose a larger or smaller resource than needed. Keep the src URL valid as a fallback. Google’s Image SEO best practices recommend a fallback URL when using responsive markup and explicit image dimensions.

WordPress-specific checks

Confirm the theme supports featured images and identify its registered sizes and crop settings.
Inspect the page HTML for generated srcset, sizes, fallback src, and width and height attributes.
Check that the source and generated variants are available at the URLs in the markup.
Verify that the intended image is also used in og:image or structured data when Discover is a goal; the featured-image field alone does not establish every preview.

For non-WordPress sites, apply the same principles using the platform’s responsive-image feature. Its implementation depends on the CMS and theme.

5. Preview the actual image and metadata

Open the published page at desktop and mobile widths.
Check each placement separately: header, card, and any other template that displays the featured image.
Look for faces or key details cut off by a crop, especially at the smallest card size.
Inspect the rendered HTML for src, srcset, sizes, width, and height.
Inspect the page’s og:image or structured data if you want to signal a preferred image for Discover.
Confirm the large-preview setting is present if you rely on max-image-preview:large.

A screenshot can help review what a page looks like at a particular viewport. For example, a screenshot of the published page can reveal whether the hero crop cuts off the subject; it does not replace checking the page metadata or the different image files selected by responsive markup.

6. Common problems and fixes

Symptom	Likely cause	What to check or change
The subject is cut off in a card	The theme uses a fixed crop or cover scaling.	Adjust the focal point, choose a more suitable source crop, or revise the placement’s crop settings.
The image looks soft on a large display	The delivered variant is smaller than the displayed area needs, or a larger candidate is missing.	Inspect the generated sizes and `srcset`; ensure a sufficiently large source variant is available.
The page downloads an unnecessarily large image on mobile	The `sizes` hint does not reflect the actual rendered width, or candidates are missing.	Match `sizes` to the layout and inspect the selected resource in the browser.
Discover shows an unexpected image	The preferred image may be unclear, unavailable, or different from the image Google selects.	Check `og:image` or structured data and ensure the image is relevant and accessible. Google’s recommendation does not guarantee selection.
A WordPress image is missing a useful crop	The theme or media settings may not generate that size.	Review the active theme’s registered sizes and regenerate or replace variants as appropriate for your WordPress setup.
The image causes layout movement while loading	Displayed dimensions are not reserved before the image loads.	Output width and height attributes, or otherwise reserve the correct aspect ratio in the layout.
A vertical source looks awkward when forced to landscape	An automatic fixed aspect ratio removed important content.	Keep the original shape where appropriate, or make a deliberate landscape crop that preserves the subject.

7. Performance, reliability, and cost considerations

Responsive variants can reduce unnecessary image downloads because the browser can select a resource suited to its display context. The benefit depends on having suitable variants and accurate layout hints. Explicit dimensions also let the page reserve space for the image and reduce layout shifts.

Keep an original suitable for the largest intended placement, but avoid making every placement download that full-size file. Check the rendered choice on mobile and desktop rather than assuming the browser selected the right candidate. If a page uses a remote image service or a CMS-generated file, confirm those URLs remain reachable and that each required variant exists.

There is no universal file-size budget or performance benchmark established by the sources used for this guide. Image encoding, compression, caching, network conditions, and the number of delivered variants affect transfer size and loading behavior. Measure your own pages and choose a quality and file size that suit the image and placement.

8. Inspect the rendered page with a screenshot

To review a crop, use a browser screenshot tool at the viewport where the featured image appears. If you already have a browser automation setup, capture the published page at desktop and mobile dimensions and compare the visible subject. A screenshot shows the rendered result at that viewport; inspect the HTML separately to confirm responsive candidates and metadata.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request can return an image or PDF, and its screenshot can help review the published page’s visible crop. See the ScreenshotNeo API documentation.

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

import requests

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

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

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed; its MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card, with paid plans starting at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

9. Frequently asked questions

Is 1200 × 675 the required featured image size?

No. Google’s Discover guidance is at least 1200 pixels wide and more than 300,000 total pixels. It does not prescribe 1200 × 675 as a universal website or WordPress size.

Does adding `max-image-preview:large` guarantee a large Discover image?

No. It enables large image previews, but does not guarantee that a page appears in Discover or that Google chooses a particular image.

Should every featured image be 16:9?

No. Use that crop when it suits the subject and placement. A forced landscape ratio can remove important content from a vertical or differently composed image.

Can I use one image file for every placement?

You can, but the site may crop it differently and a single resource may not be suitable for every viewport. Check the actual theme output and responsive variants.