Shopify product image sizes in 2026: why collection photos look blurry

Blurry Shopify collection images usually need one of two fixes: a sharper source photograph, or a theme that requests enough pixels for the image's actual display size. Uploading a 2048 × 2048 file will not solve a collection grid that still delivers a small thumbnail and stretches it across a larger space.

Is the original blurred, or only the collection page?

Start with one affected product rather than re-exporting the whole catalog. Open the original image outside the storefront and inspect a meaningful detail such as stitching, label text or a printed edge. If that detail is already smeared, out of focus or heavily compressed, investigate the source photograph first.

Next compare the same product on its product page and collection card. Shopify creates different image sizes for different theme areas, as its product media documentation explains. A sharp product-page view and soft collection view can therefore come from the same upload.

Be clear about which image you are diagnosing. A collection's banner image is different from each product's featured image inside the collection grid. Editing the banner settings will not fix a product-card snippet that requests a small derivative.

Also wait for loading to settle. Some themes display a low-detail placeholder during loading. If the image becomes sharp, the problem differs from an image that remains soft after the final request completes. Do not assume every blurred preview is permanent or that every theme implements placeholders the same way.

What do pixels, megapixels and file size mean here?

These measurements describe different properties. None, by itself, proves that a photograph contains useful detail.

The current dedicated product-media page says product and collection images can be up to 5000 × 5000 pixels, or 25 megapixels, and must be smaller than 20MB. It says 2048 × 2048 usually displays best for square product images. Those are upload specifications and general guidance, not a universal cure for a particular theme.

Shopify's more general theme image help has a separate 20-megapixel upload section and notes that product-image limits differ. Use the product-media specification for this product-image discussion, and check the route's current error message if an upload fails.

Our ecommerce image size guide can help you plan exports. Keep a good original and create delivery copies; do not repeatedly shrink the only master file.

How many pixels does a collection card need?

Estimate a useful resource width from the image's CSS width multiplied by the target device pixel ratio. This is a planning calculation, not a guarantee of the browser's exact selection: available candidates, browser behavior and other conditions also matter.

Consider a hypothetical card displayed at 480 CSS pixels on a 2× display. Its nominal requirement is 480 × 2 = 960 image pixels across. If the browser receives a 320-pixel-wide derivative, that is short of the target even when the uploaded original is 2048 pixels wide.

The fix is to make an appropriate candidate available and describe the layout accurately. Uploading another 2048-pixel copy does nothing if the theme keeps selecting the same 320-pixel file.

The reverse problem also matters. Sending a very large original to a small card can transfer unnecessary data. Shopify's responsive image guidance recommends using responsive candidates and layout information so the browser can request an appropriate size.

Crop requirements change the calculation too. A narrow crop of a large photograph can leave much less detail available for the product. Inspect the crop you actually intend to use rather than relying on the original's total dimensions.

How can you check which image the browser received?

In your browser's developer tools, inspect the affected image and find its currentSrc, srcset and sizes. The selected resource is not always the URL written in the basic src attribute. In the Network panel, locate that selected request and inspect the returned image's pixel dimensions.

Measure the image's rendered CSS width using the layout inspector. Compare that with the received file's width and the device pixel ratio. Do not infer the file's encoded dimensions from CSS width or its byte count.

Then repeat at representative mobile and desktop widths. A theme can request enough detail in a desktop grid but underestimate a nearly full-width mobile card. A sidebar, page-width setting or changed column count can also make the card wider than the image markup assumes.

For a useful bug report, record the page URL, viewport, affected product, selected image URL, received dimensions and displayed width. That gives the theme author a reproducible problem instead of the general report that Shopify compressed everything.

How do image_url, widths and sizes work together?

Shopify's image_url filter requests a transformed image URL. It requires a width or height, supports requested dimensions up to 5760 pixels, and cannot make an image larger than its original dimensions.

The image_tag filter produces the image element. Its widths argument provides responsive source candidates; sizes describes the expected display slot. These are different controls. A larger URL limit is not enough if the candidate list stops too early, and a generous candidate list can still be misused by an inaccurate slot description.

A sizes value also does not set the layout. CSS does that. If the markup says the image occupies a narrow fraction of the viewport while the actual card fills most of the screen, the browser can select too little detail. Conversely, describing every card as full viewport width can cause unnecessarily large downloads.

