What's the actual picture size for statement like ["@2x"] = 1.5

Getting Started Newbie Questions
#1

A newbie question,

in config.lua, there are settings like this:

["@2x"] = 1.5,
["@4x"] = 3.0,

If I have an image, say 100x100 in original size. So I have to build two more for what sizes?

200x200 & 400x400

or

150x150 & 300x300 ??

Thanks.

#2

200x200 and 400x400.   The 1.5/3.0 are used to determine which device to use the @2x image on and the @4x image on.  Bear with me for a moment.

Let’s say your content area is defined as 320 wide.  to keep things simple I’m going to use the width and leave height out for the moment.  For any device who’s physical screen width is less than 320 * 1.5 (in this case 480) pixels, it uses the regular sized image and will scale the image up or down to fit the content area.  If the screen size is 320 * 1.5 to less than 320 * 3 (480px - 960px) it picks up the @2x image and scales it as necessary.  Then for any screen 960px or wider, it picks up the @4x image.  So let’s throw out a few examples:

iPhone 3Gs:   320px wide – uses regular image.

Motorola Droid 480px wide – uses the @2x image.

Kindle Fire  600px wide – uses @2x image.

iPhone 4, 4s, 5, 5c, 5s – uses @2x image.

Google Nexus 7 800px – uses @2x image.

iPad 3/4 Retina 1536px - uses @4x image.

#3

Thanks for the detailed explanation, Rob.

#4

200x200 and 400x400.   The 1.5/3.0 are used to determine which device to use the @2x image on and the @4x image on.  Bear with me for a moment.

Let’s say your content area is defined as 320 wide.  to keep things simple I’m going to use the width and leave height out for the moment.  For any device who’s physical screen width is less than 320 * 1.5 (in this case 480) pixels, it uses the regular sized image and will scale the image up or down to fit the content area.  If the screen size is 320 * 1.5 to less than 320 * 3 (480px - 960px) it picks up the @2x image and scales it as necessary.  Then for any screen 960px or wider, it picks up the @4x image.  So let’s throw out a few examples:

iPhone 3Gs:   320px wide – uses regular image.

Motorola Droid 480px wide – uses the @2x image.

Kindle Fire  600px wide – uses @2x image.

iPhone 4, 4s, 5, 5c, 5s – uses @2x image.

Google Nexus 7 800px – uses @2x image.

iPad 3/4 Retina 1536px - uses @4x image.

#5

Thanks for the detailed explanation, Rob.