Something I've had to rely on from time to time is to use a trick of 'svg' graphics to preserve the size of image and ignore any scaling that the browser might do to it. Rise images are always scaled.
![]()
To represent centered icons that don't change scale no matter the breakpoint (mobile, desktop etc), I have wrapped them into a SVG container and set the 'aspect ratio' flag in a particualr way. It's a bit fiddly since you have to encode the image using a tool, then paste it into the SVG. I've also used this technique to add text headers with an icon that hangs off in the white space to the left of the header - if you do that with an image, it scales the text on the image; in svg you can keep the text the same size by preserving its aspect ratio.
