Poor image quality in Storyline 360

Hey guys,

I have found a few threads on poor image quality of previous versions of Storyline, however the new 360 version has also very poor image quality when piblishing. Please see attached screenshot: original image in high resolution saved in png format, imported via Insert Image into Storyline (smaller size! should work fine!) and when published in HTML5 - you can see this low-quality soapy artifacts.

Please let me know where I can adjust image quality settings to avoid that. It seems not to matter how carefully original images are selected with a good quality -if the end result is poor. Please help!

Thank you!

106 Replies
Irina Poloubessov

Hi Anna,
I am sharing the original size PNG but with header only, (where artifacts happen , which I demonstrated in the previous screenshot-comparison in the post), as the rest of the image is confidential. Solving header trouble would probably solve all the rest anyway.
You are right, this happens in PNG images, also in Rise - something in rescale mechanism (bigger or smaller) destroys the PNG original quality.
Thank you very much!

Katie (Gokhshteyn) Riggio

Hi there, Irina! Really sorry you're seeing that blurriness in the HTML5 output – I'm happy to lend a hand as well!

I downloaded the PNG above, then hit Insert > Picture > Picture from file in the latest version of Storyline 360. I then published the slide with that image to web. Here's the published HTML5 output here. I wasn't able to reproduce any blurriness in the Flash/HTML5 outputs when in the latest versions of Chrome, Edge, Safari, and IE11. Can you share a little more detail on your publishing flow and if you see this issue in a particular browser?

I'll be standing by – and if I missed anything in my testing, please let me know!

Irina Poloubessov

Dear Katie,
Thank you very much for you help!
I am publishing with full-size no-player, fit-to browser option.  This is how it looks in a screenshot from browser (private info blurred. the size of the original image would be enough to see the title without artifacts). I am using latest version of Chrome.
Within the player the image is much smaller so probably it works smoother, but my original PNG has enough resolution to be displayed in a normal quality. I also work with Insert -> Picture -> Picture from file.
Many thanks!

Irina Poloubessov

Dear Katie,
Unfortunately even when inserting image from file, in the Storyline 360 editor, I get already much more blurred look! Please see the fragment of original image and the image in storyline editor.
In the player it looks even worse!
The original image is large enough (you can see the size screenshot). It would be great to fix this issue as this compromises a lot the course quality.

Katie (Gokhshteyn) Riggio

Hi, Irina! Really appreciate you sharing these examples with us, as it helps our team during their testing.

I can see the loss of quality there and have added these samples to the report. Our team is still working on this issue, and we'll let you know as soon as it's resolved. Thanks for staying tuned, and we're here if you need anything else in the meantime!

Katie (Gokhshteyn) Riggio

Hi again, Irina! I've been thinking about this discussion and wanted to circle back, as I think there are two separate issues happening here.

First issue: Storyline's HTML5 output may appear blurry in Chrome. Thanks again for staying tuned, our team is still investigating this and you're definitely in the right place for updates once we have them! ☺️

Second issue: Blurriness within Storyline–specifically when in Edit and Preview mode. I'm not seeing any reported issues of this, so I'd like to dig deeper. Can I confirm what version of Storyline 360 you're using, and did the blurriness there recently begin?

I know how frustrating this can be for a course author, as the goal is to have high-quality work–both visually and contextually. Appreciate you working with us, and we'll be here!

Irina Poloubessov

Dear Katie,

Thank you very much for your help and answer, I really appreciate your Support!

I do not see the version number on storyline 360 when I just open it but I assume am using the latest one because I update the momoent the notification of updates appears.
I confirtm than inside the Editor the blurriness Comes when I Import the Image .
Many thanks!

David Tait

I believe that when Storyline publishes a course all images are output at a resolution of 96ppi. If you use images that are 72ppi then those images will be upsampled to 96ppi resulting in a degredation in quality. I don't see a way around this if you have no way to control the resolution of your source images.

How are you creating your screenshots? Is it not possible to run these through Photoshop (or similar) to set the dimensions and pixel resolution prior to inserting them in to Storyline?

Phil Mayor

As David says they are all processed on published using png crush.

Really with screenshots you should not reduce the size because they capture absolute pixels so look awful when shrunk. 

I did have a look at your image when you originally posted this and Photoshop showed it was already 96PPI which I guess rules out the resampling.

 

Patrick Schmid

I'm having the same issue, screenshots always look blurry. I've tried out alot with different sizes and formats, but I cannot manage to get one that looks sharp and crisp, neither in Storyline 360 itself, nor in the output.

I tried taking them on my regular desktop monitor (1.920x1.200) as well as on my surface tablet (2.736x1.824), I've tried setting the surface (that is regularly at 200% scaling) to 100% and 300%, but nonetheless all look the like one in Irina's example. As I'm working with lots of screenshots, this is really bothering me.

Yael Blumenfeld

This happens to me as well, even with the built in characters. I'm using 360, so far I tried it on Chrome.

I'm attaching a screenshot oh how the characters appear in the editing environment and how they appear in the published course.

Thanks

Leslie McKerchie

Hi Irina,

I've opened up a case on your behalf regarding the blurriness that you are seeing within the software, even prior to publishing, as I want our support engineers to take a look.

I shared your thoughts, images, and created a sample file on your behalf.

You should be hearing from someone soon.