Continuing the discussion from When to use (and not use) HiDPI Images?:
Hey community Webflowers,
Working on pixel perfecting some icons right now. Wondering about the hdpi feature on webflow. Like @vincent stated … I too don’t understand what it is for. I know it cuts the image size down by half but why? How does that benefit the image?
Could anyone elaborate the reason behind such a feature and share some of your use cases?
Cheers,
Diana 
It’s fairly simple. If you want your icon to be eg. 64x64 px that mean that on non-retina devices (like laptops, screens etc) your icon will be seen as 64x64. On retina display, where the pixel-ratio is twice as big, the icon will be very small (half of the size) while still having 64x64px. Website will automatically stretch the icon to twice the size (128x128px) so it will be same size on screen. If you had a 64x64px image, on retina devices it will be stretched to twice its size.
Now… If you had the icon already twice the size (@2x) so it is 128x128px and you set the HiDPI the image will be shown with half its pixels size 64x64px for regular screens and 128x128px for retina devices which will give you high quality image.
If you have the ability you can create vector images and export them in SVG file. You can use such vector image file so it looks absolutely PERFECT across all devices - doesn’t matter if it’s @2x or @3x :)
Thanks @bart for the detailed explanation! Your post should be helpful to a handful of others. 
Good thing I asked … currently all my photos are NOT HIDIP … need to fix them asap!
Though, after making them larger … I need some serious optimization with the file size … sounds scary. 
Fortunately, for icons, I only use svg, so they should be perfect without the need of HIDIP, like you’ve said.
Cheers,
Diana
Regarding images try to keep them below 1920x1080 px and less than 200KB :)
This topic was automatically closed after 60 days. New replies are no longer allowed.