Product Image Sizes for Websites: Recommended Dimensions

There is no single best image size for every website. Choose dimensions according to the image’s role, the space where it renders, the platform’s upload rules, and the active theme’s cropping behavior. As practical starting points, use 2048 × 2048 px for square Shopify product images, at least 800 × 800 px for WooCommerce product uploads, about 1920 px wide for banners and backgrounds, and 1200–1280 px wide for main content images.

1. Quick recommendations by image type

Use case	Starting dimensions	What to verify
Shopify square product image	2048 × 2048 px	Theme crop, zoom behavior, upload limits
WooCommerce product image	At least 800 × 800 px	Catalog, single-product, thumbnail settings and theme overrides
Website banner or background	About 1920 px wide	Hero height, focal point, mobile crop
Blog or main content image	1200–1280 px wide	Content column width and responsive variants
Transparent graphic or line drawing	Match the rendered width; export PNG when transparency is required	Text sharpness and alpha edges

These are starting points, not universal requirements. Shopify describes 1920 px and 1200–1280 px as general guidance, while its product-media documentation recommends 2048 × 2048 px for square product images. WooCommerce recommends uploads of at least 800 × 800 px. See the Shopify sizing guide, Shopify product-media documentation, and WooCommerce product-image documentation.

2. Dimensions, aspect ratio, and file size mean different things

Pixel dimensions are the width and height, such as 2048 × 2048.
Aspect ratio is the shape, such as 1:1, 4:3, or 16:9. Two files can have the same ratio but different detail.
File weight is the encoded size in bytes or megabytes. A large pixel image can still be efficiently compressed.
Rendered size is the CSS space occupied in a browser. It may differ from the source dimensions because the platform creates responsive variants or the browser downsizes the image.

Do not treat an upload ceiling as a target. Shopify allows product uploads up to 5000 × 5000 px / 25 MP and under 20 MB, but a smaller, correctly cropped source is usually easier to deliver quickly. Confirm how your theme resizes and crops before preparing a batch.

3. Shopify product images

Recommended starting point

For square product images, start at 2048 × 2048 px. Keep related products at a consistent ratio so collection grids do not jump between different crop shapes. Shopify says the theme determines how an image is ultimately displayed, so inspect the live product, collection, zoom, and mobile views.

Shopify limits and formats

Uploads may be up to 5000 × 5000 px / 25 MP and under 20 MB.
Use JPEG for most product photographs and slideshows.
Use PNG for line drawings, text-heavy graphics, and transparency.
Shopify may deliver WebP or AVIF when the visitor’s browser supports those formats.

Those delivery formats can differ from the original upload. Test the rendered page rather than assuming visitors download the source file unchanged. See Shopify’s image-upload documentation.

4. WooCommerce product images

WooCommerce recommends uploading product images at least 800 × 800 px. WordPress and WooCommerce generate sizes for single-product pages, catalogs, and thumbnails. You can adjust widths and cropping in settings, but the active theme can override those controls.

Check all three contexts after changing an image:

Single-product gallery and zoom.
Shop and category grids.
Cart, related products, and mobile breakpoints.

If an image looks blurry, first confirm that the source is large enough for the largest generated display size, then regenerate thumbnails using your site’s normal WordPress workflow. WooCommerce explains common causes in its blurry-image guide.

5. Banners, backgrounds, and editorial images

For a full-width banner or background, about 1920 px wide is a useful starting point. For blog posts and other main-content imagery, start around 1200–1280 px wide. The correct value depends on the maximum content column, device pixel ratio, and whether the design crops the image.

Keep the important subject away from edges when a hero uses background-size: cover. That rule fills the box and crops whichever dimension overflows, so a desktop-safe composition can lose its subject on a narrow phone.

<picture>
  <source
    type="image/avif"
    srcset="hero-768.avif 768w, hero-1280.avif 1280w, hero-1920.avif 1920w"
    sizes="100vw"
  >
  <img
    src="hero-1280.jpg"
    srcset="hero-768.jpg 768w, hero-1280.jpg 1280w, hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="800"
    alt="Blue travel backpack beside a map"
    loading="eager"
    fetchpriority="high"
  >
</picture>

Declare width and height (or an equivalent aspect-ratio rule) to reserve space and reduce layout shift. Use loading="lazy" for below-the-fold images; keep the primary hero eager.

6. Responsive sizing: choose sources for the rendered slot

A responsive site should serve an image close to the rendered slot instead of sending the largest source to every device. Generate a small set of widths that cover your breakpoints, then use srcset and sizes. A 400 px card does not need a 2048 px download on a standard-density phone, while a 1000 px desktop card may need a 2000 px source on a high-density display.

<img
  src="product-800.jpg"
  srcset="product-400.jpg 400w, product-800.jpg 800w, product-1600.jpg 1600w"
  sizes="(max-width: 600px) 50vw, (max-width: 1100px) 33vw, 320px"
  width="1600"
  height="1600"
  alt="Black ceramic mug"
  loading="lazy"
