Poor image quality in SL2 and poor video quality in SL3

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.

23 Replies
Leslie McKerchie

Hello Suresh and welcome to E-Learning Heroes!

Let's see if I can help a bit. 

Regarding Storyline 2, you mentioned:

  • 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

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:

  • 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

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.

Suresh Nambiar

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:

  • Display at user’s current browser size
  • Scale player to fill browser window

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!

 

Suresh Nambiar

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.

Suresh Nambiar

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!

Leslie McKerchie

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.

Pam Pappenheim

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.

Claudia Medina

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

Claudia Medina

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.

Claudia Medina

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.

Crystal Horn

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.