Here’s my deal.
I’m trying to make my website to not change too much but avoid fuzzy images.
It looks like because of webflow’s CSS and responsive features my image is chopped in a way that I get fractions. I had this problem when I had a custom react portfolio and I took me some time to figure out. Most of the time it was certain aspect ratios and CSS rules would drive Chrome to chop pixels in half (because it doesn’t round up the numbers)
https://2daniel-vianna-portfolio-photo-cleanup2.webflow.io/
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Now check this:
https://uploads-ssl.webflow.com/5e12a02d6a42a43b9e618569/5e13cf58eb497c56f3965e11_commuto%20intro2.png
Take a look at the fonts, how blurry they are compared to the source file
If you check the image, on the landing page is a little fuzzy in chrome - because of the decimal in the final rendered image/container
How do I avoid this?
I would like to get ultra-sharp images like Apple retina-ready (I do have large source files 3x the size). I noticed that they use a lot of background images, but the question is, do I still need to use this technique in 2019?
What should I do? do I upload 2x as well? All I want is someone to open on a retina cinema screen and be ultra-crisp. Most of my images were redesigned in vector.
Also, how do I do that without screwing up the loading? lazy loading?
I noticed that when connection is slow some of the images get updated randomly, as opposed to Apple, which renders as you scroll with a little bit of time ahead