Retina Graphics appear squashed

1

Hi everyone,

I am using Affinity Designer’s Export Persona to create icons that are standard size and x2 size for retina displays. I have added both size icons to my Hype project in the Resources folder successfully. However, on retina displays my icons appear slightly ‘squashed’. I’ve attached screenshots below.

This first is my menu on a standard resolution screen…

This second is my menu as it appears on my iPhone…

IMG_0172.PNG750×1334 272 KB

Can you see how the icons have been slightly distended? I’m sure this is a simple problem to fix but it has me vexed at the moment. Can anyone offer some advice?

2

That’s very strange.

Please note that if you drop a @2x image into Hype (and only a 2x image) Hype will automatically create a 1x variant for non retina devices.

I’m unable to reproduce this issue – can you attach a test case with your images?

3

Hi Daniel,

Thank you so much for the quick reply. I have just deleted the x1 images and replaced the menus using only x2 resolution icons. This seems to have solved the problem - when the icons are resized at x1 resolution the graphics remain in proportion.

I’ll definitely remember your advice - am I right in thinking that this technique will also help to keep the overall file size down?

4

This will likely keep the size down for the end user, yes. One other trick to make sure your visitors are downloading the minimal image content is to drop your exported resources folder into Imageoptim. This squeezes some extra bytes from images.

5

Wonderful - thank you very much.