When I add images to my website they seem to display beautifully on the mobile version, no blurry pixelation at all, but on the website itself the images are quite blurry - what is causing this & how do I fix it?
Also when I add background images to sections and add parallax, it looks perfect on the mobile version, but the regular desktop zooms & crops much of the image out - how do I fix this?
Thank you!
Hey @ohiocannabis,
Your image size must be larger than your monitor resolution for them to be sharp and not pixelated. Your image size most probably is larger than your mobile screen resolution that is why it looks good.
Regarding parallax, yes, it will be zoomed and cropped to achieve the parallax effect. You must use a large image size and your image must have space available for the bleed or area to be trimmed out when it will be zoomed. You also need to take aspect ratio into account for the crop. Please note that the aspect ratio varies from desktop view to mobile. When in desktop, your section’s aspect ratio is very wide and in mobile it is most likely close to square or portrait. This is most probably why you’re seeing most of your image is cropped. The solution to that is to increase the height of your section by placing a Gap element that will be displayed for each screen size. Hiding a Gap element is made possible by the Hide During Breakpoints feature available for non-Classic elements.
Hope that helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.