Website Image Size Guidelines for 2026

Short answer: there is no single best website image size. Choose pixel dimensions from the image’s role and rendered slot, then deliver responsive candidates at the right aspect ratio and compress the bytes visitors download. Shopify’s 2026 guide suggests 1,280 × 720 px for a hero, 1,200 × 800 px for a blog image and 300 × 300 px for a thumbnail; these are examples, not universal limits.

Quick reference: starting dimensions

Role	Desktop	Mobile	Ratio
Background	2560 × 1400	360 × 640 (separate crop)	Verify
Hero	1280 × 720	360 × 200	16:9
Banner	1200 × 400	360 × 120	3:1
Blog image	1200 × 800	360 × 240	3:2
Rectangular logo	400 × 100	160 × 40	4:1
Square logo	100 × 100	60 × 60	1:1
Favicon	48 × 48	48 × 48	1:1
Thumbnail	300 × 300	90 × 90	1:1

These Shopify recommendations are starting points. Measure your slot and art-direct mobile backgrounds instead of stretching a desktop 16:9 asset into a portrait box. Shopify also describes 1,920 × 1,080 px for a full-screen desktop lightbox.

Pixels, bytes and resolution are different

Dimensions are the pixel grid.
File size is compressed bytes and depends on format, detail and quality.
Resolution/detail describes visual information and device pixel ratio (DPR).

A 2,400 px source can suit a 1,200 CSS-pixel slot on DPR 2, but it is wasteful for a 300 px card. Resize to the largest slot you serve and create responsive candidates.

Choose dimensions from the rendered slot

Measure each breakpoint’s CSS width and aspect ratio.
Multiply width by the highest DPR you support to set the largest candidate.
Keep intermediate widths so phones do not download desktop files.
Create a different mobile crop when composition changes.
Reserve the ratio with intrinsic dimensions.

Responsive HTML that lets the browser choose

srcset lists candidates and sizes describes rendered width. The browser uses viewport and DPR to choose. Keep a fallback src; Google recommends it for compatibility.

<img
  src='/images/guide-800.jpg'
  srcset='/images/guide-400.jpg 400w,
          /images/guide-600.jpg 600w,
          /images/guide-800.jpg 800w,
          /images/guide-1200.jpg 1200w'
  sizes='(max-width: 700px) 100vw, 800px'
  width='1200' height='800'
  alt='Annotated website image showing responsive crops'
  loading='lazy' decoding='async'>

Four to six candidates are usually enough. Use eager loading only for the main above-the-fold image.

Art-directed mobile crops

<picture>
  <source media='(max-width: 700px)' srcset='/images/hero-mobile-720.webp' type='image/webp'>
  <source srcset='/images/hero-desktop-1440.webp' type='image/webp'>
  <img src='/images/hero-desktop-1440.jpg' width='1440' height='810' alt='Product dashboard on a laptop'>
</picture>

Format and compression choices

Google lists BMP, GIF, JPEG, PNG, WebP, SVG and AVIF for images referenced by img. Match extensions to actual bytes. JPEG or WebP/AVIF suit photos; PNG suits line art, text-heavy graphics and transparency; SVG suits vector logos and icons. Compress until detail remains acceptable at rendered size. Shopify documents automatic format selection and variants on its platform; inspect emitted markup and the downloaded resource.

Upload limits are not performance targets

Shopify product and collection images may be up to 5,000 × 5,000 px (25 MP) and under 20 MB. Its separate theme-image workflow documents 20 MP and 20 MB. A square product image of 2,048 × 2,048 px usually displays best in that storefront context. These are workflow limits, not delivery targets.

Prevent layout shift and support accessibility

Always include intrinsic width and height so the browser reserves space. Use max-width:100%; height:auto. Write useful alt text for informative images and empty alt for decorative ones. Use a normal img; Google does not index CSS background images as image elements.

.content-image { display:block; max-width:100%; height:auto; }

Measure the result

Google’s good Core Web Vitals targets are LCP within 2.5 seconds, INP under 200 milliseconds and CLS below 0.1. They measure the page experience, not images alone.

Record rendered width and downloaded resource in DevTools.
Check the largest image’s format, dimensions, compression and priority.
Test throttled mobile and desktop, then review real-user data.
Fix shifts with dimensions and waste with accurate srcset/sizes.

Common mistakes and fixes

Symptom	Cause	Fix
Blurry retina image	No DPR-sized candidate	Provide a candidate up to slot × target DPR.
Desktop file on mobile	Missing/inaccurate `sizes`	Describe the real slot width.
Bad hero crop	One aspect ratio forced everywhere	Use `picture` or adjust focal position.
Page jumps	No intrinsic dimensions	Add matching `width`/`height`.
Huge file after resizing	Original URL or CDN transform served	Inspect network response and generated markup.
Broken image	Extension and MIME/bytes disagree	Regenerate with matching extension and Content-Type.
Not discoverable in Search	CSS-only or blocked image	Use crawlable `img` with fallback `src`.

Practical workflow checklist

Identify role, slot, crop and focal point.
Export largest required width × DPR.
Create four to six candidates and a mobile crop if needed.
Choose format and compress by visual inspection.
Add srcset, accurate sizes, fallback src, dimensions and alt text.
Measure bytes and Core Web Vitals on representative devices.

Or skip the browser setup

If you need screenshots to inspect image rendering, ScreenshotNeo returns PNG, JPEG, WebP or PDF from one GET request. It accepts consent banners like a visitor and removes 60+ known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and X-Page-Verdict/X-Billed headers identify the result. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.

See the ScreenshotNeo API docs for full-page or element capture, device presets, custom CSS/JavaScript, waits, blocking, headers, cookies, geolocation, resizing, caching, signed links, async jobs, bulk capture and usage data.

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

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

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

1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

FAQ

Start at 1,200 × 400 px desktop and 360 × 120 px mobile, then match your slot and crop.

Should every image be 2× its displayed width?

Only when targeting DPR 2. Supply multiple candidates so other devices download less.

Is 20 MB an acceptable delivery size?

It can be an upload ceiling, but rarely a sensible web payload. Resize, compress and inspect downloaded bytes.

Do dimensions guarantee good Core Web Vitals?

No. They reduce waste and shift risk; page loading, responsiveness and stability depend on the whole page.