Website Slider Banner Sizes for 2026

Short answer: there is no universal website slider size. For a simple landscape banner, Shopify’s 2026 guidance suggests 1200 × 400 pixels for desktop and 360 × 120 pixels for mobile, both 3:1. For a taller hero composition, Shopify separately suggests 1600 × 500 pixels on desktop and 800 × 1200 pixels on mobile. Treat these as starting points. The correct export is determined by your slider section’s dimensions, crop mode, breakpoints and content.

Start by measuring the rendered image area in your theme or page builder. If the source aspect ratio differs from that area, the browser must crop, letterbox or distort it. Preserve the subject’s position, keep text and calls to action inside the safe area, and use a separate mobile crop when the desktop composition cannot survive a narrow viewport.

Use case	Desktop starting point	Mobile starting point	When to use it
Standard website slider/banner	1200 × 400 px	360 × 120 px	Wide, shallow carousel sections with a 3:1 shape.
Hero-style slider	1600 × 500 px	800 × 1200 px	Large visual areas where mobile needs a portrait composition.
Large background or full-width banner	1920–2560 px wide	Measure the mobile section separately	High-resolution backgrounds viewed across wide screens.
Hero or main-content image	1200–1280 px wide	Use the layout’s mobile width	Contained layouts rather than edge-to-edge backgrounds.

These ranges come from Shopify’s 2026 website image-size guidance and its 2026 hero-image guidance. They are not a cross-platform standard. A WordPress theme, Shopify theme, Webflow component or custom CSS carousel may use a different height and crop.

Choose the size from the slider section

Open the page at the widest desktop width you support.
Inspect the slider container, not the original image. Record its rendered width and height.
Repeat at your mobile breakpoint. Note whether the section becomes shorter, taller or portrait.
Calculate the aspect ratio: width / height.
Export an image with the same ratio, or deliberately choose object-fit: cover and define a focal point.

For example, a 1440 × 480 section is also 3:1, so a 1200 × 400 source scales cleanly. A 1440 × 650 section is about 2.22:1; a 3:1 source will lose content at the top and bottom when it is covered. Do not enlarge a small source until it becomes soft on large displays. Export a sufficiently wide candidate and let responsive image selection avoid downloading it where it is unnecessary.

Keep the subject and CTA inside the safe area

Sliders commonly crop from the sides on desktop and from the top and bottom on mobile. Keep faces, products, logos and overlaid text away from the edges. Leave extra space where navigation arrows, dots or a sticky header may overlap.

Put the primary subject near the section’s focal point.
Use a plain or low-detail area behind overlaid text.
Do not bake important text into the bitmap when HTML text can remain accessible and responsive.
Check every slide independently; one composition can work while another is cropped badly.

Most themes expose a focal-point control. Use it to keep the important part in frame rather than moving the image with arbitrary negative margins.

Use separate desktop and mobile crops when needed

A single landscape image is acceptable when the subject remains visible at every breakpoint. Create a second crop when mobile needs a different composition, such as a product centered above a portrait background or a person moved away from a mobile CTA. Shopify’s hero guidance explicitly illustrates this landscape-desktop and portrait-mobile pattern.

Use the <picture> element for art direction. Shopify’s developer documentation recommends this approach when desktop and mobile need separate images: Use the picture element for art-directed heroes.

<picture>
  <source media="(max-width: 767px)" srcset="/images/slide-1-mobile.webp">
  <source media="(min-width: 768px)" srcset="/images/slide-1-desktop.webp">
  <img src="/images/slide-1-desktop.webp"
       alt="New spring collection"
       width="1600" height="500"
       loading="eager" fetchpriority="high">
</picture>

This lets the browser choose one source. Hiding two separate <img> elements with CSS can still make both files download.

Implement a responsive slider without distortion

CSS background or positioned image

.slider {
  aspect-ratio: 3 / 1;
  min-height: 180px;
  overflow: hidden;
  position: relative;
}

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

@media (max-width: 767px) {
  .slider {
    aspect-ratio: 3 / 1;
  }

  .slider img {
    object-position: 60% 50%;
  }
}

object-fit: cover fills the section while preserving proportions, cropping overflow. Use contain when the entire image must remain visible and empty space is acceptable. Never force both width and height without deciding how overflow should behave.

Responsive `srcset` and `sizes`

<img
  src="/images/slide-1200.webp"
  srcset="
    /images/slide-640.webp 640w,
    /images/slide-960.webp 960w,
    /images/slide-1200.webp 1200w,
    /images/slide-1600.webp 1600w"
  sizes="100vw"
  width="1600"
  height="533"
  alt="Seasonal promotion"
  loading="lazy">

