There is no single “correct” homepage-image size. Choose dimensions from the image’s rendered container, its crop, and the mobile layout. For a typical desktop hero, 1280 × 720 pixels (16:9) is a sensible starting point, not a requirement. If the mobile design is taller or crops differently, prepare a separate mobile composition and deliver an image close to the width the browser actually displays.
The short answer: size the file for the layout
Start by finding the hero or banner’s CSS dimensions at each breakpoint. If the desktop container is about 1,280 CSS pixels wide and uses a 16:9 ratio, a 1,280 × 720 source is a reasonable baseline. A larger source can preserve detail on high-density screens, but sending a very large file to a small rendered area wastes bandwidth. Conversely, a source narrower than the displayed container may look soft.
Do not confuse three different measurements:
- Rendered size: the width and height of the element in the page layout.
- Pixel dimensions: the intrinsic width and height of the image file.
- File size: the number of bytes transferred. Two files with identical dimensions can have very different download sizes.
The right choice balances all three. Shopify’s 2026 image guidance presents 1280 × 720 as a practical desktop-hero example and 2560 × 1400 for a wide background, while warning that these are suggestions that may need adjustment for a responsive theme.
Useful starting dimensions by homepage use case
| Use case | Example dimensions | Ratio | How to use the example |
|---|---|---|---|
| Desktop hero | 1280 × 720 px | 16:9 | Good starting point when the desktop hero is wide and conventional. Match the actual container before exporting. |
| Mobile hero | 800 × 1200 px | 2:3 | Shopify’s hero guidance example for a taller mobile composition. Use only when the mobile layout benefits from a dedicated crop. |
| Large full-width background | 2560 × 1400 px | About 1.83:1 | Use only when the design genuinely renders a very large background; it is excessive for a smaller hero. |
| Element or card image | Determine from the component | Component-specific | Export near the largest width at which the card is displayed, then provide responsive variants. |
These figures are examples, not cross-platform specifications. A theme, CMS, or page builder may impose its own upload limit, automatic resizing, focal-point controls, or aspect-ratio setting. Check those settings before finalizing an export.
Measure the container before exporting
Find the desktop width
- Open the homepage in a desktop browser.
- Inspect the hero element in developer tools and note its rendered width and height.
- Check the widest breakpoint at which that layout appears, rather than measuring only the current window.
- Export a source at least as wide as the largest important rendered version, while avoiding an unnecessarily huge master file.
If a hero is 1,200 CSS pixels wide but the design can expand to 1,440 pixels, provide a source that covers the larger state or add a larger srcset candidate. If the element is capped at 900 pixels, a 2,560-pixel image is usually serving pixels the visitor cannot see.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Record the crop and focal point
Many heroes use object-fit: cover or a CSS background with background-size: cover. Those rules fill the container by cropping one axis. Write down where the subject, logo, and any text-safe area sit. A mathematically correct ratio can still cut off a face or product when the container becomes taller or narrower.
Account for pixel density
A high-density display can request a larger candidate for the same CSS width. Responsive candidates let the browser choose that larger file only when it is useful. Do not simply upload a two- or three-times desktop image to every visitor; pair multiple widths with accurate sizes information.
Design a separate mobile composition when the crop changes
A wide desktop photograph often places its subject near the center or leaves space for a headline on one side. A narrow phone viewport may crop that area away. When the message or subject must move, use art direction rather than relying on one image and hiding another with CSS.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteShopify’s developer guidance recommends a <picture> element for separate desktop and mobile hero crops. The mobile file can be taller, repositioned, or composed with a different safe area. Keep overlaid text in HTML where possible so it remains selectable, translatable, and accessible.
When one source is enough
Use one source with responsive resizing when the composition survives every breakpoint and only the display width changes. This is simpler and avoids maintaining multiple creative assets.
When two crops are justified
- The mobile container has a materially different aspect ratio.
- The desktop subject sits outside the mobile focal area.
- A desktop overlay leaves negative space that does not exist on phones.
- The mobile design intentionally uses a portrait image.
Responsive HTML that reserves space and selects an appropriate file
Give the browser intrinsic dimensions so it can reserve the image’s aspect-ratio box before the file arrives. The values below illustrate a 16:9 desktop hero and a 2:3 mobile crop; replace the paths and breakpoints with your design’s assets.
<picture>
<source
media="(max-width: 767px)"
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-640.webp 640w,
/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="Description of the homepage hero subject"
loading="eager"
fetchpriority="high">
</picture>The fallback image’s width and height describe its intrinsic ratio. If the mobile source has a different ratio, style the picture or its wrapper so the mobile layout reserves the correct space as well. The srcset widths are candidates, not a promise that every browser will download a particular file; the browser combines them with sizes, viewport width, and pixel density.
Rank #2
CSS for a cropped hero
.hero {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 40%;
}
@media (max-width: 767px) {
.hero {
aspect-ratio: 2 / 3;
}
}Use object-position to keep the focal point visible, then check the result at real breakpoints. If the subject cannot remain visible without an extreme position value, create a dedicated crop instead.
Deliver only the pixels the page needs
Responsive delivery is more important than choosing a fashionable “retina” number. Shopify recommends srcset and sizes so the browser can select a source suited to the viewport and rendered width. Generate a small, medium, and large candidate around the widths your layout actually uses; include a larger candidate only if the container can reach that size or high-density screens benefit from it.
Optimize the exported file with the formats and compression settings your stack supports. Inspect the result on a slow connection and on a high-density display: a file can be visually acceptable on a fast desktop yet delay the first view on a phone. Keep the original master separately from the web-delivery variants so you can recrop without repeatedly recompressing the source.
Do not lazy-load the prominent hero
An above-the-fold hero is normally part of the page’s largest contentful paint. web.dev advises against lazy-loading that image; use eager loading and, where appropriate, a high fetch priority. Images below the initial viewport can use lazy loading when it does not interfere with the user’s first view.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteCheck the result at every responsive state
- Test the exact breakpoints used by the CSS, plus a few widths between them.
- Verify that the image box keeps its intended ratio while the file loads; no content should jump when the image appears.
- Inspect the crop with browser zoom and on a high-density phone.
- Confirm the headline and call to action remain readable against the image or overlay.
- Throttle the network and check that the hero appears promptly without downloading an unnecessarily large candidate.
- Test keyboard focus, contrast, and the alternative text. If the image is purely decorative and the same information is present in nearby text, an empty alt value may be appropriate; otherwise describe its purpose, not every visual detail.
Platform-specific cautions
Shopify
Shopify’s general guide and hero guidance publish example dimensions, but they do not establish a universal requirement for every theme. A theme may use a different hero height, a different mobile crop, or automatic transformations. Inspect the theme’s section settings and rendered markup before preparing a final asset.
Squarespace and other hosted builders
Squarespace frames hero advice around aspect ratio, and other builders similarly vary by template. Look for controls named image ratio, focal point, banner height, or mobile image. If the editor crops automatically, upload a composition with sufficient safe space and verify the published page rather than trusting the editor preview alone.
Troubleshooting common homepage-image problems
The image is blurry on desktop
Cause: the chosen source is narrower than the rendered container, or the browser selected a small srcset candidate because sizes is inaccurate.
Fix: inspect the element’s rendered width, add a candidate that covers it, and correct sizes. Do not solve a 900-pixel container by shipping a 4,000-pixel file to everyone.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The mobile crop cuts off the subject
Cause: a desktop ratio is being forced into a taller mobile box with cover.
Fix: use a mobile-specific <source>, reposition the focal point, or change the mobile container ratio.
The page jumps when the hero loads
Cause: intrinsic dimensions or a stable aspect-ratio box are missing.
Fix: provide accurate width and height attributes and ensure CSS does not collapse the wrapper before the image arrives.
Free tools Windows power users keep installed
One-click scans. No signup required.
The hero loads slowly despite a small viewport
Cause: the page sends a large original instead of a responsive candidate, or the hero is being delayed by lazy loading.
Fix: add responsive variants and sizes, keep the above-the-fold image eager, and review its request in the browser’s network panel.
Text becomes unreadable over the image
Cause: the crop moves the subject or a bright region behind the text at another breakpoint.
Rank #4
Fix: reserve a text-safe area in each crop, add an appropriate overlay, or place the text outside the image on mobile.
Recommended Free Tools
Or skip the browser setup
If you need to check how the homepage image actually renders at a URL, ScreenshotNeo can return a clean screenshot through one request. It accepts the consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result. Its MCP server also lets AI agents use take_screenshot, get_page_info, and capture_pdf.
See the ScreenshotNeo API documentation for all options, including viewport and device presets, full-page or selector captures, custom CSS and JavaScript, waiting rules, cookies and headers, geolocation, dark mode, caching, and bulk jobs.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo includes 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account to inspect your homepage crops without setting up a browser.
FAQ
Is 1920 × 1080 the best homepage-image size?
No. It is a common 16:9 source, but the best dimensions depend on the rendered container and the mobile crop. A 1280 × 720 desktop hero may be more appropriate when the layout never displays wider than that.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Should I put the headline inside the image?
Usually keep important text in HTML. It can reflow, remain accessible, and avoid becoming unreadable when the image is cropped. Bake text into the bitmap only when it is genuinely part of the artwork and you can provide an equivalent accessible label.
Can one image serve desktop and mobile?
Yes, when the composition survives the ratio change. If the focal point or safe area changes, use art direction with <picture> instead of downloading two images and hiding one with CSS.
Quick Recap
How do I choose a background image size?
Measure the largest background area your design actually renders. Shopify’s 2560 × 1400 example is intended for a genuinely large background, not every homepage banner. Use responsive candidates when the background scales across substantially different screens.
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.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →
