image quality becoming trash

[HerBeauty]

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

on mobile its fine

[PageFly-Noah]

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

[PageFly-Noah]

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

[SymmetryIo]

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!