How large should each image be [Image Suffix]

[kcdev]

Hi.

I know from the guidelines that it is recommended to have multiple versions of each image to allow corona to select the most appropriate image dynamically to prevent blurring and conserve texture memory.

What the guidelines did NOT mentions is that how large/small a given image should be between each scale factor.

Below is what my config.lua looks like:

application = { content = { width = 320, height = 568, scale = "zoomEven", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 2.0, ["@3x"] = 3.0, ["@4x"] = 4.0 }, } }

Is there a general ratio of image sizes that should be used between scale factors?

Or should that ratio reflect that of the scale factors themselves? (in this case, 66% and 75% respectively)

Furthermore, should the dimensions of the images be adjust to reflect these ratios (e.g. 1024x1024 becomes 768x768) or should the file size be adjusted? (e.g. a 128kb image becomes 96kb)

Thanks in advance.
KC

[rob]

The way Corona works with the suffixes with your config.lua.

Screens between 0 and 639 pixels will use the non-prefixed assets.

Screens between 640 and 959 pixels will use the @2x assets.

Screens between 960 and 1279 pixels will use the @3x assets.

Screens 1280 and wider will use the @4x assets.

I generally don’t worry about @3x assets, it’s a lot of work. But lets look at a real world example. The Kindle Fire (1st gen, don’t know the sizes of the new ones) was a 600px wide screen. Using your config.lua, it would get the non-prefixed assets and if the 1x assets were designed for a 320px screen, Corona would have to scale up the image 187.5%. Scaling images up generally leads towards softer/blurrier looking images.  But if it could use the @2x image, it would scale down a mere 6.25%. Scaling down generally preserves sharpness.  My solution to this is to use:

 imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0 },

This results in less files in your app bundle making it smaller.  Now:

0-479 will get the unprefixed images.

480-959 will get the @2x images

960+ will get the @4x images.

Under this configuration, the Kindle Fire mentioned above would get the @2x images with a little down scaling. The non-retina iPads would get the @2x images while the retina models would get the @4x images. The current crop of iPhones that are supported (iPhone 4 and newer) would get the @2x images except for the plus models which would get the @4x. For devices following HDTV sizes, like 720p or 1080p, the 720x1280’x would get the @2x images and the 1080x1960’s would get the @4x images.

Now to your other question Your images should match the prefix.  That is make your non-prefixed backgrounds 360x570, the @2x 720x1140 and the @4x 1440x2280.  If your unprefixed button looks good at 80x40, then the @2x should be 160x80 and the @4x should be 320x160. 

Rob

[rob]

The way Corona works with the suffixes with your config.lua.

Screens between 0 and 639 pixels will use the non-prefixed assets.

Screens between 640 and 959 pixels will use the @2x assets.

Screens between 960 and 1279 pixels will use the @3x assets.

Screens 1280 and wider will use the @4x assets.

I generally don’t worry about @3x assets, it’s a lot of work. But lets look at a real world example. The Kindle Fire (1st gen, don’t know the sizes of the new ones) was a 600px wide screen. Using your config.lua, it would get the non-prefixed assets and if the 1x assets were designed for a 320px screen, Corona would have to scale up the image 187.5%. Scaling images up generally leads towards softer/blurrier looking images.  But if it could use the @2x image, it would scale down a mere 6.25%. Scaling down generally preserves sharpness.  My solution to this is to use:

 imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0 },

This results in less files in your app bundle making it smaller.  Now:

0-479 will get the unprefixed images.

480-959 will get the @2x images

960+ will get the @4x images.

Under this configuration, the Kindle Fire mentioned above would get the @2x images with a little down scaling. The non-retina iPads would get the @2x images while the retina models would get the @4x images. The current crop of iPhones that are supported (iPhone 4 and newer) would get the @2x images except for the plus models which would get the @4x. For devices following HDTV sizes, like 720p or 1080p, the 720x1280’x would get the @2x images and the 1080x1960’s would get the @4x images.

Now to your other question Your images should match the prefix.  That is make your non-prefixed backgrounds 360x570, the @2x 720x1140 and the @4x 1440x2280.  If your unprefixed button looks good at 80x40, then the @2x should be 160x80 and the @4x should be 320x160. 

Rob