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!

100 Replies
Syta Fokkema

Hello Leslie (and other heroes),

Has there been a solution to this issue yet? I am still experiencing the same problem with images and video, and am not always able to ask for 96dpi imagery as I use existing content.

Also, my record-screen of a movie within Articulate is incredibly poor quality which makes it hard to make a demo. Is that to do with the same issue?

Love to hear an update! 

ps. cant share confidential client file, sorry

Crystal Horn

Hi there Syta.  The issue with blurry images in Chrome is still open with our team.  It has a high priority and is being addressed, and I apologize for the issues you're seeing in your current courses.

These are our best practices for recording high quality screencasts in Storyline.  We'd be happy to help you one-on-one to make sure your recordings are coming out the way you'd like!

Syta Fokkema

Thanks so much Crystal for the quick reply and tips with regards to screencasts, I can definitely use that. 

I've come accoss a number of ways to retain image quality in this thread and am trying to find a summary/overview of best practises (for the time being). Is the below article the most up to date one to go to for best practices on image quality? If so, maybe pin that to the top of the thread?  

https://articulate.com/support/article/Storyline-360-Best-Practices-for-High-Quality-Images-and-Videos

Thanks again. 

Irina Poloubessov

Dear Leslie,
When I do the same steps to insert an image in microsoft PPT (be it a copy-paste from a screenshot, or inserting from the file) - I do not experience any problem with the image quality. However the same steps in SL make an image look as a disaster :(
I attach again the fragments, could you please escalate it with your development team for more urgent care? We cannot show our materials like that to our customers :(
I am aware of not resizing the image in SL, but it happens before I touch it even - merely by any insertion method.

Ashley Terwilliger

Hi Irina,

Thanks for sharing all those images. It looks like in your comparison files even, one is sized slightly larger than the other? I also saw that you're having a similar discussion here with Alyssa and I'd agree with her ideas to test the Classic player. It looks like the scaling that's occurring within the modern player to fit your browser/screen size may be impacting the overall quality. 

Let's keep the discussion going in that forum page, or if you'd prefer to take it out of ELH our Support Team is standing by! 

Irina Poloubessov

Dear Ashley,

I do use classic player, and unfortunately support says they cannot replicate the issue, leaving me with evidences on my hands quite helpless.
Inspite of the 100% image qualit y setting, chosen for publishing in SL, you can see the low-quality JPEG artifacts on the SL fragment, compared with PPT (which , though not perfectly-crisp, at least does not insert the artifacts)

yoann kervella

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

BENOIT GUILLO

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 !

Leslie McKerchie

Hi Benoit,

Thanks for reaching out and letting us know that your client is running into some blurriness despite being on the latest update to Storyline 360.

We have some guidelines for high-quality images and videos that can be found here.

I'm curious if the image was scaling up or down as that may be the cause of the blurriness.

With your permission, I'd like to take a look at your project file to investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

BENOIT GUILLO

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

Patrick Schmid

If you come to any solution it would be great if you posted that publicly, so everyone here can profit.

I pretty much agree with Benoit that the automatic resizing of images when importing them to Storyline is the main problem here, not a bug that might or might not cause images to appear blurry in chrome.

BENOIT GUILLO

Hello Patrick,

Sure, and whatever we will conclude, we will share. But first we have to check precisely what's wrong because I could also have made a mistake. We are now comparing original screenshot VS released integrated screenshot seen by users VS screenshot stored in the mobile folder's SL release.

Crystal Horn

Hi Luis! I opened a priority support case for you since you are an Articulate 360 Teams member. You should receive a confirmation email that includes an upload link. Feel free to share your .story file and any image source files as examples so we can test. We'll delete your files when we're done troubleshooting. Thanks!

BENOIT GUILLO

Hello everybody, problem solved in my case.

I've faced the same problem : screenshot integrated that comes blurry whereas the original screenshot's sharpness is perfect.

Articulate support suggested the first two actions :

  1. Uninstalling SL360 and reinstalling it. Before reinstalling SL, I had to install an update of the installer today.
  2. Changing the player from modern to classic and setting (other) to "Lock the player at optimal size" (which is not possible with the modern player)
  3. Then I deleted the last screenshot in the slide
  4. At last, I reinserted the original screenshot from SL360 > insert image > from folder > etc.

In my case, it solved the problem (as you can note on the screenshot attached).

I must thank Leslie Mackerchie and Cleo Sinues who never let me down and responded within 24h to all of my mail posts while we were trying to identify the roots of the problem.

Hope it will help you guys.

Alyssa Gomez

Hi Nancee!

You might find that an image appears blurry if the Slide Size is very different than the image dimensions. 

Check out our recommendations for working with high-quality images in this article: Best Practices for High-Quality Images and Videos

yoann kervella


Hi Alyssa,

I made a case and I had a work around that addresses the problems of blur. In my side it is a question of locking the reader to the optimal size: 1080X720. On the other hand according to the user resolutions there can be scrolling. I think the patch has also improved rendering in Chrome. I continue to follow this post because I was told that Articulate's teams were working on these topics. Thanks