Brosteins

Developers, Technology Evangelists, Bros.

NativeScript Image Builder

I just released a new tool for NativeScript developers called the NativeScript Image Builder. Check it out at http://nsimage.brosteins.com.

The NativeScript Image Builder helps you re-size your Android and iOS image assets for using with your NativeScript apps. Upload your maximum resolution image in PNG format, and you’ll get back a .ZIP file with the image assets re-sized.

The Details

Many developers don’t have the time or patience to re-size images for their mobile apps, let alone create 8 different versions of an image for a cross-platform app for Android and iOS. Why not out-source it?

Upload a high-dpi version of your static app .PNG images (xxhdpi for Android and @3x for iOS), and we do the heavy lifting. You’ll receive a .ZIP file containing the images down-sampled to the right dimensions for each of the 8 platforms. We’ll also name them correctly for you. Just because we’re nice.

Android Images

When developing Android apps, you should provide 6 different image sizes: ldpi (0.75x), mdpi (1.0x), hdpi (1.5x), xhdpi (2.0x), xxhdpi (3.0x), and xxxhdpi (4.0x). Mdpi images are typically referred to as the “baseline” image, and the other image sizes should be based off of this image’s intent; however, up-sampling from mdpi to xxxhdpi (which is 4x the size) isn’t practical and can lead to pixelated images. So, we ask you to upload your xxxhdpi (4x) image, and we’ll down-sample the image to the other sizes.

In the .ZIP file we’ll send back, we’ll create a directory for each down-sampled image, ready to be copied into your App_Resources\Android folder. Folders are named accordingly: drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdi, drawable-xxxhdpi.

For more details on Android-specific images, check out this article on the Android developer center.

iOS Images

iOS apps require you to to provide 3 sizes of images: @1x (iPad 2 and iPad mini), @2x (iPhone 4s, iPhone 5, iPhone 6, iPad [retina]), and @3x (iPhone 6 Plus). @1x images are typically considered the baseline image size, with @2x and @3x being twice and three times the size, respectively. We won’t up-sample from @1x, so you’ll have to provide the @3ximage, and we’ll down-sample for you.

Your .ZIP file will include the three images, ready to be copied into the App_Resources\iOS folder of your NativeScript app. The files will also be named according to their size.

To find out more on iOS images and the requirements of the iOS platform, check out the Apple Developer Center.

Meh…Down-sampling

Yeah. Down-sampling can lead to loss of quality in an image. If this is a concern, this is not the tool for you. You should manually adjust your images, adding and removing detail as you see fit for each of the platforms and image sizes.

Other Image Types

So, there’s also app icons, splash screen images, and a load of other images required by each platform. Support for those is coming.

About NativeScript

NativeScript is an open-source library for building professional cross-platform mobile apps for Android and iOS using JavaScript.

For a more complete reference for using images within your NativeScript app, check out the NativeScript docs.

Share

1 comment for “NativeScript Image Builder

  1. Avatar
    Sugendran
    March 28, 2017 at 3:28 pm

    Is the code for this available somewhere? I’d like to be able to script it so that I don’t need to upload and copy.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.