Hero image not appearing as retina on mobile

Design help General
1

Hello,

the hero image on this new website is not appearing as retina on mobile devices, it damages the appearance and feel on iPhone and other retina mobile devices. It might be caused by the scroll animation? Not sure, all other images on site are perfectly retina.

Read-only link:
https://preview.webflow.com/preview/rhodium-38d5a8-aca13cc7dc-711c2fcf13310?utm_medium=preview_link&utm_source=designer&utm_content=rhodium-38d5a8-aca13cc7dc-711c2fcf13310&preview=db964723ca63632c46b2d15b3630205d&mode=preview

Published site:
https://www.rhodiumcollection.com

Thanks for your help and time,
Martin

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

3

hi @Martin_Halik I have checked site on my iPhone in (Chrome - Safari - Brave - Firefox) and all works as expected only thing I had to do on Firefox and Safari was to manually unblock content blocker

IMG_7FEBAD6A7475-1
IMG_7FEBAD6A7475-1828×1792 99.2 KB

IMG_25AF5CFB6728-1
IMG_25AF5CFB6728-1828×1792 239 KB

EDIT:

Or do you mean that when you zoom in the site to see detail the image is not sharp? If this is a reason you can turn of responsiveness of image BUT it will serve large image on mobile that has 1.26mb. I don’t thing that will be good for site performance. Is there specific reason to do that as IMHO image Hero looks good on mobile

4

I don’t want to serve whole 5120 pixels wide image, but 1000pixels wide would be enough for iPhone.

It’s much more obvious here:
https://www.rhodiumcollection.com/contact-us

5

There can be two ways I can thing about. In both cases you will need to upload a new cropped image for mobile.

  1. If hero image is set as background URL can be changed on mediaQuery
  2. if image is inside div you can change image source with JS as you will have image URL

BONUS: Set cropped image as background and hide original large image on mobile

EDIT:
IMHO 5k+ image is overkill, BUT it is all about visitors. What do I mean? I see that your hero is full width, so if 70% visitors of this page (potential clients) will have 4k+ monitors than large image make sense but I will crop it to 4k anyway as each kb counts. If the majority of visitors will have standard 27"+ monitor 2k+ there is no reason to have 5k+ image.

m2c :wink: