Hi I am using the Debut theme. I noticed that my hero image is fine on desktop, however when it is shown on mobile it is completly pixelated. The theme seems to be automatically compressing it like crazy.
How do I change the code to stop the compression?
This is Oswald, a Guru here at Shopify!
I would like to get our Theme support theme to take a peek at this issue you are experiencing with the image losing its quality when viewing on a mobile device. If you can please send me an email with your Shopify URL and from your email linked to your account to email@example.com to my attention (Oswald). I will make sure to follow up on this issue and provide you with an update via email! :)
Oswald | Shopify Guru
Same for me! in fact the image quality for all my images is really poor in Debut, if I try another theme (e.g. minimal) they are crisp and perfect. Its been driving me insane! is there a fix?
@floyd - By changing all the sizes to 2000x2000 you'll be loading a far bigger image on small screens than what is actually needed. Expect this to impact the speed on smaller devices - and hurt you page speed rankings.
Be sure to test the speed and loading experience now that you made this change.
Everyones images are different so there might not be a simple fix here. Fix isn't even the right word really.
I never saw you site with the default sizes in place so it's hard to know if you had an issue that warranted concern or not. It might have, and given that you took the time to post I assume it did.
Keep in mind that retina screens do need twice as many pixels to appear sharp. Depending on the image itself that blurry effect can be seen - or not. So for screens that are 300px wide (for example) you should never need to show a 2000px wide image. For that example a 300px for single density screens is all you need, or 600px wide one if you're targetting double densitiy / retina screens.
And before others chime in I realise that there's triple density screens too but loading 3x the pixels is generally excessive. To load pics of that size you'd want to refactor the theme code so it loads them in a different and more efficient way.