Blurry Images in Preview and Published

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). 

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.

Thanks....Gary

Hi Gary,

Thanks for offering to create an example file--that would be really helpful! That way we can compare what you're seeing in Edit mode to what you're seeing in Preview and after publishing. We'll be here when you're ready to share it!

I've noticed the preview window is a few pixels smaller than the actuall size, and that might be the reason I see blurry previews. There is no way for me to adjust this though... I'm updating the support ticket.

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?

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.

Thanks for sharing that additional information, Stian.  I see that Gerald added it to our documentation of the issue so we can keep working with our engineers on it.

Stian,

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.

Hi all. I am also still having issues with the pictures showing blurry in the preview and published. I'm working in SL360 and am the problem shows up for all player options. I also updated the picture setting when publishing. Any idea how to fix it??

Thank you

FYI - I have opened a case for this. :)

Hi Anika! 

Thanks for sharing your files with us. My colleague Christopher is already testing what you've shared, so you should hear back from him soon!

I am having the same issue. There is no way I c an make pictures look normal. The weird part is whenever I use the same pictures at random other projects they work normally.

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.

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!

Hey Miriam.  We don't have a resolution just yet.  Our team is still working on it, and we'll give you new information here!

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?) 

Hi there, Matt.  Thanks for that distinction.  I'll add it to our report of this issue to make sure the bit question is on our radar.

Hi Katie,

May I check if there is an update for Studio/Presenter too? I am still facing the blurry image issue with Chrome when publishing using presenter. Appreciate your response.

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.

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.

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. 

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!

Thanks for checking. I'm not sure why the image on 1.2 was blurry though.

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.