When to use (and not use) HiDPI Images?

Webflow seems to be displaying images you declare as HDPI images at half size/half resolution. De facto, the images are near-native pixel resolution on HDPI devices like iPhones.

Now, most of the websites don’t have 2 sets of images or HDPI images, and they just look good on mobile devices, whether they’re iOS, Android… I’ve never felt a lack of resolution for website images anyway, the upscaling is near perfect.

So for all the images on your site, do you need HDPI? Probably not.

When do we need high def images?

  1. for UIs. Crisp, pixel-perfect icons for UIs, tab bars, etc, are better off being HDPI, but the “one image for all usages” isn’t really the way to go anyway. 2 distinct sets of images are better. UI designers NEVER process their @1x @2x @3x images automatically, they redraw them for every resolution. Anything that you find outstanding on mobile is because it has been tailored for the exact resolution. In reality a LOT OF UI designers process automatically but they don’t know what they’re doing honestly. So for UI, you may want to manually add @2x and @3x versions of your images manually. You can use trick styles to add them to the asset manager and see them being published along @1x images.
  2. for hero banners that you want to be exquisite, vibrant, tremendously good… and here you have to test it. but once again, if it’s for one or two images, I’d prefer to manually upload @2 and 3x versions of them so it doesn’t affect loading times on desktop. Because when we say double the size, it’s 4 times the surface and weight in reality, and 9 times for @3x.

So you see, in the end, I have no idea about the state of mind behind this HDPI feature on Webflow (:

6 Likes