In the introduction to this series of posts, I showed you the results of processing images using three different techniques. This post discusses how you can create color images from FITS files using the MicroObservatory JS9-4L online image editor.

Update November 2019: If you are looking for information about the JS9 image viewer, I discuss how to use JS9 here. JS9 is available as a stand-alone browser-based application and as part of Slooh.com. JS9-4L, discussed here, is a derivative of JS9 and has similar functionality.

I walk you through creating an image of the Trifid nebula using JS9-4L based on FITS files captured using the MicroObservatory telescopes. Along the way, you’ll learn how to use the image processing application and I highlight some best practices that you can incorporate into your own workflow.

Download the Sample Files

Let’s start by downloading the source FITS files here.

Unzip the FITS files and store them on your system where they’re easy to get to.

Starting JS9-4L

Let’s go ahead and start the JS9-4L image processor. I use the Chrome browser, but Firefox works as well. Here’s the link to the JS9-4L image processor: https://waps.cfa.harvard.edu/eduportal/js9/software.php

When you start the image processor, it walks you through a brief tutorial on how to use it. This tutorial comes up each time you visit the page, so just dismiss it by clicking the X in the upper-right corner of the tutorial box.

The image processor opens with an image already loaded. You can have multiple images open in the image processor but for now, close the image by selecting Image – Close from the menu.

Loading a FITS Image

Looking at the source FITS files, I renamed each to indicate which filter was used to capture the image. I did this for the sake of the tutorial and I show you how to figure out which filter was in use so you can figure it out for yourself when you work with other images.

Let’s load the red FITS image into the image processor. There are a couple of ways of opening a file. The first way is to select Image – Open to bring up a file browser where you can select the image you want to open. The other way to open images is to drag the image from your File Explorer window right onto the image processor – I use this method since it’s the most convenient.

Use one of the methods to open the red FITS file.

Adjusting the Scale/Stretch

With the red FITS image open, you can see that it’s really dark with only a few stars visible and the image is in black and white. We’ll adjust the image and add color next.

Let’s start by applying a stretch function to the image. A stretch function distributes the pixels in an image to improve the image’s appearance. There are a few options available in the image processor under the Scale menu option.

The ‘linear’ stretch is the one that’s active when you open the image. You can switch between stretch functions and select ‘linear’ to return to the original image.

The most effective stretch function for this image is ‘log’ which enhances darker parts of the image. The other stretch functions are useful too and you can experiment with them on your own images; however, I find ‘log’ to be the most useful.

So from the Scale menu, select ‘log’ and you’ll notice that the image becomes lighter. This happens because the log function redistributed the values of the pixels such that the black point moved higher to increase the contrast of the darker parts of the image.

You can correct this by sampling the pixels in the darkest part of the image to find the black point, and then enter a value into the Low Brightness Limit field, to the right of the image (highlighted in yellow in the screenshot):

Hover your mouse in the upper-right of the image as shown, not over a star, and note the Pixel Value, as shown (to the right side of the image – the arrow is pointing to the value in the screenshot that follows):

The value you sample should be somewhere around 275, so enter that in the Low Brightness Limit field, to the right of the image. You’ll notice that you can now see the Trifid nebula in the image.

Repeat the process of applying a log stretch and then finding and applying the Low Brightness Limit for each of the remaining images (blue and green).

You should now have three images open – you can switch between images under the My List menu option. The active file will be shown in green in the list and the name of the file will be shown to the right side of the image.

Aligning Images

Next, we need to align the image and we have to do this manually. This part of the procedure has you blend two images and then align the image using the Blend and Shift tools. We then use the Blinking tool to verify our result.

Make the red image active (select it using the My List menu option) and select Tools – Blending from the menu. This tool blends two or more images so that you can see both of them at the same time in order to align them.

Once you activate the Blend tool, a new window pops up and you can move this window out of the way of the image. Ensure only the red and blue images are selected in the Blend tool (all images are selected by default), and click the Image Blending checkbox above the listing of files to activate blending.

When you do that, you’ll see that the image becomes more crowded and you’ll see two nebulae on the image.

The Blending tool shows which image is active by highlighting the bounding box in green. Ensure that the blue image is active, as shown in the preceding screenshot

Now we need to align the image using the Shift tool.

Select Tools – Shift from the menu to bring up the Shift tool. You can move this window out of the way too, but we’ll need it in a moment.

This blue image is shifted down quite a bit so we need to Shift it up. Click the up arrow on the Shift tool to move the image one pixel at a time. Note the position of the bright star in the center of the nebula to line up the image.

If you’re having trouble figuring out whether you have alignment, you can use the Magnifier to make a part of the image larger. Select Tools – Magnifier to activate it. Move the Magnifier window to the right of the image.

Now there’s a trick to using this Magnifier. As you move your mouse over the image, you’ll notice that the area under the mouse gets magnified, but the magnifier tracks your mouse. You can freeze the magnifier in one spot to make alignment easier. Here’s the trick to do just that.

Move the Shift window so that it is very close and to the left of the star in the center of the nebula, as shown:

Mouse over the star in the center of the nebula and then move your mouse to the Shift window. You’ll notice that the Magnifier freezes on the star in the center of the nebula. If it doesn’t, move the Shift window closer to the star and try again, it should work.

Now that you have the region magnified, use the Shift tool to align the images.

Once you have it aligned, deactivate the blue image in the Blending tool (clear the checkmark) and activate the green image. Ensure it is the active image by clicking the file name to highlight the bounding box in green.

This green image is also shifted down quite a bit, so we’ll have to move it up and to the left to align it. Use the Magnifier as I showed you earlier to magnify the star in the center of the nebula.

Once you think you have it aligned, close the Magnifier and Shift window. Then remove the checkmark next to “Image Blending” in the Blending tool to disable blending and then close the window.

Now we’ll use the Blink tool to verify that our alignment is good.

Select Tools – Blinking and put a check mark next to each of the images. Click the “blink manually” button to blink each image – the active image is highlighted in green.

The image should not appear to move between blinks. If it does, note which image is active when that happens and use the Shift and Magnifier tools to align the image as I explained earlier.

Close the Blink tool and now let’s assign a color to each image and then combine to get the final result.

Adding Color To Your Images

We need to figure out what filter was used to capture the active image. While you can just look at the filename in this example, there’s another way and this works regardless of where you get the FITS file from.

Select Image – Display FITS Header from the menu. The FITS header is shown:

Look through the headings on the left side and locate ‘FILTER’. In this case, the filter is green (highlighted in the preceding screenshot).

Close the FITS header window by pressing the escape key on your keyboard or click the Close link at the top of the header window.

Select Color – green to assign green to this image.

Repeat the process for the other two images (blue and red).

Now you’re ready to combine the image into an RGB image. Select Color – RGB Mode to combine the images.

You should now have a combined image showing the Trifid nebula in color.

If your image is blurry or stars are stretched out, you’ve made an alignment error. You can reverse RGB mode by selecting it again. You can return an image to greyscale by selecting Color – gray, at which point you can go back to the alignment process again.

Exporting Your Image

With your final image ready, you can now save it as a PNG image. Click Image – Save as PNG. Your browser downloads the image and names it using the name of the active image.

You have now created a full-color image of the Trifid nebula without installing any software, which is pretty amazing!

In the next post (part 2), I’ll show you how to use Photopea, an online Photoshop clone, to enhance this image so you can produce your final version of the image.