All vector files import as fuzzy in Storyline 360?

Jan 24, 2017

PNG, EMF, WMF, even resorted to trying the TIFF...all import as fuzzy or noticeably lossy in Storyline (Storyline 360).

Note 1/24/17 - This problem is persisting among all vector as well as raster images that Storyline can import; I've tried them all. And in all browsers, whether accessing the HTML or the Flash version after publication. Please provide a solution, thank you. This issue goes to the core of what I acquired Storyline for == to publish crisp, professional-looking modules.

 

 

25 Replies
Ashley Terwilliger-Pollard

Hi Adam,

I saw you linked back to a few much older discussions about the issues with vector graphics, specifically this one.  It's a long one, but there is a good amount of discussion there in terms of how to properly export from your image creation tool and use within Storyline (1 and 2 specifically).  Overall we recommend adhering to the general guidelines here for using images and media in your projects.  You'll also notice in our comparison chart that images aren't vectored in a zoom region. 

With all that being said, what Alyssa noted in terms of the HTML5 output being a bit blurrier is something we've seen recently with Storyline 360 and our team is investigating. I know that it seems Edge and Firefox are working better with this than Chrome, so if you're able to share a copy of your course with our Support Engineers that'll help us narrow down the issue further and weigh in on any specifics about your images. 

C. Ferguson

Hi Alyssa, I've tried all vector images types that Storyline will import, and all raster types as well. I've adjusted the Quality Publishing controls in both Storyline, as well as in my drawing app Adobe Illustrator. Files in Illustrator are crisp, once imported to Storyline they are fuzzy along all file types on the stage, in Preview, and after publication.

I've attached two examples for comparison. One is the crisp "pre-Storyline" image, and the second is the image after being imported into Storyline. You can see in the latter there is a word "Measurement" in the upper-left hand corner that is crisp; this is because it is the only element I created in Storyline. The imports were degraded.

I've tried Firefox, IE (post-10), Safari, and Chrome. Chrome is the worst, the others are not presentable either.

Fix needed on this issue. Thank you for any practical feedback or solutions that you and your team may have to share. I am seeing this issue discussed in blogs throughout eLearning Heroes and elsewhere on the internet, and seeing examples of this as far back as four years ago. Not to be cruel, but I don't know how anyone is relying on Storyline if this is persisting. It goes to the core of what the application is for.

No offense intended, I hope these details are helpful for your business and for finding a resolution. Thank you.

NOTE - the off-center red text in the second image is due to a misalignment here. I was able to resolve that in 2 seconds. The blurriness persists.

A

Alyssa Gomez

I hear your frustration, Adam, and I appreciate you for persisting on this issue. We are aware that Storyline 360 renders blurry images in Chrome when content is viewed with HTML5, and our Quality Assurance team is monitoring the way this issue impacts our customers and figuring out how a change here might fit in with other priorities. I'll be sure to share your experience with the team and include this discussion thread in the report.

Are you able to see a marked difference in image quality when comparing the Flash output and the HTML5 output? At this point the only workaround I can offer is to use Flash instead of HTML5.

C. Ferguson

Hi Alyssa, please note that the issue is not only in Chrome. It happens in at least Firefox, IE, and Safari as well. Also, the image degrades noticeably simply upon import onto the stage, then gets worse in Preview as well as upon Publication. So it does not appear to be a browser-based issue. I'm also sure you guys are not sitting around ignoring all of us, and so thank you for your persistence as well.

C. Ferguson

Update - the best workaround (until a fix is provided) that I've found is to open the published Story_flash file, and not the other provided options. And in Firefox. There is still fuzziness however. Sharp image is lacking unfortunately. But it is less than opening in HTML5 or with another browser.

Also tried importing images at calculated sizes. So no resizing in Storyline. That did not abate the issue either.

If you anyone else has any tips, I'm always all ears. I'd like to work with sharp images and that just doesn't seem to be in the cards with the intel I have at present.

Chris Bloom

Hey there, 

I'm seeing a similar problem when I'm publishing through Articulate Studio. (I'm guessing it has the same compression method as Storyline). I've upped the image quality to 100%, but it doesn't seem to have much effect. Even the text I use on the slide titles (nothing special in the font - just Arial at 32 pt) is fuzzy. 

Any ideas on how to resolve this? The low quality makes the presentation look bad.

Alyssa Gomez

Hi there Chris!

It sounds like you're seeing blurry text and images when viewing a published Studio file, is that correct? Can you help me with a few more questions?

  • What version of Studio are you using?
  • Did you publish the file for Web or LMS?
  • Where did you host the published output before you tested it?

Also, if you could share your Articulate Package with me, that would be really helpful. Here's how!

Chris Bloom

Hi Alyssa!

I'm using Studio '13. I published for LMS, and also published directly to AO. Here's what I'm finding...

The file has an included video in one of the slides. Sometimes, the player controls appear as an overlay on the bottom of the screen (which appears on hover), and other times it's a permanent set of controls directly under the screen. 

Sometimes, one type will open up over the other. I understand that the overlay controls means I opened the HTML 5 file, while the permanent controls are the Flash version. It's the HTML 5 version where I'm finding that the text and images aren't as crisp. The Flash version looks much better. 

I just republished an LMS version for you to view. :-) 

Thanks!

 

 

 

 

 

Alyssa Gomez

Hi Chris,

Thanks for the published zip file! I uploaded it to SCORM Cloud here and tested it on an iPad to force the HTML5 content, and sure enough I did see blurry text and images like you described. Fortunately, as long as your learners are viewing the course in a Flash-enabled browser, they'll see the Flash version instead of the HTML5 version.

I'll take this issue to my team, and we'll determine next steps. Depending on priority and risk, some bugs can be fixed very quickly, while other bugs take longer to resolve. I’ll let you know as soon as we have an update. Thanks so much again for letting us know about this, and I’m sorry if it’s causing you headaches.

Leslie McKerchie

Hello Naeem and welcome to E-Learning Heroes :)

We do have the original issue shared here filed with our team.

I wanted to share some information on how we define bugs and how we tackle them when they occur. That being said, if you could share your Articulate Package for us to take a look at, that would be helpful.

Jeff Redinger

Hi Everyone,

This may be a resolution for this concern if not already mentioned.

I too was experiencing pixelated or degraded vector images in Storyline 360. This occurred when creating something even as simple as a circle or oval in Illustrator then copying and pasting the vector shape into Storyline 360 (newest version). This also happened when importing the image as a PNG which was exported from Illustrator.

My Workaround:
I copied the vector path or shape in Illustrator and pasted it into a new Photoshop document. Then select 'Save for Web'. Settings were set to 'PNG-24', 'Transparency' checked, 'Interlaced'checked, Image Size 100%. Quality set to 'Bicubic Sharper'. Then select Save.

When the exported PNG image was imported into Storyline 360 it was thankfully crisp as can be.

Not sure if this helps but worth a try.

Presuming this could work for photos or rasterized images also but I have yet to test this.

Ken Thomas

Zoinks, that sounds like a lot of work, so thanks for discovering it and sharing it.

As for Articulate, I'm seeing 2 years of "we're aware of it, we're monitoring it, and we're working on it" with no solution... from a user's perspective, this is really not acceptable.  I do a lot of screen captures, and our users should believe they're working in the live system, and this is difficult to achieve with fuzzy images.