The quality of Image compression/rendering in Storyline

Hi Tom,

I can't say that I've noticed it with those particular colors/image sizes that you mentioned - but if you had a few examples for us to take a look at we'd be happy to. Are you using a particular image type? Do you have a .story file you could share here with us? 

THIS HAPPENS TO US ALL THE TIME! It is aggravating and it is causing a both a riff to come between our graphics team and our development team AND then between us and our clients when we give them poor quality work. Your program is not working with images properly! We don't know how to explain why the images look so bad, and we end up needlessly experimenting to try and get rid of it.

Honestly, as a graphic designer I believe it is the way Storyline is compressing any kind of bitmap image (JPG, PNG, GIF) the same way Flash compresses bitmaps. Except it does it terribly!

Attached in the image belong is a screenshot of two graphics on the same page in SL. Both were made the EXACTLY same way in Photoshop (72 ppi, PNG 24, RGB) and one is rendered perfectly and the other is compressed. Why is your program doing this?

The dev people say it is a Photoshop issue, we say that SL is doing it. What do you know about how SL compresses images? We re-export the images the images over and over again and it seems that it is a crapshoot as to whether SL is going to poorly compress it.

Sincerely fed up with Storyline and looking for a new authoring tool if I can't find a solution,

Ben

Hi Ben,

I'm sorry to hear you're struggling with the image quality and compression of Storyline. You mentioned that the attached image is displaying two images both within Storyline - I assume after publishing, but only one of them shows compression issues? Are you using Storyline 1 or Storyline 2? Have you looked at the publish quality settings in regards to changing the image quality prior to publishing?

If you'd like to share one of the images, we're also happy to test it as well to see if there is anything else occurring. You could share one of the images here or send it along here. 

Even at maximum quality settings SL messes images and videos up. Give us a lossless option for graphics, this is really a deal breaker for some projects. I circumvented the issue by finding the video file in the publishing folder and then replacing it with my own video file to get the quality I worked for to achieve. Sadly that doesn't work for images.  

Hi Niels,

Are you using SL 1 or SL2? I know that a lot of users shared the issue with the videos was problematic in SL1, so now in SL2 there is an option for no video compression as described here - although the workaround you mentioned was what a lot of users utilized for SL1 or if using SL2 for videos that don't match the requirements for allowing you to remove the compression. 

It was in SL1. I will have a project with SL2 coming up soon and will use video. Thanks for clarifying. Now if you can to the same for images.... ;)

Always something you can share your thoughts on in the form of a feature request.  :-) 

Here's some things I've found out in comparing published images vs. original images;

• Bitmap images get published as separate SWF for the Flash published version, and a combination of SWF and PNG for mobile published versions.
• The bitmaps for the mobile published versions get saved @ 72 dpi regardless of what dpi they come in at; replacing them with their original file versions (to attempt to make them sharper) is only valuable if the HTML5 published version is important, and is a dubious improvement.
• The bitmap images in the mobile published versions always get saved as PNGs, no matter what format they come in as.
• The file size “ballooning” issue (images getting larger upon publishing) seems to be a wash. Storyline seems to take away a little on smaller density images, and add a little on larger density images.

HTH

Thanks Mark - this thread is a bit older, but I appreciate you sharing some additional information in terms of what you found and how it's been working for you. 

Is there still no improvement on this? I'm experiencing it too. 

Ok, I just did a test.

I'm working with a Story file using a Story stage size of 1280x720

In Photoshop:

I had a picture 1280 x 720 with 3 characters in the middle of the frame. The rest of the background is transparent. Cropping around the characters make the picture 469x438. This is the size I'd like it for a clickable icon in Storyline 2.

Import into Storyline 2: Blurry with artefacts (on preview and publish)

Import into SL2 the original picture uncropped at 1280x720: Characters are pin sharp with no artefacts. (on preview and publish).

So Storyline is introducing errors on any graphics that are smaller than the stage size.

Since this graphic has a transparent background and all I wanted to show were the  characters, I used Storyline's crop tool to crop this imported 1280 x 720 around the characters to make it 469x438: Characters are pin sharp with no artefacts. (on preview and publish).

