Poor image quality in Storyline 360

Hi Irina,

Good day! I've removed my initial reply as the compression adjustment is only applicable to JPG images and won't have any effect on PNG. Will it be okay if you share the actual PNG file you are using so we can have a closer look?

Thank you.

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!

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!

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!

Thanks for the extra detail, Irina!  ☺️

That really helps, and I've included your experience in the associated report. Our team is investigating the issue where Storyline's HTML5 output may appear blurry in Chrome, and we'll keep you posted here once we have any additional updates!

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.

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!

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!

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!

I always recommend creating your images at 96ppi resolution to ensure they display properly in Storyline courses. I'm yet to have a problem with this method.

Also, are your images being scaled above 100% in Storyline?

Thank you David,

we use a lot of software screenshots which are by default 72 dpi. For custom-created Images of course it is controllable.

And we do not scale Images, however I am not sure that Storyline does not resize Images when importing, such as adjusting them to slide.

This may well be your problem then. Do you notice the same blurriness when using custom images at 96ppi?

Thanks, Irina!

David brings up a really great point there. I'm also curious to know if the blur occurs with images at the recommended 96 DPI (or 100% for Windows 10). 

Dear Katie and David,

The relevant to me use case is the 72 dpi since we will continue working with the screenshots.
Unfortunatley I cannot generate a test for you with the 96 dpi , which would still answer our requirements.

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?

Oh, I did not know that, thank you!
I guess this means I will have to shrink our screenshot to produce smaller Images with 96ppi from the ones with 72 ppi or post-product each and any of them with photoshop scaling algorithms...

Thank you very much for the great tips! :)

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.

Thank you Phil,
Hm, then if it's 96 already it does not seem that there is much I can do. Hopefully it will be resolved within the Storyline.

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.

Hi Patrick,

As we continue investigating these reports, any examples are helpful for our team.

Would you be able to share your .story file and some sample images with our team here?

Hi there Leslie,

I'm also in the same club. I've attached some files. I use Storyline 360. The image gets blurry before I even publish.

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

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. 

Hey Nompumelelo,

Thanks for sharing your image and your sample .story file.

I've opened a support case on your behalf as well so that our team can take a closer look.

You should be hearing from someone soon.