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…
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?
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?
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.