There is no single WordPress-wide hero-image size. Start with the active theme or template’s image guidance, then choose an image that fits the hero’s aspect ratio and crop on both desktop and mobile. The right pixel dimensions depend on the layout; WordPress can generate and serve smaller image variants for different screens.
Why WordPress has no universal hero-image size
“Hero image” describes where an image appears in a design, not a standard WordPress image-size preset. A hero might use a theme’s featured-image output, a Cover block, or a regular Image block. Each path can have different dimensions, crop behavior, and controls. Themes can also register their own image sizes.
WordPress provides built-in image variants, but their names do not mean “hero.” The documented defaults are useful context, not recommendations for a particular banner:
| WordPress size | Documented default | What it does—and does not—tell you |
|---|---|---|
| Thumbnail | Up to 150 × 150 pixels | A small variant; it does not specify hero dimensions. |
| Medium | Up to 300 × 300 pixels | A smaller variant; not a universal hero size. |
| Medium Large | 768 pixels wide, no height limit | A generated width, not a recommended hero width. |
| Large | Up to 1024 × 1024 pixels | A default variant, not a hero-image target. |
| Full | The uploaded image | The original upload, where available; it is not automatically the best choice for every screen. |
Site settings and theme registrations can affect which outputs are available. For a featured image, check the active theme’s documentation and the template that displays it. For example, the Twenty Twenty-One theme documentation recommends a featured image at least 610 pixels wide; that advice is specific to that theme, not a WordPress-wide rule.
Choose dimensions from the actual layout
1. Identify how the hero is rendered
Determine whether the page uses a featured image, a Cover block, or an Image block. If it is a featured image, look for the theme’s recommended dimensions and registered sizes. If it is a block, inspect the block’s width, height, and crop settings. Do not assume that replacing one image type with another will preserve the same crop or sizing behavior.
2. Check the container at wide and narrow widths
Look at the hero area in the theme or page template at desktop and mobile widths. Its shape may change between breakpoints: a wide, shallow area on desktop can become taller or narrower on a phone. The image should have enough resolution for the largest intended display, while its aspect ratio and composition should still work when the container changes shape.
There is no exact target pixel size to give without knowing the site’s theme and layout. Use the template’s actual container proportions as the starting point rather than choosing a familiar number and hoping it fits.
Rank #2
3. Keep the important subject inside likely crop areas
When a layout fills a fixed area by cropping, edges are the first parts at risk. Leave breathing room around the subject and avoid placing essential text or faces close to the sides or top and bottom. Check the result at both wide and narrow widths; a composition that looks balanced on desktop may cut off its focal subject on mobile.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Choose crop behavior: Cover, Contain, or theme output
| Display choice | Result | Best fit | Watch for |
|---|---|---|---|
| Cover | Fills the area by cropping parts of the image | A hero area that must remain filled edge to edge | The crop can remove parts of the image; use the focal-point control to keep the main subject visible. |
| Contain | Shows the full image | Artwork or imagery that must remain entirely visible | Empty space can remain around the image if its proportions do not match the container. |
| Theme featured-image output | Uses the theme’s template and image-size treatment | A post or page hero designed around the theme’s featured-image feature | Theme-specific behavior and registered sizes determine the display. |
In a Cover block, adjust the focal point when using Cover so the subject stays in view as the crop changes. WordPress advises leaving width and height set to Auto in most cases; set a fixed height only when the design requires it. A fixed height can make a consistent banner, but it also makes the crop more consequential across different screen shapes.
Understand upload dimensions, generated sizes, and responsive images
The uploaded original and the file shown to a visitor do not have to be identical. WordPress creates image sub-sizes, and responsive-image behavior can offer different variants for different display contexts. The browser may use a smaller image on a narrower screen rather than downloading the full upload in every case.
WordPress Developer Resources illustrates responsive delivery with a 1500 × 706 pixel upload and explains that a mobile device can receive a smaller image. That example shows how responsive images work; it is not a standard hero dimension. Check the generated output and page performance after choosing the layout instead of assuming that the original upload must serve every viewport.
Also distinguish upload processing from display sizing. The WordPress Client-Side Media Processing guide describes a default big-image scaling threshold of 2560 pixels, which can be changed. That threshold is an upload-processing behavior, not a recommendation to make a hero 2560 pixels wide or tall.
A practical sizing and review workflow
- Find the rendering path. Identify the theme template, featured-image setting, Cover block, or Image block responsible for the hero.
- Check theme guidance. For a featured image, consult the active theme’s documentation and registered image sizes. Treat any recommended dimension as specific to that theme and template.
- Measure the container. Check its proportions at the largest intended display and at a narrow mobile width. Select an image with enough resolution for the largest display while preserving a composition that can survive the crop.
- Set the crop intentionally. Choose Cover when the region must be filled, or Contain when the entire image must remain visible. With Cover, position the focal point over the important subject.
- Preview multiple widths. Confirm the main subject remains visible and the hero still looks intentional on desktop and mobile. Adjust the focal point, image, or layout if it does not.
- Check responsive output and performance. Confirm that generated image sizes are available and that the browser can select an appropriate variant. Avoid treating the full original as a requirement for every visitor.
Common sizing problems and fixes
- The image is blurry or looks undersized. The file selected or generated for the display may not have enough resolution for the largest intended container. Check the theme’s size guidance and available generated variants; use an image with sufficient resolution for that display.
- The subject is cut off on mobile. A wide desktop crop may not suit a narrow container. Reposition the Cover block’s focal point and preview again. If one crop cannot preserve the composition at both widths, choose a more flexible image or revisit the layout.
- The full image appears with empty bands or space. This is consistent with Contain when the image and container have different proportions. Use Cover if filling the area matters more than showing every edge, or keep Contain if preserving the complete image matters more.
- The image differs from the upload. WordPress can create sub-sizes and responsive output can select a variant for the viewing context. Inspect the rendered page and available generated sizes before assuming the original should appear unchanged.
- A very large upload does not improve the hero. The upload’s pixel dimensions do not dictate the display dimensions. Check the theme’s output, generated variants, crop, and actual container. The 2560-pixel big-image threshold concerns processing and is not a target hero width.
- A theme recommendation seems too small or too large. Verify that the guidance belongs to the active theme and the relevant template. A number documented for one theme—such as Twenty Twenty-One’s 610-pixel-wide-or-larger recommendation—should not be applied as a universal WordPress rule.
Or skip the browser setup
For repeatable visual checks of a published hero at different URLs or viewport settings, ScreenshotNeo can capture a page with one GET request. It can return PNG, JPEG, WebP, or PDF, and its options include device presets, custom viewports, full-page capture, and CSS selectors. Use it to inspect the rendered result; it does not determine the right dimensions for your theme or replace checking the layout itself.
Example cURL request for a page screenshot (see the ScreenshotNeo API documentation):
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Cookie and consent banners are accepted before capture, and more than 60 known consent platforms, newsletter popups, and chat widgets can be removed; each of those steps can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses identify the page verdict and billing status in headers.
- An MCP server offers
take_screenshot,get_page_info, andcapture_pdffor AI agents and MCP clients. - The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up free for 1,000 screenshots a month, with no card required.
Conclusion
Choose a WordPress hero image for the theme or block that displays it, not from a universal pixel-size rule. Match the actual container, plan for the crop at desktop and mobile widths, and use WordPress’s responsive image output to avoid assuming every screen needs the full original.
Recommended Free Tools
Frequently Asked Questions
Does WordPress have a built-in “hero” image size?
No. Hero is a layout role, while WordPress’s built-in size names describe image variants. Themes may register additional sizes.
Is 1500 × 706 pixels a recommended hero size?
No. WordPress uses those dimensions as an example when explaining responsive images, not as a hero-image recommendation.
Should I upload an image wider than 2560 pixels for a hero?
The documented 2560-pixel value is the default big-image scaling threshold in the media-processing guide, not a hero display recommendation. Choose dimensions from the theme and layout.
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.
Free tools Windows power users keep installed
One-click scans. No signup required.
