Website Home Page Image Sizes: Recommended Dimensions

Short answer: start with 1,280 × 720 px for a conventional desktop hero, 1,200 × 400 px for a shallow website banner, and about 1,920–2,560 px wide for a full-width background. These are starting points, not universal rules. Your rendered container, theme settings, crop behavior, and mobile layout determine the final dimensions.

For mobile, provide a separate crop when the composition changes. A wide desktop hero may need a taller source such as 800 × 1,200 px. Deliver responsive variants with srcset and sizes, reserve layout space with intrinsic dimensions, and optimize encoded bytes as carefully as pixel dimensions.

1. Recommended dimensions by homepage image role

Role	Desktop starting point	Mobile starting point	Typical shape	When to use it
Hero image	1,280 × 720 px	360 × 200 px, or a separate 800 × 1,200 px crop	16:9 desktop; flexible mobile crop	Primary headline, product message, or campaign at the top of the page
Shallow website banner	1,200 × 400 px	About 800 × 500 px when a taller crop is needed	3:1 desktop	Announcement, promotion, or section-wide strip
Full-width background	2,560 × 1,400 px	Use a separate mobile composition when the subject would be cut off	Wide landscape	Edge-to-edge visual behind text or sections
Large homepage feature	1,920–2,560 px wide	Export a smaller portrait or square variant if the layout changes	Theme-dependent	Large editorial, portfolio, or product feature

Shopify lists these values as practical examples, including 1,280 × 720 for a desktop hero, 1,200 × 400 for a desktop banner, and 2,560 × 1,400 for a large background (Shopify, 2026). Its hero guidance also shows 1,600 × 500 for a shallow desktop hero and 800 × 1,200 for a tall mobile hero. The values differ because the roles differ.

2. Measure the rendered container before exporting

The correct source width depends on the CSS width at which the image is displayed and whether high-density screens need extra pixels. Inspect the element in your browser’s developer tools and record:

• the maximum CSS width of the image or background container;
• the aspect ratio and object-fit or background-size rule;
• the smallest and largest viewport widths in your responsive breakpoints;
• whether text, a face, a logo, or a call to action sits inside the crop;
• whether a retina display needs roughly two source pixels per CSS pixel.

If a hero is displayed at 1,120 CSS pixels on desktop, a 1,280 px source is a sensible starting point. If it is full bleed on a 2,000 px monitor, export a wider variant instead of forcing a small image to stretch. Do not export every image at the maximum possible size: the browser may download bytes that never appear on screen.

3. Give mobile its own art direction when necessary

Responsive sizing and responsive composition are different problems. srcset lets the browser select a more suitable width of the same image. <picture> lets you select a different crop or even a different subject arrangement.

Keep the important subject in a central safe area when one image must serve every viewport. Leave breathing room around the headline and button because a mobile crop can remove the outer thirds of a wide desktop image. When the subject cannot remain legible, create separate desktop and mobile artwork.

<picture>
  <source
    media="(max-width: 700px)"
    srcset="/images/home-hero-mobile-400.webp 400w,
            /images/home-hero-mobile-800.webp 800w"
    sizes="100vw">
  <img
    src="/images/home-hero-desktop-1280.webp"
    srcset="/images/home-hero-desktop-800.webp 800w,
            /images/home-hero-desktop-1280.webp 1280w,
            /images/home-hero-desktop-1920.webp 1920w"
    sizes="(max-width: 1200px) 100vw, 1200px"
    width="1280"
    height="720"
    alt="People collaborating around a product dashboard"
    fetchpriority="high"
    decoding="async">
</picture>

The browser chooses from the matching source instead of downloading one oversized desktop file for every device. Shopify Developers explains that without srcset and sizes, the browser has only one image to download regardless of viewport.

4. Use responsive delivery correctly

Understand the width descriptors

In srcset, a value such as 1280w describes the intrinsic width of that file. The sizes attribute tells the browser how wide the image will render in CSS. Together they allow a good candidate to be selected before the image downloads.

<img
  src="/images/hero-1280.webp"
  srcset="/images/hero-480.webp 480w,
          /images/hero-800.webp 800w,
          /images/hero-1280.webp 1280w,
          /images/hero-1920.webp 1920w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 92vw, 1200px"
  width="1280"
  height="720"
  alt="Description of the hero image">

Use CSS backgrounds only when they are decorative

A CSS background is useful when the image is decoration behind content. A meaningful product or editorial image should normally be an <img> so it has alternative text and participates in image loading behavior.

.home-hero {
  aspect-ratio: 16 / 9;
  background: center / cover no-repeat url("/images/hero-1920.webp");
}

@media (max-width: 700px) {
  .home-hero {
    aspect-ratio: 4 / 5;
    background-image: url("/images/hero-mobile-800.webp");
  }
}

5. Reserve layout space and protect the composition

Set intrinsic width and height attributes or an equivalent aspect-ratio rule. The browser can allocate space before the file arrives, reducing layout movement. Shopify Developers identifies missing image dimensions as a common cause of Cumulative Layout Shift (CLS).

.hero-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