>

After deployment, inspect the browser’s requested resource and the actual CSS box at each breakpoint. Platform-generated variants and browser format negotiation can change what is delivered.

7. Cropping and aspect-ratio decisions

Use one consistent ratio for product grids when uniform cards matter.
Use the source ratio when the full object must remain visible.
Use object-fit: cover only when controlled cropping is acceptable.
Set object-position to preserve a face, logo, or product detail that would otherwise be cut off.

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: 50% 35%;
}

Shopify themes control display behavior, and WooCommerce notes that theme behavior can supersede standard cropping settings. Always review the active theme rather than relying on platform defaults.

8. Format and optimization choices

Format	Good fit	Watch for
JPEG	Photographs and slideshows	Repeated recompression and visible artifacts
PNG	Transparency, line drawings, text-heavy graphics	Large files for photographic scenes
WebP or AVIF	Modern responsive delivery when supported	Verify browser and platform fallback behavior

Resize to the largest real display need, strip unnecessary metadata where your workflow permits, and compare visual quality at the rendered size. Keep originals separately if you may need future crops.

9. A repeatable sizing workflow

Identify the role: product, card, hero, background, article image, or transparent graphic.
Measure the largest CSS slot on desktop and mobile.
Choose an aspect ratio and document the crop focal point.
Export a source with enough pixels for the largest slot and high-density screens.
Generate responsive widths and confirm the platform’s automatic variants.
Choose JPEG, PNG, WebP, or AVIF according to image content and delivery support.
Inspect the live page at every breakpoint, including zoom, grids, and lazy-loaded sections.

10. Capture and inspect real rendered pages

When dimensions depend on a theme crop or responsive breakpoint, a screenshot of the rendered page is useful evidence. You can run a browser yourself with Playwright or Puppeteer, set each viewport, wait for images, and compare the result. Make sure your test page is representative: consent banners, chat widgets, delayed content, and bot checks can change what a capture contains.

11. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF, with options for full-page capture, element capture by CSS selector, device presets, any viewport, retina scale, waits, custom CSS and JavaScript, and image resizing. Its clean-shot flow accepts consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture.

See the ScreenshotNeo API documentation for all options. This request captures a representative page you can inspect at a chosen viewport:

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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', buffer));

Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and whether the capture was billed. An MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

12. Troubleshooting

The image looks blurry

Cause: the source or generated variant is smaller than the rendered slot, or it was repeatedly recompressed. Fix: measure the largest CSS slot, upload a sufficiently large source, regenerate platform thumbnails, and inspect the requested network resource.

The product appears cropped

Cause: a theme or CSS rule uses a fixed aspect ratio with cover cropping. Fix: change the source ratio, adjust object-position, or use contain when the full object must remain visible.

Images look inconsistent in a grid

Cause: mixed source ratios or theme-specific crop rules. Fix: standardize the ratio and focal point, then review collection and mobile templates.

The file is too large

Cause: excessive pixel dimensions, unsuitable format, or weak compression. Fix: resize to the largest real slot, use JPEG for photos or PNG for transparency, and enable responsive modern formats where supported.

Cause: cover cropping at a narrow aspect ratio. Fix: create a mobile-specific crop or adjust the focal point with object-position.

Cause: the page state was captured before the banner was handled. Fix: dismiss it in your browser automation, hide the selector, or use ScreenshotNeo’s consent and popup removal options.

A screenshot request returns a blank or blocked page

Cause: a bot check, timeout, failed load, or page-specific access requirement. Fix: inspect the response verdict headers, add an appropriate wait, provide required headers or cookies, and avoid treating an unsuccessful page as a valid visual test.

13. Performance, reliability, and cost notes

Responsive variants reduce transfer size while preserving detail at the rendered slot.
Reserve image space to reduce layout shift and prioritize only the above-the-fold hero.
Cache stable assets and invalidate them when the source changes.
For automated screenshots, wait for a selector, a delay, or network idle when content is asynchronous.
Batch visual checks during releases and capture only the breakpoints or elements that answer your question.
ScreenshotNeo bills only clean shots; failed loads, bot checks, blank pages, timeouts, and cache hits are not billed.

14. FAQ

Is 2048 × 2048 px the best size for every product image?

No. It is Shopify’s square starting recommendation. The correct source depends on the rendered slot, ratio, zoom, and theme.

Can I upload a 5000 × 5000 px image to Shopify?

Shopify documents that maximum pixel dimension and a 25 MP / under-20 MB limit, but the maximum is not a performance target.

Should all website images use the same dimensions?

No. Match dimensions and aspect ratio to each role, then keep related products or cards consistent where the design requires it.

Does the original file format determine what visitors receive?

Not always. Platforms can generate variants and may deliver WebP or AVIF to compatible browsers.

What should I verify before a bulk image upload?

Confirm theme crop behavior, largest rendered slots, platform limits, generated variants, and mobile layouts with a representative sample.