Dear @LitExtension ,
My desktop’s image banner is blurred after adding codes for separate desktop/mobile image. Could you help? Thanks !
Topic summary
Blurry banner imagery in the Dawn theme traced to Shopify serving low‑resolution variants from image-banner.liquid.
Key guidance:
- Suggested banner sizes: desktop ~1920×1080; mobile 480×480 (some use 840×840). General sharpening/brightness tweaks may help.
- Reference sizes for Dawn provided (e.g., slideshow ~1600×1050) and “adapt to size” for text overlays.
Core fix (successful for the OP):
- Increase the requested image width in Liquid from a small value (e.g., image_url: width: 750 or 1500) to a large one (e.g., 3480 or 3840) and ensure the srcset widths include large breakpoints (… , 3000, 3840). Example pattern: image_url: width: 3840 with widths ‘375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840’.
- A proposed replacement using img_url: ‘master’ led to a blank/grey banner for the OP; reverting and only increasing width resolved it.
Status and follow-ups:
- Multiple users report the same issue (including other themes and separate desktop/mobile setups) and seek where to apply the change in image-banner.liquid.
- No definitive solution shared for product images; assistance offered case‑by‑case.
- Thread remains active with requests for hands‑on help and code reviews.