Page MenuHomePhabricator

Scale retina images when they are used in a mock
Open, Needs TriagePublic

Description

When I upload retina images to a mock they are obviously twice as large as they should appear to be since they aren't being scaled down. This is a little unfortunate because it means I have to share non-retina images to make sure they are at the correct size but it does mean anyone looking at a mock on a retina enabled device gets a blurry image instead.

Related Objects

Event Timeline

I don't think we can detect this automatically -- a, say, web-ready PNG from Photoshop generally won't have DPI information, as far as I know.

We could add an explicit DPI selector UI, although that would probably be fairly cumbersome.

We could look for "@2x" in the filename, but that won't work if users copy/paste (which I think works in Chrome, at least).

Do you have any ideas for how we could detect this that I'm missing? Do you tend to share work in a form that has some metadata we could look at?

I think the actual display DPI adjustment is straightforward, I just don't see an easy way for detection to work without being a bit of a pain.

If we had an explicit DPI selector, we could maybe default it to 2x simply based on the image size, although I think this is likely to get the wrong result in a lot of cases. But maybe there are certain dimensions (e.g., you have some "iPhone Device Template" you use a lot, and it's always 1254x3248px) which are strong indicators that an image is 2x.

That one might be better to merge here, since it's probably impossible (at least, in the general case) but this talks about some things we can do in the general case.

(That is, if I take a 2x PNG from some arbitrary web source with no metadata and copy the pixels, there's no possible way the browser can tell if I'm pasting 2x pixels or 1x pixels, except possibly with the "images of X by Y pixels are always iPhone mockups" ruleset.)

Oops, sorry, I mis-remembered that other task.

As a designer myself, I don't have the expectation that Pholio will re-scale my images, this would be both surprising and not something I would want. I work at 2x and expect what I share to be what I work on.

What's the overall benefit to adding this feature?

The benefit is merely the lack of requirement for people to zoom out from an image in order to see it at the correct scale. I upload entire UIs to Pholio to explain flows and changes. If the UI is displayed at twice the size it will eventually be, it's rather difficult to get a true feel for how it looks. Would be great for people to be able to see my work in the intended zoom.

I'm not sure what is the best way to do it though (or if it's even logical to add), but it would be great for my use case.

It looks like Invision makes you append @2x to the filename to indicate that the files should be displayed at 50% to low dpi displays. So, file_name@2x.png would trigger appropriate CSS to handle layout.

I think this is reasonable to build as:

  • use "@2x" in the name as a signal;
  • provide some kind of manual override so it's OK if we get cases wrong or you find "copy + paste + fiddle with a dropdown" easier than "Save as @2x + drag + drop".

It would be nice to provide the override to both the author and viewer, so you could change display settings on the fly. Maybe the existing "61% (Xpx x Ypx)" element could pop open a dropdown when clicked with some options ("view at 1x, view at 2x, pause mood music").

It would be nice if we had stronger signals available but I think there's probably nothing in most cases. Maybe PNG headers sometimes have some DPI/PPI data we could extract, though -- I can at least take a look at that.

We could also maybe do something ridiculous like assume it's @2x if both dimensions are even, but M1461 has a 2X image with an odd height (1717px!) so that probably won't get us very far ignoring all the false positives for 400x300px images and such.