image quality becoming trash

HerBeauty
New Member
4 0 0

HerBeauty_0-1714814881796.png

when i upload a image on my image banner my quality becomes terrible. How can i fix this.

 

on mobile its fine

 

Replies 3 (3)

PageFly-Noah
Astronaut
1112 200 218

This is Noah from PageFly - Shopify Page Builder App

I often encounter this situation, the reason is because the screen sizes of mobile and desktop are different. Because desktop is wider than mobile, on desktop you will see blurry images and poor resolution. Therefore, you need to download images with better resolution and larger image sizes suitable for your desktop screen

Thank you!

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Astronaut
1112 200 218

Hi @jark  I just help fix the issue of this post. I cannot provide the store

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

SymmetryIo
Excursionist
11 1 1

Hi @HerBeauty, a few things could be going on here. 

 

Always first check it's not an image quality problem - open your image in an editor (eg photoshop) and export with a higher DPI to see if it fixes your issue. You can also try optimizing your image through a tool like tinypng.com. I'm guessing you've already checked image quality and this isn't the issue.

 

The most common reason for blurry images I see is when the Shopify theme is built expecting images with specific dimensions, and then you upload an image with different dimensions. Shopify will try to scale the image up or down to match the requirements, which will give you blurry banners etc.

 

What theme are you using? If you navigate to Online Store > Themes > Customize does it recommend specific image types and size for your banners? it could be called 'max-width' or something similar (eg "max-width: 768px")). Edit the images you're using to match the dimensions they recommend so that Shopify stops resizing your images to match what the CSS is looking for (this can also speed up your page load time!). Alternatively...you can update your theme to match your images, but this is usually more trouble 😅

 

Good luck and reach out if you have questions!

io from Symmetry Commerce
- Was your question answered? Mark it as an Accepted Solution
- Need help with your Shopify store or app? Reach me at: io@symmetrycommerce.com
- https://symmetrycommerce.com