SOLVED: Avoiding image-quality degradation in images larger than 2048px.

Nov 08, 2023

Some Storyline 360 users - myself included - have experienced a loss of image quality where images pasted into a slide are larger than 2048 pixels on any side.

By default, Storyline automatically compresses all *.PNG and *.BMP images that are greater than 2048 pixels on one or more sides. This is a particular problem if 'taller' images are to be pasted into scrolling panels, because the visual quality of such images may deteriorate enough for text in them to be illegible.

Don't waste time trying to find settings that allow you to adjust or disable image compression. There are none, and there are no plans to introduce any.

To stop Storyline 360 applying image compression, individual images larger than 2048 pixels on any side must be split into as many images as needed to keep the size of all individual images below 2048 pixels on any side. This process of splitting individual images into segments is called tiling.

If you do not already have an application suitable for image tiling, the quickest way to get the job done is to use GIMP (the GNU Image Manipulation Program). GIMP is freeware, and does most of the jobs PhotoShop can do.

CAUTION: The procedure below is based on my own experience of solving the problem in my own circumstances. Your results may vary. Be aware that this procedure applies to Windows machines.

To tile images using GIMP, do the steps that follow:

  1. If you do not have GIMP installed on your machine, install it. The installation file is at https://www.gimp.org/downloads/.
  2. Download the GIMP Layer Tile plugin (from https://sourceforge.net/projects/gimp-tools/files/scripts/) and Export Layer plugin (from https://github.com/khalim19/gimp-plugin-export-layers/releases).
  3. Open the zipped folders containing both plugins.
  4. Copy and paste the plugin files to C:\Users\"Your-Username"\AppData\Roaming\GIMP\2.10\plug-ins.
    • The following entities should now be in your machine's plug-ins folder:

  1. Launch GIMP, and open the image file that needs to be split.
  2. Go to Layer > Tiles > Split tiles (by rows and columns)...
  3. In the python-fu dialog, choose how many rows and columns you want the image to be split into. Remember, the goal is to keep the image smaller than 2048 pixels on any side.
  4. Click OK. GIMP will split the image into tiles (in GIMP terminology, the tiles are referred to as ‘layers’).

NOTE: If the image’s width in pixels is not perfectly divisible by your specified number of columns, or the image’s height in pixels is not perfectly divisible by your specified number of rows, GIMP does not compensate by rounding the divided value to the nearest pixel: instead, it throws an error. You can overcome this by increasing or reducing the image height and/or width by the number of pixels needed to make the divided amount a whole number. You will not normally need to do this by more than two pixels.

NOTE: If GIMP throws a File calling error, the proposed file save path is longer than 256 characters. Save the files to a folder with a shorter file save path (such as the Desktop).

  1. Go to File > Export Layers… Choose the folder you want to save the images to.

IMPORTANT: I strongly recommend saving the layers (tiles) in *.PNG format. Saving in *.BMP makes the tiles too big to handle without problems.

  1. Click Export.
  2. In Storyline, delete the original (untiled) image from the slide.

From this point, I describe inserting the tiles into scrolling panels. To insert the tiles directly into a slide, disregard points as appropriate.

  1. Click-and-drag the first (upper) image into the scrolling panel. Align the image by eye.

NOTE: If it appears that a blank image or no image has been dragged onto the slide, the file save path of the dragged image is longer than 256 characters. Temporarily move your tiles to a folder with a shorter file save path (such as the Desktop).

  1. Scroll to the bottom of the scrolling panel.
  2. Click-and-drag the second image into the scrolling panel. Move it around before unclicking the mouse, making sure the top edge of the second image overlaps the bottom edge of the first image.
  3. The scrolling panel will extend to accommodate the second image. Position the second image by eye so it aligns perfectly with the first.
  4. If it is difficult to align the first and second images, click the lower image in the scrolling panel. In PICTURE TOOLS > FORMAT > Size and Position, use the X- and Y-axis clickers to make fine vertical and horizontal adjustments.
  5. Repeat the procedure from 17. above for subsequent tiles.
3 Replies