Streaming live at 10am (PST)

When to use (and not use) HiDPI Images?


#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


#2

Webflow seems to be displaying images you declare aas Hidpi images at half size/half resolution. De factor, the images are near native pixel resolution on hidpi devices like iPhones.

Now, most of the websites don't have 2 sets of images or hidpi images, and they just look good on mobile devices, wether they're iOS, Androids... I've never felt a lack of resulotion for website images anyway, the upscaling is near perfect.

So for all the images on your site, do you need hipdi? 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 usage" 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 hidpi feature on Webflow (:


The HIDPI Feature
#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, important recurrent peices 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 of highlight at 2x, it's not a technical thing, it's an artistic appreciation thing. The best wrokflow to follow here is to design things at @1x, always, then proceed to make at least the @2x manually, and the @3x.

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

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

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

A detail, produced automatically:

Detail, the shape doesn't fit in the grid:

And the same but drawn for pixel perfection:

Comparison at 1:1

Auto:

Pixel perfect:

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

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

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

Now your image is being uploaded, 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, 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 Facebok) 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:

http://bjango.com/articles/appdesignworkflow/

Also all the articles here are worth reading:

http://bjango.com/articles/


#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.

http://www.adobe.com/inspire/2014/02/illustrator-web-designer.html

http://designmodo.com/web-icon-illustrator/


#6

Thanks for your links.

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

http://designmodo.com/pixel-perfect-illustrator/

http://medialoot.com/blog/3-valuable-pixel-perfect-illustrator-techniques/

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 learnt 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://www.streamlineicons.com/

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 readyness.


#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


#8

@jdesign, Edwards just published another very good article http://bjango.com/articles/icondesignworkflow/


#9

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