MDN's responsive image explanation describes these attributes and how pixel density participates in selection. Check the real container and grid geometry rather than copying another store's breakpoint string.

What does a correctly scoped Liquid example look like?

First duplicate the theme, then work in its preview. Existing themes may have image snippets, focal-point handling and performance logic that should be retained. The example below illustrates one defined layout; it is not a replacement instruction for an arbitrary production theme.

Assume a grid fills the viewport up to a 1008-pixel outer width, has 24-pixel padding on each side, and uses a 24-pixel gap. It has one column below 750 pixels and two columns above that breakpoint. There is no narrower parent wrapper.

.example-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 1008px;
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 750px) {
  .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.example-product-image { display: block; width: 100%; height: auto; }

At the maximum grid width, each image slot is (1008 − 48 − 24) ÷ 2 = 468 CSS pixels. Below the maximum, subtract the same padding and gap from the viewport before dividing by two. Below the column breakpoint, subtract only the side padding.

Inside a product loop where product is defined, this Liquid pattern caps requests at the original width or 1440 pixels, whichever is smaller. It builds candidates that do not exceed that cap:

{%- assign card_image = product.featured_image -%}
{%- if card_image != blank -%}
  {%- assign image_limit = card_image.width | at_most: 1440 -%}
  {%- assign candidates = '240,360,480,720,960' | split: ',' -%}
  {%- capture card_widths -%}
    {%- for candidate in candidates -%}
      {%- assign candidate_width = candidate | plus: 0 -%}
      {%- if candidate_width < image_limit -%}
        {{- candidate_width -}},
      {%- endif -%}
    {%- endfor -%}
    {{- image_limit -}}
  {%- endcapture -%}
  {{ card_image
    | image_url: width: image_limit
    | image_tag:
      widths: card_widths,
      sizes: '(min-width: 1008px) 468px, (min-width: 750px) calc((100vw - 72px) / 2), calc(100vw - 48px)',
      class: 'example-product-image'
  }}
{%- endif -%}

The 1440-pixel ceiling is an example budget, not Shopify's recommended size for every placement. A smaller original remains smaller; the code does not restore lost detail. Keep the theme's appropriate loading and prioritization behavior rather than making every collection image lazy or high priority.

If your grid has a sidebar, different gaps, three desktop columns or an additional padded wrapper, recalculate sizes. Check the output HTML and selected requests in preview before publishing.

Could the problem be cropping or compression instead?

Yes. If the downloaded derivative contains enough pixels but still looks poor, compare it directly with the original at a similar scale. Look for compression artifacts, aggressive sharpening, an unexpectedly tight crop or a source that was already downloaded from a small thumbnail.

Shopify's theme image help explains that delivery can involve compression and automatic format selection. A WebP or AVIF response is not by itself evidence of damage. Judge the actual detail and delivery dimensions rather than the extension alone.

Different aspect ratios can also make a collection appear inconsistent. The product-media help recommends consistent ratios for featured images shown side by side; themes may request consistent crops. Decide whether the design should crop to fill a frame or show the complete product, then check that sleeves, labels and handles survive.

The product photo style guide can help standardize framing without hiding product features. A uniform grid should not depend on cutting important details out of every image.

When will background removal or AI help?

Background cleanup can improve separation around the product, but it cannot fix a theme's undersized request. Inspect edges afterward using the background removal quality checklist, especially for lace, glass and fine fibers.

CatalogCut publishes this guide and sells product-image tools. Its Stage workflow can prepare clean backgrounds and additional scenes; it does not repair Shopify Liquid automatically or connect directly to your store. Download and upload prepared assets yourself. Standard Stage output is 1K, so it should not be described as a universal high-resolution replacement for every crop, zoom or display-density requirement.

Keep original photographs for factual detail. Generating a sharper-looking texture is not proof that the original material, stitching or label has been recovered accurately. Preserve required provenance information if you edit AI-generated assets.

What to do next

Check one blurry collection card's original, selected resource and CSS width before changing the catalog. If you need help planning a consistent source set after diagnosing delivery, use the Shopify product photo workflow; preview any theme correction on a duplicate before publishing.