Why is text blurry on my Shopify homepage banner?

The image file is too small for the section width or over-compressed. Re-export at theme-recommended dimensions.

What size should hero images with text be on Shopify?

Theme-dependent. Dawn full-width heroes often use 3840 × 2160 px. See hero banner size.

Does WebP help text clarity?

WebP can preserve quality at smaller sizes, but text-heavy art still needs sufficient pixel width at export.

Can Shopify apps fix blurry theme text?

Product optimization apps do not edit theme sections. Fix banners in the theme editor with sharper source files.

Should I use PNG or JPEG for banners with text?

PNG for solid graphics and logos. JPEG at high quality for photographic backgrounds with overlaid text.

← Back to Blog

May 26, 2026 · Matteo

Shopify Image with Text Blurry (2026 Guide)

Marketing banners with headlines look crisp in Figma and fuzzy on the live store. Shopify image with text blurry usually means the file was exported too small, over-compressed, or scaled up by the theme section.

This guide covers theme images with text overlays. Product photo optimization follows different rules in Shopify image size guidelines.

Why text blurs on Shopify themes

Cause	What happens
Low export width	Theme stretches 1200 px art to 1920 px+
Heavy JPEG compression	Letters get halos and muddy edges
Wrong aspect ratio	Theme crops off text edges
Retina displays	1x art looks soft on 2x screens

Text needs more pixels than plain product photos. A banner that looks fine as a thumbnail can fail at full hero width.

Fix blurry text in theme sections

Online Store → Themes → Customize.
Click the section (Hero, Image banner, Slideshow) with blurry text.
Note the recommended size in the theme docs (Dawn often wants 3840 × 2160 px for full-width heroes, but check your theme).
Re-export from design tool at 2× the displayed width when possible.
Use PNG for text-heavy graphics or high-quality JPEG (85+) for photo backgrounds with type.
Upload → Save → preview mobile and desktop.

Banner dimension hub: Shopify image banner specs.

Export settings for text overlays

Setting	Recommendation
Width	Match theme spec or 1920–3840 px for full-width
Format	PNG for flat graphics; JPEG for photo + text combos
JPEG quality	85+; avoid repeated save cycles
Sharpening	Light sharpen after resize, not before huge upscales

Avoid upscaling small PNGs in the browser. Re-export from source.

Product images vs theme images with text

Pixly optimizes product media (gallery photos), not theme marketing banners with headlines. If product labels in photos look blurry, that is a source resolution issue. See upscale low resolution product images.

If the hero headline on your homepage is blurry, fix the theme asset, not the product pipeline.

Got questions?

Frequently asked

Bottom line

Shopify image with text blurry is almost always an export size or compression problem on theme assets. Re-export at 2× display width, match your theme spec, and preview on retina mobile.

For product photo sharpness, use size guidelines and optional upscale in Pixly.

Written by Matteo, founder of Pixly. Questions? hello@getpixly.app

Pixly for Shopify

Bulk alt text, WebP, and 1:1 crops synced to Shopify

Review every image before sync. Start free with 69 tokens per month. No credit card needed.

Install on Shopify View pricing