• Use object-fit: cover when filling a fixed box matters more than showing every edge.
• Use object-fit: contain for products, screenshots, or logos that must remain fully visible.
• Adjust object-position toward the subject if a crop removes it.
• Do not place essential text inside the bitmap when the same text can be real HTML.
• Check both orientations and intermediate widths, not only a desktop and one phone preset.

6. Optimize bytes as well as pixels

A visually correct image can still be too heavy if it is delivered far larger than its rendered size. Shopify recommends compressed images and identifies WebP as a popular web format. Around 500 KB is a useful compressed-image target in many cases; files above 20 MB can hurt speed. These are practical guidelines, not guarantees.

• Export WebP when browser support and your fallback strategy allow it.
• Use JPEG for photographic fallbacks and PNG when lossless transparency or sharp, limited-color artwork requires it.
• Resize to the largest width actually needed by the layout and density.
• Use a quality setting that preserves text and faces without inflating bytes.
• Lazy-load below-the-fold images. Keep the main hero eligible for early loading.
• Serve images through a cache and set long-lived immutable URLs when filenames change on export.

Image dimensions alone cannot promise a particular load time. Network conditions, encoding, markup, caching, and theme behavior also matter. Shopify’s hero guidance references the 2.5-second Largest Contentful Paint target from Google Core Web Vitals; measure your real page rather than inferring performance from pixels.

7. A repeatable implementation checklist

1. Identify the role: hero, banner, background, or promotional strip.
2. Inspect the rendered container at each breakpoint.
3. Choose a desktop starting size from the table, then create mobile art when the crop changes.
4. Export several widths and write accurate srcset and sizes values.
5. Add intrinsic dimensions or aspect-ratio before testing.
6. Compress and compare WebP or other suitable formats.
7. Check headline, logo, face, and call-to-action safe areas on real desktop and mobile widths.
8. Use browser network tools and Lighthouse or your own field metrics to confirm that the selected candidate is not oversized.

8. Verify the final homepage at multiple widths

Capture screenshots at representative desktop, tablet, and phone viewports to review crop safety and layout shift. Check the rendered image rather than judging only the source file. A screenshot also reveals consent banners, chat bubbles, or other overlays that can obscure the hero.

9. Or skip the browser setup

ScreenshotNeo can capture the rendered page with one request. Before the capture it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether the shot was billed. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf.

See the ScreenshotNeo API documentation for all options, including full-page capture, device presets, custom viewport and retina scale, waiting rules, hidden selectors, custom CSS and JavaScript, and caching.

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

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)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

There are 1,000 screenshots a month free with no card. Paid plans start at $5 for 3,000 shots, and every feature is on every plan. Create a free ScreenshotNeo account.

10. Troubleshooting common image-size problems

Symptom	Likely cause	Fix
Hero looks blurry on a retina screen	The selected source is close to the CSS width but not the device pixel width.	Add a wider candidate and keep sizes accurate.
Mobile cuts off the headline or subject	A desktop crop is being reused in a narrow box.	Use <picture> with a mobile crop, or move the subject into a safe area.
Browser downloads the largest file every time	sizes is missing or says the image is always full viewport width.	Describe the actual CSS width at each breakpoint and inspect the chosen candidate in network tools.
Page jumps while the hero loads	No intrinsic dimensions or reserved aspect ratio.	Add width/height or aspect-ratio.
Hero is hidden behind a popup or chat widget	Overlays are injected after page load.	Hide the selector in your capture workflow, dismiss the overlay before review, or use ScreenshotNeo’s cleanup steps.
Image is sharp but page is slow	Encoded bytes are excessive or the source is much wider than the rendered box.	Resize, compress, serve WebP where appropriate, and lazy-load non-critical images.
Background image does not change on mobile	The mobile media query is missing or overridden by a later rule.	Inspect computed styles and place the mobile rule after the base declaration.

11. Performance, reliability, and cost notes

Performance

Prioritize the hero only when it is the main above-the-fold content. Keep below-the-fold images lazy, use responsive candidates, and avoid shipping a 2,560 px background to a 360 px phone.

Reliability

Test the actual theme or component because CMS settings can change the container ratio and crop. Recheck after adding banners, navigation changes, or new font sizes. Keep focal points away from edges so small layout changes do not remove them.

Capture cost

If you automate visual checks, ScreenshotNeo bills only clean shots. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and headers report the verdict and billing status. Caching with a chosen TTL can avoid repeated captures; bulk capture supports up to 100 URLs per call.

12. FAQ

Is 1920 × 1080 the best homepage image size?

It is a useful 16:9 source, but not a universal rule. A shallow banner may need 1,200 × 400, while a full-width background may need up to 2,560 × 1,400.

Should desktop and mobile use the same image?

Use the same source when the subject survives the crop. Use separate art direction when mobile needs a taller layout or a different focal point.

What is more important: dimensions or file size?

Both matter. Dimensions must match the rendered box and density; compression and format determine how many bytes the browser transfers.

Do width and height change the displayed size?

CSS still controls the displayed size. Intrinsic attributes primarily reserve the correct aspect-ratio space before loading.

How can I check a homepage crop automatically?

Capture the page at the viewports you support and compare the results. ScreenshotNeo can capture full pages, selected elements, device presets, and custom viewports through its API or MCP server.