-
Posts
-
Hey, so I’m working on a new website for a client here: https://artlifestudiosproductions.com/
For some reason, on the part of the home page where you have the 3 production sections, the images within them are blurry. They initially load in high resolution, but then some code is either shrinking their size, or reducing their quality in some other way. What I also noticed is that they look a lot sharper on mobile than on desktop… which makes it seem like something is scaling them down size wise on the back end. I just can’t quite figure out what and where.
Thank you so much for all your help :)
well – open your image in a browser – just pure:
https://artlifestudiosproductions.com/wp-content/uploads/2022/04/On-Stage-Sound-System-Setup2.jpg
and size your browser window to at least that dimension you have in your homepage.
This is not an enfold problem – it is the way browsers do render a resized image
this will be the was your full-size image looks without enfold influence on a firefox browser:
maybe you can add to avia images a css setting for the rendering:
.avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap { image-rendering: optimizequality; /*** or try : crisp-edges ***/ }there are a lot of settings to that – test it on developer tools what fits best for you: image-rendering tips
Hey, thank you so much for your response. I added in the code, but I honestly don’t see a difference. At the same time, have the images gotten less blurry since then? I want to say yes, but I can’t tell. Is there a way to control what the browsers do? I don’t use firefox at all, only chrome.
Please help!
- You must be logged in to reply to this topic.