Fuzzy Images

Nov 18, 2013

I am finding that images degrade significantly when inserted into a course. I have compared images that were on slides imported from PowerPoint and images that were inserted (with different format: JPEG, PNG, etc.) directly into Storyline and there still is a significant degradation in quality. This is especially problematic since most of the images contain text that is noticeably blurry.

We have set up PowerPoint to not compress images but that only makes a slight difference when the slides are imported into Storyline.

Are there any work-arounds or other methods to make sure image clarity is not lost in Storyline?

Thank you!

45 Replies
Ashley Terwilliger-Pollard

Hi Glenn,

I checked in on your case and saw that Miker was able to see it the behavior. Miker shared the following:

The issue appears to be specific to the following combination: 

1. A certain font (in this instance Arial Narrow), 
2. the HTML5 output, and 
3. Google Chrome. 

As you've noted, the workaround appears to be using a different font. Calibri appears to work correctly in the published output. 

He has also reported this to our team as a possible software bug, so we'll meet with them to figure out next steps.

Thanks again for your patience while we tested this out, and we'll share additional information with you once it's available.

Glenn Hopper

Hi Ashley,

Thanks for the continued followup!

I updated Chrome as you suggested. And my missing "i's" returned. Checking deeper, after Miker had explained that the hardware acceleration feature in version 59 was a default I should turn off, I checked its setting after the update to v.60 - it was still off.

1) The Chrome update does not effect that setting.

2) I set the switch for hardware acceleration back to on (as would be the default).

3) The "i's" were still good.

So, v.60 - regardless of the default setting for hardware acceleration seems to solve "The Mystery of the Disappearing Lowercase i's"... !

Thanks again for all your help everyone!

Heinee Hinrichsen

I just received another complaint from a client that the images were coming up fuzzy. This happens whenever I lay an image inside of a shape. Insert > Shape > Format Shape > Fill > Picture Fill. I have done all that the support staff has asked for a clean and crisp picture. I have all of my compression settings set to maximum. I have the image set to the same size as the shape. This is easy. No matter what the size my image is, it should come up clean. No compressing, no degradation or fuzziness. How long before this bug gets fixed? This thread is 3 years old.

Katie Riggio

Hello Heinee, 

Thank you for sharing what's going on. I appreciate you trying those steps, and I'm happy to look into the image quality!

First, we have these best practices for working with media in Storyline: Best Practices for High-Quality Media 📌

For the best guidance, could you help me confirm these details?

  • What file format are the graphics in (.png, .jpg)?
  • What browser(s) is your client using to view the content?
  • Can you share one of the files with us to test? You can use this secure upload link.
jason watts

Just adding onto Heinee complaint as well.  

Having the same issue of images uploaded to Storyline or imported in through the PowerPoint slides are coming out blurry.  This is even present with stock images available through the program.  

Here are the answers to your three questions above:

1.  The image is a .jpg (Sized: 1920x1080 @72DPI)

2. We have tried using Safari, Chrome and Firefox

On export, the image quality is set to the highest.  Looking for guidance on this one as well.  Seems to be a on-going issue.

Lauren Connelly

Hi Jason!

Thank you for those details! It sounds like it doesn't matter where the images are imported from, they're still blurry in the published output. 

What Story Size are you using? Have you resized the images on the slide?

It would be helpful to see the affected file. Would you mind sending it over to us? If so, here's a secure upload link. We'll take a look and share our findings with you!

Heinee Hinrichsen

People are still replying to this thread and it marks the replies as "almost 3 years ago". I just received 2 email messages regarding this thread so I am still getting updates on it but the comments are coming in here as old. Also. Its been 3 years and you are still receiving suggestions to fix this issue. When do you think it will get fixed, if it hasn't already?

 

Cassaundra Adams-Murphy

same issue here... i have been working with Storyline for years and this is my biggest complaint. We have tried everything. My team does simulation training using Storyline, so we have the same issue with videos... even those published using Replay. 

Any help/fix would be greatly appreciated. 

Math Notermans

Blurry look and feel on system and/or simulation training is due to scaling. If you have a small 1 pixel line-image and scale that up then it always will look blurry. So to ensure system and simulation training to look good...you have to make sure you do not scale...and display the content at 100% scale ( scaling down...you can do, but that might cause lines to disappear )

The Modern Storyline player scales your content up.  The Classic doesnot perse.. so your best bet is use the Classic player and ensure all content is used at 100%.

Math Notermans

You can use SVG images. Import it from Powerpoint and you can. Its not the best and easiest workflow, but it is possible. Allthough for making a system simulation it really is too much trouble in my opinion. Most system will look pixelated too if you scale your browser view up above 100%. For system simulations my advice is...keep it as much alike to the original.

YDH Central Counties

That is not a solution, it's a work-around. And when it does work, it simply converts the image to a group of Freeform Shapes, and even still it does not work for complex vector graphics and completely loses outlines on paths. As Articulate generates HTML5, I don't understand why they can't simply treat SVGs in the same way we do in a browser, as an img or a figure. It would solve this very solvable problem. Fix your software, Articulate.

Leslie McKerchie

Hello everyone!

If you're following along and looking for sharp images, I've got great news for you! We just released another update for Articulate 360 and included a few important fixes you'll see in the release notes.

The item you'll be interested in is:

New: Import scalable vector graphics (SVGs) to Storyline 360 so images stay sharp when learners zoom in and out.

Just launch the Articulate 360 desktop app on your computer and click the Update button for Storyline 360. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly.