Images look blurry

Blurry images almost always come from a file that is smaller than the space it fills. Phones and laptops with high-resolution screens need about twice as many pixels as the size an image appears at. Our themes ask Shopify for the right size for each screen, but they can’t add pixels that aren’t in the file.

1. Check the file size

1. In Shopify admin, go to Content → Files, or open the product.
2. Click the image and check its width in pixels.
3. Compare it with where it shows:

• Full-width images, such as a hero or a slideshow: at least 2400 px wide.
• Half-width images, such as an image beside text: at least 1500 px wide.
• Product images: at least 2000 px on the long side.
• Logos: at least twice the logo width you set in theme settings.

If the file is smaller, upload a larger version and pick it again in the theme editor.

2. Export without heavy compression

Export JPEG or WebP at a high quality setting from your editing app. Shopify compresses images again for the web, so a file that is already squeezed loses detail twice. Avoid screenshots of photos. They are often small and soft.

3. Check the crop

An image looks soft when a small part of it is stretched to fill a tall or wide frame. If the important part is cut off or looks enlarged:

• Set a focal point on the image in Files, so the theme keeps the subject in frame.
• Pick a different image shape in the section settings, closer to the photo’s own shape.