Poor image quality in SL2 and poor video quality in SL3
Oct 25, 2017
Hello,
We are developing simulation-based courses for our client and are using a lot of images in videos. The authoring tool is Storyline 2.
When we shared the published output with our client, the client raised issues regarding the poor image quality. The images are not looking crisp and sharp. The client tested the HTML5 version of the courses on IE, Firefox, and Chrome. On Chrome, the quality of the images are worst and not at all acceptable per client.
We then advised the client to run these courses by enabling the Flash player. But since there will not be any support for Flash going forward, the client would like to run only the HTML5 version.
To resolve this poor image quality problem, we published the output from SL3. But here the problem is with the poor quality of videos. As per client, the video quality is better in SL2 than SL3.
Now we are in a catch 22 situation. If we publish the course from SL2, the image quality is suffering. And if we publish the course from SL3, the video quality is suffering.
Here is some testing analysis for images and videos. Flash was disabled for all testing:
HTML5 output from Storyline 3: IE11 (Flash disabled), Best quality, Text and images are crisp, screenshots are the neatest, very poor (unacceptable ) video quality
HTML5 output from Storyline 3: Chrome (Flash disabled), Lower quality than IE11 with SL3, Text and images are readable but more fuzzy, screenshots are more fuzzy very, poor (unacceptable ) video quality
HTML5 output from Storyline 3: Firefox (Flash disabled) Quality comparable to IE11, very poor (unacceptable ) video quality
HTML5 output from Storyline 2: IE11 (Flash disabled), Unacceptable image quality - Lower quality than Chrome with SL3
HTML5 output from Storyline 2: Chrome (Flash disabled), Unacceptable image quality - About the same as IE11 with SL2
HTML5 output from Storyline 2: Firefox (Flash disabled) Unacceptable image quality - About the same as IE11 with SL2
Note: We have used Tiny PNG to compress the source images, but while publishing the output from SL, we have used the maximum quality.
Can you tell me how we can resolve this problem?
I'll not be able to upload the files due to privacy problem.
25 Replies
Hello Suresh and welcome to E-Learning Heroes!
Let's see if I can help a bit.
Regarding Storyline 2, you mentioned:
As you can see in this article, our supported HTML5 viewing is:
Windows: Google Chrome (latest version)
Mac: Safari 7 and later, Google Chrome (latest version)
Mobile: Safari in Apple iOS 7 and later, Google Chrome (latest version) in Android OS 4.1 and later
So, I'm curious as to what version of Chrome you are using?
Regarding Storyline 3, you mentioned:
As you can see in this article, our supported HTML5 viewing is:
Windows: Internet Explorer 10 or later, Microsoft Edge (latest version), Google Chrome (latest version), Firefox (latest version)
Mac: Safari (latest version), Google Chrome (latest version), Firefox (latest version)
Mobile: Safari in Apple iOS 8 or later, Google Chrome in Apple iOS 8 or later, Google Chrome in Android OS 4.1 or later
So, you mentioned IE11, but what version of Chrome and Firefox is being used?
I'm not familiar with Tiny PNG that you mention for image compression. Have you tried to use images/videos without using this process first?
We have some best practices that you can read about here. Curious if you have the player scaling as that certainly causes an issue with quality.
If you're able to share even a sample .story slide, even with some dummy content, that would be helpful.
You can also share privately with our team here if that would be best.
SL2 use poor jpg compression, i have manually replaced images in ouput in some really bad looking cases, sadly it have to be in its jpg format, Its bugle my mind that they still dont export story_contente images as png.
Hi Leslie!
Thank you for responding back to my issue.
As we are using more than 100 images in the project and each image having approximately 1MB file size, we have no other option but to compress the images before importing them into the storyline. If we use the images as is, then the size of the project file will be huge and it will cause a lot of loading issues.
Currently, we have used the following settings:
I have asked my client for a permission to share the sample .story file. As soon as I hear, I'll update this thread.
Thanks again!
Hi Leslie,
I forgot to tell you that the client is using latest version of Chrome and FF.
Thanks Suresh! I'd test locking the player at optimal size to see if that helps as well. Scaling can certainly cause issues with quality. Just share the file with our team here when you get permission. Even just a sample would be helpful.
Thanks again, Leslie!
We will definitely explore this option and will let you know our findings.
Hi Leslie,
I have shared the test package with your support team and here is the ticket# 01159739. The source file is from SL2. I am looking forward to your guidance how to improve the quality of the images and videos in HTML5 published output.
Also, we tried the option of locking the player at optimal size, but unfortunately it didn't solve our purpose.
Thanks Suresh!
You should be hearing from someone soon.
Hi Leslie,
Any update on my ticket# 01159739?
Hey Suresh :) Looks like you got a reply from Vevette and you have replied as well, so looks like you are right on track :)
Hi Leslie,
Yes, I have received couple of replies from Vivette, and I have requested her to share another sample file with the following publish settings:
Browser size - Display at user's current browser size
Player size - Scale player to fill browser window
I want to check how the images appear on the screen and compare it with previous two samples that she had shared.
Thanks!
Thanks for keeping me up to speed Suresh :)
Was there any resolution to this?
Hey Jeff,
I just responded to a post of yours here, which sounds like a similar issue you may be having.
I do see that the blurry images was reported to our team as a possible issue, so hopefully taking a look at your file and understanding what you are experiencing will allow us to help you out in your original thread.
I am having the same problem with video quality. It is perfect in Review and perfect when I publish it as a video using Replay. However, once I bring it into Storyline360, the quality diminishes radically. Was there any resolution I could try other than those mentioned above which I have already done?
Thanks.
Hi Pam,
There isn't any permanent solution from Storyline.
Hi Pam,
We are still tracking any reports of blurriness/quality within Chrome once the content is published.
Is this what you are experiencing as well?
Dear Leslie,
I am using SL3 to create simulations of software applications, and I am experiencing the same problem that some developers reported in this thread. When we publish the simulations we see blurriness/quality issues within Chrome 37.0.+ It works a little better with Internet Explorer 11, but not completely well.
I tested our eLearning course including snapshots in JPG and GIF instead of PNG, which helped a little bit when the course is launched in Internet Explorer.
The challenge for us is that we are demoing simulations in view and try by recording the software. Is there any setup that could help us addressed this issue?
By the way, my player is already set to optimal viewing.
Thanks
Claudia
Hi Claudia! Thanks for reaching out!
Storyline 3 is supported in the latest version of Chrome -- your version 37 is certainly an older version!
I'd be curious to test your course in Chrome 71, which is the most current version. Would you mind sharing a few sample slides so we can take a closer look?
Dear Alyssa,
I will ask the IT admin to install the newer version and I will let you know. In the meantime I tried to have the same ratio of 4:3 for the Story Slide and the Recording window, and the images are better.
Thanks
Claudia
Dear Alyssa,
I attached two snapshots of a recording done in 1200 x 900. (4:3) The slide size is 720 x 540. The recording does not look good enough for us. We used Articulate Storyline 2 in my company and our courses looked better. We are trying to work with SL3, but our team is not happy with this quality.
I have to finish a course in early January, please let me know how to improve the recordings.
The snapshots show the recording displayed in Explorer 11.+. I cannot get Chrome 71 at this point.
Dear Leslie,
I have recorded a course using SL3 in IE 11 + with Flash disabled. I attached the images here.
Our team is not happy with this. I recorded using 1200 x 900 (4:3) and my slide size is 720 x 540. My PC has a default resolution for text which is Medium 125%. . I need to improve the quality next week to record the course.
Please let me know whether you can help me.
Hi there, Claudia! Thanks for those details. It sounds like you're recording at a resolution a bit higher than your slide size. When possible, we suggest to have your slide size match your recording resolution as much as possible to avoid shrinking (or stretching) your recording, which can cause blurriness. Check out this article for some helpful tips on getting high quality screencasts in Storyline.
If you can increase your slide size, that'll be the best bet for getting the best output for your screen recordings.
it looks like this issue wasn't resolved as I am experiencing the same problem... blurry screen captures, while ppt sharp the scorm blurry. used highest quality publishing configuration...
Hi Ron!
We're happy to troubleshoot this issue with you! Would you mind if we took a look at your project file to determine the fix? Here's a secure upload link.