Responsive images terrible quality help

New Member
1 0 1

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?

1 Like
Shopify Staff
Shopify Staff
94 0 13

Hey Jarrad,

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 support@shopify.com to my attention (Oswald). I will make sure to follow up on this issue and provide you with an update via email! :)

Cheers!

Oswald | Shopify Guru

0 Likes
Tourist
4 0 1

Hi there, same issue with me here, same theme and terrible image quality upon viewing it on Mobile. Will shoot an email to you!

0 Likes
Shopify Staff
Shopify Staff
94 0 13

Hey Nevielle!

Thank you for reporting this!  I got your email and I will be checking with our Theme team on this. 

Once I have any sort of update for you, I will let you through the ticket.

Thank you! :)

Oswald | Shopify Guru

0 Likes
Highlighted
Tourist
29 0 3

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?

Thanks! 

Dan

1 Like
Tourist
4 0 1

Any updates on this? Would love to hear some feedback from the Shopify design team.

0 Likes
New Member
7 0 0

Found the fix! Go to "Sections" in Edit HTML and click on "hero.liquid".  Find the following code and replace it with 2000x2000.

Hope this helps.

https://hellofloyd.com
(shameless plug) 

0 Likes
Shopify Expert
9756 45 1384

@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.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
7 0 0

@Jason thanks for thie info.  Do you have an alternative suggestion on how to keep the images from pixelating on mobile for the Debut theme? 

thanks

Floyd

 

0 Likes
Shopify Expert
9756 45 1384

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.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes