How to Choose the Right Website Cover Image Size

There is no single correct website cover image size. Choose dimensions based on where the image appears: an on-page hero, a narrow banner, a blog lead image, or a social-sharing preview. For a full-width desktop hero, start with 1920 × 1080 px (16:9); 1280 × 720 px is a practical general hero size. For an Open Graph image, use 1200 × 630 px (1.91:1) as a starting point.

These are starting points, not universal requirements. Your theme, component, CMS, breakpoint rules, and social platform can change the correct answer. Match the image to the slot, protect the focal subject from responsive crops, and optimize file weight as well as pixel dimensions.

First identify what “cover image” means

The phrase usually refers to one of four different placements:

Placement	Useful starting size	Aspect ratio	What controls the final result
Full-width desktop hero	1920 × 1080 px	16:9	Your hero component and responsive crop
General website hero	1280 × 720 px	16:9	Theme, viewport and content overlay
Desktop banner	1200 × 400 px	3:1	Banner slot and ad or theme requirements
Blog or article lead image	1200 × 800 px	3:2	Card, article and archive templates
Open Graph link preview	1200 × 630 px	1.91:1	Social crawler and preview renderer

A page hero and an Open Graph image serve different renderers. In many sites, maintaining two crops gives better results than forcing one bitmap into both slots.

Recommended dimensions by use case

Full-width desktop hero

The U.S. National Science Foundation’s implementation guidance uses 1920 × 1080 px at 16:9 for a full-width hero. It also identifies 1366 × 768 px as an alternative with less detail. These values describe that component; they are not a requirement for every website.

Use 1920 × 1080 px when the image spans a large desktop viewport, the source contains fine detail, or high-density displays matter. Use a smaller source when the rendered slot is smaller and bandwidth is more important.

General website hero

Shopify’s guide gives 1280 × 720 px (16:9) as a desktop hero example and describes a broader hero range of 1280–2500 px wide and 720–900 px high. Treat that range as guidance for a hero component, not as a universal exact dimension.

For a desktop banner, Shopify gives 1200 × 400 px (3:1). A banner is much shorter than a hero, so a 16:9 image may force excessive cropping or make the section too tall. Check the actual banner slot before exporting.

Blog or article lead image

Shopify suggests 1200 × 800 px (3:2) for a blog image. The NSF uses a different 1200 × 468 px (2.56:1) top image for its news and blog component. This difference shows why the component specification wins over a generic blog recommendation.

Wix recommends 1200 × 630 px at 1.91:1 for an Open Graph image, with 600 × 315 px as a practical minimum and an 8 MB limit. The Open Graph protocol defines og:image as the image URL representing the webpage in a social graph and supports optional width, height, MIME type and alternative text properties. See the Open Graph protocol.

How to choose the right size step by step

Name the placement. Decide whether the file is for a hero, banner, article image or link preview.
Read the component specification. Check your CMS, theme or design system for the slot’s aspect ratio, minimum width, maximum file size and crop behavior.
Choose the aspect ratio before the pixel dimensions. A correctly shaped 1280 × 720 image can work better than a larger image that must be aggressively cropped.
Export a sufficiently large source. Start with 1920 × 1080 for a broad full-width hero or 1200 × 630 for Open Graph. Do not upscale a small source.
Protect the focal point. Keep faces, products and essential visual details away from edges. Responsive crops may remove the sides or top and bottom.
Keep text in HTML. Do not bake meaningful headlines into the bitmap. Image text can be inaccessible, cropped or obscured; place the heading in the page’s text layer.
Compress and preview. Export WebP when your delivery stack supports it, compare quality at the rendered size, and check desktop and mobile screenshots.
Create separate social metadata when needed. A 1.91:1 Open Graph crop may need a different focal point from a 16:9 hero.

Responsive cropping and safe composition

A CSS object-fit: cover or background with background-size: cover fills the slot by cropping the source. The crop changes as the viewport changes. NSF guidance warns that a hero can obscure or remove parts of an image at different window sizes.

Place the subject near the visual center or in the area your layout leaves visible.
Leave breathing room around the subject so a narrow mobile crop does not cut it off.
Use a focal-point option in your CMS if one exists.
Test at the smallest supported mobile width, a tablet width and a large desktop width.
If every detail must remain visible, use a contain-style treatment or a separate mobile asset instead of a cover crop.

Example responsive HTML and CSS

<picture>
  <source media="(max-width: 700px)" srcset="/images/hero-mobile.webp">
  <img
    src="/images/hero-desktop.webp"
    width="1920"
    height="1080"
    alt="People collaborating around a table"
    loading="eager"
    fetchpriority="high"
  >
</picture>

.hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 45%;
}

Use the width and height attributes to reserve layout space. Adjust object-position after checking the real crop, not only the source file.

Open Graph implementation