srcset lists candidate widths; sizes tells the browser how much layout width the image occupies. Set sizes to the actual layout, not a guess. For a full-width slider, 100vw is usually correct. For a centered 1200px container, use something such as (min-width: 1200px) 1200px, 100vw. See Shopify’s guidance on responsive images with srcset and sizes.

Reserve space to prevent layout shift

Include intrinsic width and height, or set an aspect-ratio on the wrapper. The browser can reserve the slider’s space before the image arrives, avoiding content jumping.

Image formats and compression

WebP: a practical default for photographs and illustrations.
JPEG: a broadly compatible fallback for photographic slides.
PNG: useful for transparency, but often unnecessarily large for full-bleed photos.
AVIF: can be smaller at comparable quality, but keep a fallback where browser support requires it.

Choose quality by visual inspection and the actual section size. There is no honest universal kilobyte target because a flat illustration and a detailed photograph compress differently. Shopify notes that Shopify storefront images are optimized through its CDN; do not assume another platform performs the same processing.

Loading, accessibility and carousel behavior

Load the first visible slide eagerly and give it fetchpriority="high" when it is the page’s main visual.
Lazy-load slides that are not initially visible.
Provide meaningful alt text for informative images. Use empty alt text for decorative backgrounds.
Pause automatic rotation on hover and keyboard focus.
Provide previous/next buttons with accessible names and keyboard operation.
Respect prefers-reduced-motion and avoid rapid transitions.
Ensure text contrast remains readable over every slide.

Why a slider image is cropping

Symptom	Cause	Fix
Edges disappear	Source and section ratios differ while using `cover`.	Match the export ratio, change the focal point, or create a mobile crop.
Image looks stretched	Width and height are forced independently.	Use intrinsic dimensions with `height:auto`, or `object-fit`.
Mobile text is cut off	Text was baked into a desktop composition.	Move text into HTML or provide a mobile artwork with safe space.
Blurry desktop slide	Source is too narrow or the browser receives a low candidate.	Export a wider candidate and verify `srcset`/`sizes`.
Both mobile and desktop files download	Two images are present and one is hidden with CSS.	Use `<picture>` for art direction.
Page jumps while loading	No reserved aspect ratio or intrinsic dimensions.	Set `aspect-ratio` and width/height attributes.
First slide loads slowly	Oversized image, too many scripts, or lazy-loading the hero.	Use a correctly sized WebP/AVIF, preload only the first slide, and defer noncritical slides.

Performance and reliability checklist

Measure the actual rendered section at desktop and mobile widths.
Export candidates close to those rendered widths, plus a larger candidate for high-density screens.
Use srcset and accurate sizes.
Use <picture> when crops differ.
Reserve layout space.
Keep the first slide lightweight and defer the rest.
Test slow mobile connections, keyboard navigation, zoom, dark backgrounds and reduced motion.
Check every slide at intermediate widths, not only at two device presets.

Or skip the browser setup

If you need screenshots of the finished slider for QA, documentation or visual regression, ScreenshotNeo captures a URL with one request. It accepts cookie and consent banners before capture, removes more than 60 known consent platforms plus newsletter popups and chat widgets, and lets each cleanup step be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed; the response identifies the result with X-Page-Verdict and X-Billed headers. It also provides an MCP server for Claude, Cursor and other MCP clients, with take_screenshot, get_page_info and capture_pdf tools.

See the ScreenshotNeo API documentation for all options.

cURL

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

Python

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)

Node.js

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

ScreenshotNeo supports full-page and element captures, dark mode, device presets and custom viewports, retina scale, custom CSS and JavaScript, selector waits and delays, network-idle waits, request blocking, headers, cookies, user agents, timezone and geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous jobs, signed webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification. Its parameter names are compatible with those used by other screenshot APIs, which can simplify migration.

The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account.

FAQ

Is 1200 × 400 mandatory?

No. It is a useful 3:1 starting point for a standard banner. Your section’s measured dimensions and crop rules decide the final size.

Should desktop and mobile use the same file?

Use one file when the composition survives both ratios. Use separate crops with <picture> when mobile needs different framing.

What size should a full-screen slider be?

Measure the viewport-based section and export a sufficiently wide candidate, commonly in the 1920–2560px range for large backgrounds. Keep the ratio intentional.

Does a larger image always look better?

No. Extra pixels increase transfer cost without improving a section that renders smaller. Supply candidates matched to real layout widths.

How do I verify a slider crop automatically?

Capture the page at representative viewport sizes, compare the focal subject and CTA position, and inspect the response verdict and billing headers when using ScreenshotNeo.