Forum Discussion
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!
135 Replies
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,
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.
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.
