Blurry Images in Preview and Published

Jun 12, 2017

I've noticed this for awhile, all of my images I insert into this Storyline 3 course appear quite blurry everywhere - on the Storyline development screens, when previewed and when published (either as HTML5 or Flash).

The images are all smaller than the maximum size, they are at 100% scaling, have no effects applied to them. My Publish settings is set to 100% quality.  I've tried bitmaps, pngs, jpgs, all identical blurry results.

I've searched these forums and seen a couple other threads on it , but never found a solution or real explanation for it. I can't send this course over to my client - it's embarrassingly bad. 

190 Replies
Stian Larsen

While waiting for Gary to reply, here are my reply :)

For me, both Preview and Chrome HTML5 publish is blurry.
Windows 10, 100% Scale (No scaling).
32" QHD monitor, native resolution (2560x1440).
Same issue for default 24" FHD Monitors.

Publish course as normal, using "Publish". Selecting LMS, and zipping. Uploading or running locally, same issues. Gerald, your support guy, have the same issues from a blank project at his end.

Works fine if viewing flash version, or if running in IE11. HTML5 in Chrome is blurry, and that's what our company defaults are. Chrome, with flash disabled.

The issue is related to all graphical elements. Images, shapes, text.

What do you mean by modern or classic player?

This happens to all files. New files, upgraded files. I have not yet seen a preview in SL3 that wasn't blurry. I have not yet seen a published course from SL3 in Chrome with HTML5 that was not blurry.

There are also several other issues. The canvas is jumping upon the first millisecond of loading each slide (in HTML5), so elements outside the frame will be visisble for a brief moment every time I load a new slide.

Ashley Terwilliger-Pollard

Thanks, Stian for sharing that here. I know that this issue must be incredibly frustrating and our team has your examples that you shared with Gerald to use as we continue investigating this. We'll let you know as soon as we can on it.