Hope this helps, but goes to show SL2 is not representing high quality graphics imported in at smaller than stage size, the same as the programs they were created in.

Yeah, the crop function in Storyline is basically unusable. Best not to touch it. Why anyone would offer this function and then make it perform so poor, I don't know. But as things are at the moment, crop everything in Photoshop and then import it to your SL project. Image quality is a huge problem with SL, we can only hope they will improve things in SL3. 

But what I'm saying in this instance is to bring a graphic into SL at the same size as your working SL stage size and use SL to crop the graphic and it stays pin sharp. Cropping outside and importing into SL... This is where SL introduces resolution errors. Shouldn't be the case, but this is what I have found.

Hi Stephen,

When you've cropped outside of Storyline and then insert it - are you scaling it to fit the entire slide stage size? I'd recommend inserting images at the size you'd want them to appear to keep the quality established in other programs such as photoshop, and if inserting an image larger than Storyline's maximum image size it'll be scaled down and can cause blurry/fuzzy images. 

Here are some other best practices for image and media files within Storyline. 

Hi Ashley,

No - I brought in an image at  469x438 but it had artefacts and slightly blurry. As mentioned above, bringing it in at the stage size of 1280 x 720 and cropping (not resizing) in SL to 469x438 maintained the sharpness etc.

I guess the size of the graphic is still 1280 x 720 but is hidden because its cropped in SL. This will make my Story file bigger but will keep the quality up.

Hi Stephen,

Are you able to share a copy of the image file for us to take a look at ? You can upload it here using the "add attachment" button at the bottom of the reply window. 

Hi!!!

I have tested  what Stephen says with a logo with red (236,0,0) as background. If I use the logo in a picture with transparent background and same size that stage it looks fine, but if I use the logo in its size the quality when publish or preview is very low, with a lot of artifacts.
Cropping the png in Storyline seems to be fine at publish.

It seems the software has am issue with this

Hi Juanjo,

Would you be able to share this example with us? The .story and the individual .png file would be ideal for us to take a look at - and then the steps you went through in terms of inserting and cropping the image.

If you'd prefer to share privately you can send along to our Support Engineers here. 

Hi, Ashley... this is a file with the same image inserted in different ways
Left - same size as stage
Middle - Same as left but cropped in Storyline (this time looks ugly but other times, is correct)
Right - Same images, cropped in Photoshop.  The size of the figure is the same but is inserted a little bigger

The steps: inserting and cropping with the crop tool, nothing else

Regards!

Thanks Juanjo - I'm downloading now to take a look. 

Hi Juano,

These images all looked the same to me - I took a screenshot of them all together with the middle and right side one selected to show the bounding lines. I even cropped the one in the middle tighter and didn't see a change in how it looks. I also inserted the images you shared on a new slide, and they appeared the same there. I could also crop them and put them side by side with the original and no difference that I saw there either.

I'm on a Windows 8.1 set up in VMWare (on a retina display, although it's disabled in the Windows environment), with Storyline 2 Update 9. Here is how it looked for me:  

Are you seeing something different? Am I misunderstanding? 

Hi! Look at this... first screenshot is  from the editor, the 3 images seems to be fine. Second one is from the preview, look at the center and right image the artifacts is very visible. The third screenshot is from the browser preview (flash9, the artifacts is less visible but if you look closely you can notice them in the right image

As i told you, this has some kind of random. The center image is cropped and in other files, it looks fine but not in this one.

Thanks Juanjo for sharing the additional images - besides the sizing difference, I'm not sure I see a difference in terms of artifacts? The one on the right does look a bit "fuzzier" or something when looking at the bottom of the 3 in that image, but it's the same for all 3 separate instances of it? You mention it being random, but those are tricky to replicate and track down. If you're able to determine reproducible steps for it, I'd appreciate a screen recording and then would want you to open up a case with our Support Engineers. 

On occasion I've replaced the lower quality image published in the Storyline Output folder with a better quality version with the same name and dimensions.