I was designing my portfolio using Webflow in mobile first.
For that I used a workaround like this :
I create a container of :
320px width in the 1080 px desktop design (wich contains all the site)
568px width in the 1280px design
768px width in the 1440px design
and a 100% width in the 1920px.
Then, when I export the code, I change in the Webflow CSS the lines
@media screen and (min-width: 1280px) to @media screen and (min-width: 568px)
@media screen and (min-width: 1440px) to @media screen and (min-width: 768px)
@media screen and (min-width: 1920px) to @media screen and (min-width: 1080px)
(I also rewrite some rules on an other css file)
And I was quite happy with this process.
BUT HERE’S THE PROBLEM :
Recently (didn’t noticed this before), I realize that the images in desktop had a crappy resolution (but not on every computer, even with the same navigator, wich is weird).
I find out that this is due to the responsive image. I’m guessing Webflow see that in resolution smaller that 1920px my images are in wrappers, so it suggested to the navigator to take a smaller version of the image.
So HERE’S MY QUESTION:
Do I have only those three options :
1 - forgetting the mobile first workaround and redesign everything (I soooooo don’t want to do that)
2 - don’t use image reponsive at all (but that would be terrible for the loading time on small device)
3 - make the image responsive myself (with differents tag containg different version of my images, wich would be displayed regarding to the device witdh (does an image is loaded when it is in display: none ?)
Hope you guys have some idea.
Here is my site Read-Only: