When to use (and not use) HiDPI Images?

Design help General
1

I tried a google/forum search on this topic with no luck. When is it recommended to use HiDPI images? Do you use it on all images (hero, slider, banners, icons, etc) or just on certain images? Can anyone shed some light on when to use HiDIPI and when to stick to standard resolution images?

Thanks!

-Brian

1 Like
2

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
3

This is a loaded question about sizing images and a bit of a catch 22. The larger or more images the longer the load and for mobile devices that tough. @vincent is on point with this.

@vincent what do you mean by? “UI designers NEVER process their @1x @2x @3x images automatically, they redraw them for every resolution.” Are you saying that in Illustrator or other program you draw the image at 3 sizes? I find drawing one size and saving for web in 3 scaled sizes works very well.

For banners how are you manually uploading for Webflow (hosting with Webflow)?

4

It was a tease, I’m happy you ask the question.

When I said “UI designers never…”, they actually DO, but they really should not. I’m talking about UI elements here, so buttons, icons, and important recurrent pieces of UI. A lot of designers will design for @2 or @3x and then downscale automatically for @1x. And they end up with graphics that aren’t pixel-perfect. Pixel perfection has many aspects, the most important one is elements have to fit in the pixel grid, edges and lines can’t be in the middle of a pixel line or they’ll be blurred. So it’s easy to realize that any odd value can’t automatically be resized. Also, a 1-pixel line highlight at 1x can totally be transferred to… a 1-pixel line highlight at 2x, it’s not a technical thing, it’s an artistic appreciation thing. The best workflow to follow here is to design things at @1x, always, then proceed to make at least the @2x manually, and the @3x.

What designers do is they’ll use resources like App Icon Template and generate tons of icons with one high res source. Like this:

http://vincent.polenordstudio.fr/snap/y587a.jpg

When they should produce them for every resolution, manually (here in Photoshop)

http://vincent.polenordstudio.fr/snap/xl6gv.jpg

Another example, hot-linked from Bjango (see at the end of this answer for details):

A detail produced automatically:

http://vincent.polenordstudio.fr/snap/yq97h.jpg

In detail, the shape doesn’t fit in the grid:

http://vincent.polenordstudio.fr/snap/8hz1q.jpg

And the same but drawn for pixel perfection:

http://vincent.polenordstudio.fr/snap/syihl.jpg

http://vincent.polenordstudio.fr/snap/shpj0.jpg

Comparison at 1:1

Auto:

http://vincent.polenordstudio.fr/snap/ecthw.jpg

Pixel perfect:

http://vincent.polenordstudio.fr/snap/kr52g.jpg

This example is subtle I reckon, but UI deserves this treatment.

  1. Create a page that you name Dashboard or Master.
  2. Add a div give it a unique class, and add your @2x image as a bg

Keep the Dashboard page, so that when you clean unused styles, your special style isn’t nuked. Also for reference.

Now your image is being uploaded, and published. Mobile HDPI devices will start looking for the image@2x.png version of your image.png version.

It should work, I haven’t tested it, and I’m more into SVG right now, but I’m kind of disappointed with the rendering so I’m going to be back to pixels soon. I think I’ll make @2x versions of the icons I put in the toolbar menu (à-la Facebook) I now build for handsets, to ditch the hamburger thing.

I’ll leave here one of the best resources around for app/UI workflow, from Marc Edwards @ Bjango:

Also, all the articles here are worth reading:

1 Like
5

@vincent Hmmm. Looks like you are working in Photoshop and I work mainly in Illustrator. It’s not always perfect on the first try but seems like the graphics even sized using “save for web” turn out well.

Here are a few articles.

6

Thanks for your links.

I work a lot in PS because I know it the most. But I also work in Illustrator, and there is a way to make pixel perfect in Illustrator and Sketch, by activating the appropriate grid.

In the end, I do almost the same things, with the same amount of vectors and pixels in both AI and PS. Today I work with AI because it’s a large doc for print. Every 10 actions or so I have to search in the Help menu or Google how to do things (: I just learned about the very handy Draw Behind and Draw Inside toggles (:

It always kind of “turn out well”. But I’m talking about turning out perfect (: That’s why when you buy icon collections they often come in various sizes: 24 30 48 60px, even if they are vectors. You’re supposed to use the right version for the right usage and not resize them.

From Wabalys Streamline icon collection:

http://vincent.polenordstudio.fr/snap/hzl2t.jpg

http://vincent.polenordstudio.fr/snap/ojtdu.jpg

I try to get my icons @ Webalys if I find what I’m looking for. For this kind of quality and attention to detail, and device readiness.

7

I pretty much stick to the gird and base them off a size that scales well. 16X16 or 24X24. I don’t redraw (used to) but honestly I don’t see a huge difference in the actual graphics. Font’s used in graphics or logos always a challenge. However, I do for sure get what you are saying :grinning:

1 Like
8

@jdesign, Edwards just published another very good article My icon design workflow

9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.