+1

When you want to show an image in an app, to me there are two ways to go about that:

• 1. You want to take advantage of the extra pixel density and create different images for different device types—aka your img@2x.png is not just a straight resize of img@3x.png.
• 2. You want to show the same image on devices of all pixel densities.

What's currently implemented in {N}, and what we have documented here, is great for scenario #1.

For for scenario #2, which I would guess is far more common, having to create 6 images—AppResources/iOS/img.png, AppResources/iOS/img@2x.png, AppResources/iOS/img@3x.png, App_Resources/Android/drawable-hdpi/img.png, App_Resources/Android/drawable-mdpi/img.png, and App_Resources/Android/drawable-ldpi/img.png—is indeed labor intensive as @jlooper says. It'd be great if the NativeScript CLI (or the modules, if possible), provided some solution for images to look great from a single source.

Isn't #2 ugly? Why no use automation to create the images and use #1?

Reason to do it the #1 way is simple:

Example: High pixel density screens allows us to create high def images with lots of fine details, however, when that image is displayed on a lower pixel density screen it might become kinda ugly. Therefor we need to remove/rework some of the details for lower density screens.

But, what we need is a way to do both #1 and #2.

Personally I wouldn't worry about #2, as it's not the normal 'mobile' way to develop - we are used to making two or three versions of our images to satisfy iPhone4 as well as hi-res iPads. I'd just love to have {N} have a built-in way to content scale. It would give us a leg up on the competition. For example, the Appcelerator docs tell you flat out to optimize your own images:

http://docs.appcelerator.com/platform/latest/#!/guide/Image_Best_Practices-section-30082525_ImageBestPractices-Optimizingimages

If we can't help with the actual optimization, what if we allowed users to put the three scaled images into a location and then {N} build process places them, renamed appropriately, into the right folder for the platform?

@jlooper and I talked this over. Our ideal structure is something like what's shown below. There'd be some special folder where you put all of your app's images in (app/images or whatever), using some convention to designate three different pixel densities.

app
    images
        1x
            logo.png
        2x
            logo.png
        3x
            logo.png

The NativeScript CLI could take all images, and move them to the appropriate places in App_Resources. For instance with the above example, app/images/base/3x/logo.png would move to App_Resources/iOS/logo@3x.png and App_Resources/Android/drawable-hdpi/logo.png. This provides a solution to #2.

If the user only provides a 3x image, in theory, the CLI should automatically be able to generate the 1x and 2x versions automatically. This extra bit of logic would provide a solution to #1.

Obviously implementing this would be a bit of work, and there are potentially some performance implications, but if you read through what you currently have to do to use correctly scaled images, I do think it's a bit much, and it'd be nice to have something easier to use longterm.

I'm touching scope creep here but a nice addition would be to be able to supply SVGs which gets converted to pngs (of all sizes). Pretty much what I'm doing in this gulp script.

But as said, scope creep and maybe not at top of the priority list.

Hey guys,

Have you played with appbuilder resource create command? Do you think if we extend its usage to support arbitrary images (not only icons and splashes) is the way to go?

late to reply, but if we could run our images through some builder and scale everything, renamed appropriately, and stuck in the right folder, my life would be complete :)

Hey folks,

Do you think we still need this?

@enchev: I initially supported doing this, and still think something like this might be nice. But since this issue was first created the Brosteins built http://nsimage.brosteins.com/, and that tool simplifies the manual work to create these images considerably.

So, my vote is to close this unless there’s additional community demand, especially as there have been zero comments in the last eight months.

Thanks @tjvantoll! I'll close it for now.

Hi! I'm starting to develop a new project using NativeScript and I didn't find any way to automate the images generation process. So I've created a hook that you can install in your project and it will automatically generate all needed images.

https://www.npmjs.com/package/nativescript-images-generator-hook

I'm sharing it here because I think it could be very useful.

@NathanaelA Thanks! Yes I saw these solutions but I needed a way to automate the full process so using a webservice was not an option. Moreover, with this hook you have to commit only one high-res image per resource, the other ones are generated during the build process directly inside the right platform folder.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.