A Shopify store owner reports that image banners created in Canva become blurry after uploading to their store, despite maintaining high quality during download. The issue primarily affects desktop images, while mobile versions sometimes display acceptably.
Key Details:
Store uses Dawn theme with custom code for different mobile/desktop images
Images contain text overlays in Canva
Multiple size variations have been tested without success
Proposed Solutions:
One user suggested modifying slideshow.liquid to change size to 100vw, but this was clarified as irrelevant since the issue affects image banners, not slideshows.
Another contributor explained that Shopify’s automatic image optimizer is likely functioning as designed, noting:
The image_url filter requires width or height parameters
Maximum dimension is 5760px
Images cannot exceed original dimensions
Shopify auto-converts to optimized formats (WebP, AVIF)
Recommended best practices include specifying appropriate dimensions for display containers and using crop parameters when exact dimensions are needed.
Status: The discussion remains open with no confirmed resolution to the blurriness issue.
Summarized with AI on October 31.
AI used: claude-sonnet-4-5-20250929.
hello, i’ve been having a massive problem with my image banners. I added some code so that a different image shows on mobile to desktop, due to me designing my image banners on canva so sizing has to be diffferent. After creating my images on canva, i add them to my shopify store and they automatically just turn blurry as soon as i upload them even though the quality is high on canva also when i download the images the quality is still fine. I’ve tried many different sizes and nothing seems to work. This is mainly an issue on desktop, as i can sometimes get away with the mobile image. Is there something im doing wrong? I think it may be something to do with me having text over the image on canva
This seems like the image optimizer from Shopify is working perfectly. However, we need to understand how it works and potential considerations:
Image Optimization in Shopify: Understanding Quality vs Size
When working with images in your Shopify code, the image optimizer provides options to control how images are served to users. Here’s what you need to know:
How it works:
The image_url filter requires at least width OR height parameter
Maximum dimension allowed is 5760px
Images can never be resized larger than their original dimensions
Let me demonstrate with code examples:
{% comment %}Original size image{% endcomment %}
{{ product.featured_image | image_url }}
{# This will throw an error - must specify width or height #}
{% comment %}Properly optimized image{% endcomment %}
{{ product.featured_image | image_url: width: 800 }}
{% comment %}Optimized image with specific dimensions{% endcomment %}
{{ product.featured_image | image_url: width: 800, height: 600 }}
{% comment %}Optimized image with crop control{% endcomment %}
{{ product.featured_image | image_url: width: 800, height: 800, crop: 'center' }}
Visual differences:
Width-only: Image maintains aspect ratio, width is fixed
Width and height: Image might be cropped to fit exact dimensions
With crop control: You can control which part of the image to prioritize (top, center, bottom, left, right)
Best practices:
Always specify at least width OR height
Use appropriate dimensions for your display container
Consider using the crop parameter when exact dimensions are needed
Remember that Shopify automatically optimizes the format (WebP, AVIF) for best browser support
