Retina support?


#1

I presume that the resolution/retina support in Subform is not quite done yet? I am encountering problems with images on my Retina screen, they all are imported at double scale/resolution (scaled up and blurry).


#2

Hi @jaanus, there's an existing topic for this issue so I'm closing this one. Thanks!


#3

#4

Actually, I think Kevin misunderstood this issue, so I'm going to reopen this topic.

The way images work in Subform right now is similar to the background-image property in CSS. So when importing an @2x image, you need to make sure that the containing element is the correct physical size and the background image is set to be constrained to that size.

As an example, let's say you have a 200x200px icon at 1x. You export an @2x version, which is 400x400px. If we setup a 200x200px box in Subform and import the image, it looks like this:

The image looks blurry on a Retina display because it's actually drawing at 400x400px. We need to tell it to draw at the width of the container, instead. (200x200px). We can do that by setting the size to 100% 100%. (You can also use cover or contain as per the CSS spec)

Then the image will resize properly and no longer look blurry:

The other workaround is to just to use SVG, instead of PNG. The SVG will automatically size to the container. But obviously not everything can be a vector image, so for rasters you'll need to do the above steps.

Does that solve your issue?


#5

#6

Thanks, yes, both of these solutions (SVG, and setting the correct background image size) make sense and work.


#7