Reviewed October 28, 2026

Why Product Images Turn Blurry After Upload, and How to Fix It

You upload a crisp product photo, and on the live page it looks soft. The instinct is to blame the camera or re export the file bigger, but most blurry product images are created inside the store: a theme asking for an image larger than the one supplied, a platform resizing step, or compression settings doubling up. Each cause has a different fix, so the useful skill is tracing which step in the chain is softening the picture. This guide walks the chain from original file to rendered page.

Check the real cause first: displayed size versus supplied size

Every image on a product page is shown at a certain pixel size, doubled on retina screens. If the file supplied is smaller than the display size times two, the browser stretches it and softness follows. Right click the live image, inspect its rendered size and the size of the file actually served, and compare. A photo displayed at 800 pixels wide needs a source at least 1600 pixels wide to stay sharp on high density screens. If your originals are large but the served file is small, the theme is requesting a downscaled version, which points at the next step.

Fix theme image settings that downscale or crop badly

Themes request specific image sizes from the platform, and older or heavily customized themes sometimes request sizes that no longer match their layouts, especially after a redesign widened the product media area. Look for image size settings in the theme editor and any hardcoded sizes in product templates. Aspect ratio settings that crop to a fixed shape can also upscale a portion of a photo beyond its resolution. Set the theme to request the largest sensible size for the main product image; the platform serves responsive variants automatically, so asking for a big master does not force phones to download it.

Stop double compression before and during upload

Compression stacks. A photo exported from editing software at low quality, then compressed again by an image optimizer app, then converted by the platform, loses detail at every pass. Export product masters at high quality, ideally in a lossless or lightly compressed format, and disable optimizer apps for product originals or set them to lossless only. Check whether you are uploading screenshots or images pulled from a supplier portal at web size rather than the true originals, a surprisingly common cause. One clean, large, lightly compressed master file beats any rescue applied later to a small degraded copy.

Rebuild your image pipeline so it stays fixed

Set a store standard: minimum master width for product images, commonly 2048 pixels on the longest side, a naming habit, and a single export preset everyone uses. When adding a new product, view it on a retina laptop and a phone before publishing, because softness shows first on high density screens. If only one product looks blurry among many, suspect its source files rather than the theme. Keep original camera files archived outside the store, so a future theme change can re upload clean masters instead of inheriting files that were already compressed once.

Frequently asked questions

What image size should I upload for Shopify product photos?

A master around 2048 pixels on the longest side is a good standard: large enough for zoom features and retina displays, without being unwieldy. The platform creates smaller responsive versions for phones and thumbnails automatically, so one large master serves every context. Going far beyond that brings little visual gain and slows your own workflow. What matters more than sheer size is that the master is a clean original, not an already compressed web copy from somewhere else.

Why is my image sharp on desktop but blurry on mobile, or the reverse?

The two views often use different requested sizes and different crops. A theme may request a modest size for mobile that predates a layout change, or a mobile crop may zoom into part of the photo beyond its resolution. Inspect the served file size on the view that looks soft and compare it with how large it is displayed. Fix the size request for that template or breakpoint. Testing on one high density phone and one laptop catches most of these template mismatches.

Do image optimizer apps cause blur?

They can, when set to lossy compression or when they process files that were already compressed. Optimizers are useful for oversized, untouched originals, but stacking their output under the platform own conversion and your editing export compounds the losses. If product images matter to your store, set optimizers to lossless for product media or exclude product images entirely, and keep file size under control through sensible master dimensions instead. Always compare one optimized image at full size against its master before trusting a bulk setting.

Why does only the first product image look blurry?

The hero image is usually displayed largest, so it exposes undersized sources first, while smaller thumbnails of the same file can look fine. Some themes also treat the featured image with a different size or crop setting than gallery images. Check the served size and theme setting for the main media area specifically. If the source file is genuinely small, reshoot or obtain the original; no setting can invent detail that the uploaded file does not contain.