I'm currently working on a site and have PNGs for social icons as well as some other graphic pieces. The problem is in order to use the HiDPI option I have to add them at twice the size necessary and then the sites speed test grade starts to drop fast. Even setting an actual width and height only helps slightly of course. Using the non - HiDPI doesn't actually seem to make that much difference on Retina displays...at least not smaller devices (haven't tested on larger).
The nicest solution is using SVG instead of PNG but there isn't an easy fallback method when hosting with Webflow or is there? Not sure I really need fallbacks for this as long as I've assigned height and width for the image and adjust the container for smaller screens.
Curious if anyone has a solid, tested best practice for this with Webflow. Or what are others doing?