Set the four basic Open Graph properties on the page: og:title, og:type, og:image and og:url. Add dimensions, MIME type and alternative text when your metadata system supports them.

<meta property="og:title" content="How to Choose the Right Website Cover Image Size">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guide/cover-image-size">
<meta property="og:image" content="https://example.com/images/cover-1200x630.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/webp">
<meta property="og:image:alt" content="Responsive website cover image shown on desktop and mobile">

After changing the image, refresh the relevant platform’s debugger or preview tool so a cached preview does not hide the update.

File format, quality and performance

WebP: A practical compressed format for browsers when your delivery pipeline supports it.
JPEG: Suitable for photographic images and widely supported.
PNG: Useful when lossless detail or transparency is required, but often heavier for photographs.
AVIF: Consider it only when your browser support and image pipeline are ready for it.

Pixel dimensions and file weight solve different problems. A 1920 × 1080 file can still be too heavy, while an aggressively compressed small file can look soft. Shopify notes that oversized files can affect speed, recommends choosing dimensions for the use case, and identifies around 500 KB as preferable in many cases rather than a universal hard limit.

Serve a correctly sized variant instead of the original camera file.
Use srcset and sizes for responsive raster images.
Lazy-load below-the-fold images; keep the primary hero eager when it is the largest above-the-fold image.
Reserve layout space to prevent cumulative movement.
Inspect the delivered response in browser developer tools, not only the source image’s dimensions.

Capture and compare real crops

A local browser preview can miss differences caused by cookie banners, delayed images, responsive breakpoints or social metadata caching. Capture the actual page at representative viewports and compare the focal point, text clearance and rendered sharpness.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP or PDF, so you can generate repeatable desktop and mobile previews while checking cover-image crops. Its cleanup steps accept cookie and consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo API documentation for all options, including viewport and device presets, full-page or CSS-selector capture, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, timezone, geolocation, caching, signed links, async jobs, bulk capture and PDF settings.

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

import requests

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

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/cover-page'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
require('node:fs').writeFileSync('cover-preview.webp', image);

For a crop review, request a device preset or viewport, add a wait for the hero selector or network idle, and use full-page capture when the image appears below the fold. The API also supports custom CSS, JavaScript, selector capture, image resizing and a cache TTL you choose.

An MCP server lets Claude, Cursor and other MCP clients call take_screenshot, get_page_info and capture_pdf. There are 1,000 free screenshots each month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Troubleshooting

Problem	Likely cause	Fix
The subject is cut off on mobile	The desktop crop is being reused at a narrow aspect ratio	Move the focal point, provide a mobile source with `<picture>`, or use a contain-style treatment.
The hero looks blurry	The source is too small or over-compressed	Start from a larger source, deliver a suitable responsive variant and reduce compression.
The hero pushes content down while loading	No intrinsic dimensions or aspect ratio	Set `width`, `height` or `aspect-ratio`.
Social preview shows the old image	The crawler cached prior metadata	Confirm the absolute `og:image` URL and refresh the platform debugger.
Social preview is cropped unexpectedly	The image does not use the platform’s preferred ratio	Export a 1200 × 630 px crop and keep important content away from edges.
Text in the image is unreadable	Text is being scaled or cropped	Move meaningful text into HTML and use the bitmap for visual support.
Screenshot capture includes a popup	The page’s overlay appears before capture	Use ScreenshotNeo’s consent and popup cleanup, hide selectors, or add a wait and click action.
Screenshot capture is blank or times out	The page failed to load, blocked automation or needs more time	Check the target URL, wait for a selector or network idle, review response verdict headers and retry with appropriate request settings.

Production checklist

Is the placement clearly identified?
Does the source match the component’s aspect ratio?
Does the focal subject survive the smallest supported viewport?
Is meaningful text available as accessible HTML?
Are width, height or aspect-ratio values reserved?
Is the delivered file format and weight appropriate?
Does the Open Graph image use 1200 × 630 px when that platform recommendation applies?
Have you refreshed social previews after metadata changes?
Have you compared real desktop, tablet and mobile captures?

FAQ

Is 1920 × 1080 always the best website cover size?

No. It is a defensible starting point for a broad full-width 16:9 hero. The component’s actual slot and crop behavior decide the final size.

You can, but the aspect ratios differ. A separate 16:9 hero and 1.91:1 Open Graph crop usually gives better control.

What is the minimum Open Graph image size?

Wix identifies 600 × 315 px as a practical minimum recommendation, while 1200 × 630 px is its recommended size. Check the destination platform’s current guidance.

Should the headline be part of the image?

Keep meaningful headline text in the page markup. It remains accessible and avoids crop problems.

Does a larger image improve quality?

Only until the delivered image exceeds the rendered need. Larger files increase transfer cost and may slow the page, so pair adequate pixels with compression and responsive delivery.