I have JPG images that are 1500px wide, exported with a good resizing algorithm, the edges are crispy. For responsiveness, I'm using:
img { max-width: 80%; }
It looks good on Firefox no matter the size, but blurry on Chrome. How to prevent blur on image resize in Chrome? gives a solution:
img { image-rendering: pixelated; transform: translateZ(0); } // also tried crisp-edges, -webkit-optimize-contrast, etc.
But then, depending on the image, it's sometimes too crispy (like if a high "sharpen edges" algorithm has been applied, it' really too much).
Now I noticed that if using exactly half the original width (width=750), it's perfect. It seems the same for simple integer ratios of the original size: 1/2, 1/4, 3/4, etc.
Question: is it possible, with CSS rules to ask images to:
- respect a max width of 80%
- and use a width only in a set of preselected possible widths: 375 (one quarter), 500 (one third), 750 (half), etc. automatically decided by the browser (it chooses the biggest possible respecting max-width: 80%;)
- or even better: use a width only in a set of preselect ratio from original img's width: 1/4, 1/3, 1/2, 3/4
This would ensure crisp edges easily.
How to do this in CSS?
