iOS Image Design (sizes and asset catalogs)

Question

I am developing my first app and, on the main menu, a logo appears. The logo currently resides in the form of a Pixelmator file on my desktop. Ultimately, I would like to export the logo as a vector file, but currently Pixelmator does not have the functionality.

I have decided that I will use 'Image Catalogs / Assets' to organise all my images, but I'm confused as to what all the '@2x', '@3x', 'retina' (e.t.c.) mean. It would be great if someone could produce a table as to the changes that a 100x100px image needs to go through in order to show as the highest quality on the screen.

Thank you in advance, Will.

Answer 1

To answer your question I made this table to consolidate the information you and probably many more are looking for.