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!
- KatelinJordan-2Community Member
Also, make sure you are boosting the image quality to custom levels when you publish if you have any issues with your images. And, hopefully, everyone is using HDMI as opposed to VGA (better image quality).
- yoannkervella-7Community Member
Hello everyone,
Since 1 year, we carefully follow the discussion opened by Irina. Our society Alcatel-Lucent Enterprise chose Articulate to provide training to its customers. We encountered exactly the same problems as they were identified in this discussion.
I think that all the considerations around formats and resolutions aren’t enough for a correct output in HTML5. We can’t afford touching up element by element, because we produce large quantity content that constantly evolve and are dedicated to Rapid Learning. Designers work in PowerPoint and use Articulate Presenter (Studio). Unfortunately, the problem is the same as the one encountered in the Storyline. Images, screenshots, etc. are blurry despites a source of good quality.
You have identified these problems. The problem is not just under Chrome. A person from Articulate trained us one year ago and confirmed that technicians were working on this problem. It is useless for us to give you examples. I think you have exhausted enough throughout this discussion.
We are satisfied with the various tools of the suite but we can't take full advantage of our HTML5 output. With Flash our customers used to an irreproachable rendering. Our customers bring us complaints about the quality of our courses.
Do you have new ?
Thank you so much.
Best regards
Yoann
- BENOITGUILLOCommunity Member
Hello,
My client (EIFFAGE) made a lot of 96ppp screenshots that are blurred when imported in SL360. And it's even blurred when seen in chrome (despite release 3.26.18364.0). I've been working for a long time with SL and it's now a big issue for us as our clients require high quality for professional courses. Please help us !
- BENOITGUILLOCommunity Member
Hello Leslie,
Thank you for your answer. I've send (and mentioned your name) all files privately : storyline, screenshots and hope you will find a solution that could help all of us.
My client made good screenshots. The problem is not here. The problem remains while integrating screenshots in SL360.
The fact is that when we integrate screenshots in SL360, whatever the size it is, SL360 fits it to the screen size's project. And it comes blurry. Then when trying to reset original screenshot and size, blurry aspect remains.
Thank you for your attention
Thanks, Benoit.
I received your file and replied to you via e-mail in your support case :)
- ThomasFenner-f7Community Member
I find it sad, frustrating, and just plain dumb that this is still an issue. I added my own experience with poor image quality to this thread over three years ago and I'm still getting emails with new comments posted to this thread because this is still a problem. Three years! And, Articulate staff are still asking people to send in their individual files. C'mon, Articulate, that's really just insulting at this point.
Hi all!
I am jumping into this discussion to share that we just released Storyline 360 (Build 3.63.27628.0) which includes changes to how images are handled.
Fixed: We improved how Storyline 360 handles images during import and in the published output, resulting in crisper images.
Now all you need to do is update Storyline 360 in your Articulate 360 desktop app!
If you have additional questions, don't hesitate to reach out in this discussion or in a support case.
- AnnaLiuCommunity Member
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.
- IrinaPoloubessoCommunity Member
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!
- IrinaPoloubessoCommunity Member
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!