Also, the Modern player is a Storyline 360 feature (but if you're using Storyline 3 it does not apply). 

Gary Overgaard

Hi Ashley,
Sorry for the delayed reply. Had to put my videographer hat on for a few weeks and am just getting back in here today. Let me try to answer as many of your questions as I can.

When I first posted here, I had only tried opening an existing Storyline 2 piece in 360 and trying it out in Preview. I had not yet tried to see if a published piece would also be blurry because frankly, just blurry in Preview was enough of a showstopper for me, and decided to just continue my project in Storyline 2.  Having said that, I just tried opening that same piece in 360 again and publishing it this time. When playing back in both IE 11 and in Chrome, it displays the same amount of blurriness in Publish as I see in Preview. My scaling is at 100%.  I never use anything other than that. 

The level of blurriness that I see is not so much it's hard to read the text. It's a certain amount of softness to it that is similar to if you have ever changed the display resolution on your laptop's graphics adapter to something other than it's recommended setting. The result is certainly usable but not very pleasing to the eye. Definitely not crisp like in Storyline 2. And BTW, it is both images and text exhibiting that softness, although it is predictably more obvious on the text.

I would attach a capture of my preview to this message, but the piece I am working on is company confidential. Perhaps I can create a general example slide later to share. That test may also answer your question about upgraded vs new files as well. So far I have only tried the upgraded file and not a new one.



Stian Larsen

I did some more comparisons, and at least at my end I see what the issue is. But I have no way to fix it, as it's not a fault at my end.

When using screen-grab, and grabbing what I see at 100% in production, and compare it to preview, I see a 10% reduction in preview-size. This is why its getting blurry. It seems to be previewing in 90%, not 100%. Though, there is no setting to controll this.

I notice the exact same difference when I open a published course in Internet Explorer, and in Google Chrome. The Chrome version is 10% smaller, and thus blurry. I also notice the Chrome version have a thicker frame around the content, which might be the reason why the content scales down 10% to make room for this extra thick player-border.

I think this might be the issue. Gary, can you confirm if you have the same problem by using screen-grab and overlay/compare production and preview, to see if you're also seeing the 10% reduction in preview?

Stian Larsen

When inspecting the published code in Google Chrome, I notic there is scaling going on I have no idea why? See image. This scaling is not applied when running through Internet Explorer, and that's why it's not blurry in IE.

When removing all scaling being done, it displays fine, with normal thicknes border and no blurry view. So my issue is related to these parameters being applied during publish and probably during preview aswell.

Gary Overgaard


I definitely see the difference in the captures you just shared. I'm afraid that I cannot duplicate that scaling behavior on my end, at least on any of my published projects. In the project preview however, that window is definitely smaller than the published pieces running in both Chrome and in IE 11.

The text in this preview is definitely softer than in the published pieces. Plus the Storyline 360 preview text  is definitely softer compared to the Storyline 2 preview  text. That kind of annoys me when authoring but I can live with it as long as I know the published output will look OK.

One thing to be aware of is that on most of my projects the Story Size is 2047 x 1536. We do this because we author primarily for the iPad retina display and playback in AMP. I'm not sure if that large of a story size factors into the preview issue. But as I mentioned before, it was not an issue in Storyline 2.

Leslie McKerchie

Hello Teo,

Thanks for chiming in and letting us know that this has been an issue for you as well.

Are you experiencing an issue with a particular image and a particular project? It sounds like you may have been able to use the image in another project successfully?

We do have some best practices for working with images if you'd like to check it out here.

If you are only experiencing the issue in a specific project file and cannot replicate in another, I'd import the file into a new one and proceed.

If you need us to take a look at anything, please feel free to share the image file for us to take a look.

Miriam Larson

Any resolution to this issue? I am experiencing it as well. What I am running into is that I have had to use pictures of numbers because the numbered Storyline markers I WAS using are not keyboard accessible (meaning, the triggers I apply to them do not activate). The markers were nice and crisp looking but now the pictures of numbers that I've replaced them with are blurry. Would love to know when this will be resolved!

Matt Bassuk

I know this thread is old but I just wanted to say I am also experiencing this issue. The project looks crisp when editing but the html preview is blurry and the html published course is blurry when using Chrome 67 (64-bit). I'm using SL360 v3.24.17733.0. Same for both Modern and Classic player. This is a new project created with SL360. The project looks crisp in Microsoft Edge. 

Chrome 72 (32 bit) on a Chrome Tablet also looks crisp. So I'm wondering if it is just a (64 bit issue?) 

Ashley Terwilliger-Pollard

Hi Arika,

Are these images you've added directly to your Presenter slide or are they a part of a Quizmaker or Engage interaction? Also, what update of Studio 360 are you on? The latest is  Update 21.17757.0.

If you're able to share your Presenter package, I'd like to take a look! Here's how to create a Presenter package.

Ron Franks

Just to add to this, I'm running Windows at 100%, all of my images are always non-scaled in Storyline at 100% with no effects. I'm publishing in HTML5 only, in browsers at 100%.

IE11 is very blurry. That's the only browser we support for our training. I tested in the latest version of Firefox, including the ESO version. Both are blurry also. SWF files are being removed from all of our training this year, so that's not an option.

We purchased a few copies of Storyline hoping to buy more later this year for all of our training, but unless this is resolved I don't expect that will occur. This appears to have been an ongoing issue for at least a year or more, so I'm starting to not have much hope it will be resolved any time soon.

Crystal Horn

Hi there, Ron. It looks like your team is using Storyline 360. Are you using the classic or the modern player for your content?

We haven't had widespread reports of blurry images in Internet Explorer 11, so I'd like to have a look at an example project. With your permission, I'd like to take a look at your .story 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. 

Crystal Horn

Thanks for sharing the file, Ron. For everyone's benefit: I see an issue with PNG images being used as button fills in Internet Explorer and Chrome. In Internet Explorer, the image quality improved in a test file on my end when I simply used the image directly on the slide as a "button."

I'll keep you posted on any changes to that behavior!

Ron Franks

Something I have discovered is that in our original course had the ToC, glossary, and resources on the left side of the content area, which is 1024 x 720. The size of the player was 1400 x 736.

We have since removed that feature in the player so the size with the player is now only 1280 x 736. The older, wider version of the player displayed images much blurrier than the more narrow version.

It appears that you may be scaling down images to a certain size, then scaling them back up again, depending on the total player size.