Blurry Images in Preview and Published

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. 

189 Replies
SAURAV KUMAR

Recently, I also get the same issue and I tried a lot to fix it. Only solution I find out is given as follows in few steps:

1. Do not crop or scale your image in articulate.

2. If you want to resize the image. I better suggest you to use Adobe Photoshop for cropping and scaling.

3. Export the image from Photoshop as JPEG or PNG format and Import the image in Articulate Storyline. 

4. I repeat.. please do not scale or crop (if you are facing above issue.)

Thanks & Regards

Saurav

 

Stian Larsen

Ok, this is going too far. Articulate, why are you not fixing this issue? It's been a known bug for way, way too long now. Can you please upadate us on the progress? Are any developers looking into this at all? Or are we ignored, left in the dark?

This is not right at all. For the price we paid for licenses, I'd expect bugs to be fixed quicker than 2-3 years. At least deal-breaking bugs like this.

There are so many known bugs in SL3, and non have been fixed as of now. I have several major bugs that needs to be handled.

I will list some I remember right now, though I've forgotten (learnt to live with, using workarounds, for a lot of other issues):
-Hotspots. Buggy, unless you remove border which is added as default.
-Padding in text in master, messes up value when going back to the slide.
-Previews is blurry, difficult to do detailed work.
-Published results are blurry, which degrades our products. Not good for me at all.
-Objects snapping to align will often be placed "between" two pixels, messing up borders and font. Only way to fix this, is going into position/size settings for the object, and move it 1px left/right, 1px up/down. Cant do this within the stage, with the 1px movement. Has to be done in position/size settings. Time-consuming, and can easily mess up fine details.
-Deleting "title" from master slide will prevent the use of "title" in layouts under the master. This in turn messes up text-boxes. If I have two textboxes, but "title" is deleted on master slide, then text will swap places within my slides if I create more layouts under the same master. Had to remake all my templates, hiding "title" instead of deleting. Unticking the "title" box also causes this issue, so it have to be there, but hidden in layers.

Theres more, but I think I've proven my point again. These issues have existed for way too long, and I feel we are completely ignored.

Can you give us an update on the issues reported? What priority do they have? Will we get a fix for any of these at all?

Ashley Terwilliger-Pollard

Hi Stian, 

Our team is working through the final preparation of Storyline 3 Update 7, and that will include fixes you've seen released to Storyline 360 as of Update 30.

We're careful about testing new updates to make sure we don't put other elements at risk, so we'll be locking this down soon and targetting a release date next week. The team will post here once it's live, ready to download and install. We'll also post an updated copy of the Storyline 3 release notes, which will list fixed issues. 

Please let me know if you have other questions. 

Stian Larsen

Thanks for the update. Glad to hear its right around the corner! 

I appreciate the fact that you don't want to release an update which introduces new errors. Though, the bugs we've had to accept for way too long is quite major, so a hot fix for the blurry output sooner would have been a better solution.

Anyhow, thanks again for the good news. Once its released, I just have to go through the past year or so of productions, republish everything, and start uploading one course at a time. That's about 70-80 courses. :p

Fingers crossed for the coming update!

Ren Gomez
Hi Everyone,
 
Good news! We just released Update 7 for Storyline 3Here are the details.
 
It includes the fix we made in Storyline 360 that addresses an issue where text and images could be blurry when viewing a course in Google Chrome or Safari.
 
Please download the latest version and let us know if you have any questions, either here or by reaching out to our Support Engineers directly. 
Ren Gomez

Hi Everyone!

I wanted to pop back in here and let you know that we just released Update 33 for Storyline 360Here are the details.

It includes a fix we made for images that were blurry when their shapes were changed, or when they were used as shape fills.

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

Kelley Likes

Issue: Screen captures are fuzzy in Preview and Published.

Solution:

1.      Set Screen size to the usual 16:9

If you captured in the smaller size, you must first change it to 16:9 and then do steps 4-10.

2.      Capture as usual. 

3.      When finished capturing:

4.      Design Tab

5.      Story Size Button

6.      Story Size Drop Down to Custom

7.      Do NOT uncheck the Lock aspect ratio box

8.      Change the Height: to 1200.  Width should go to 2047.

9.      Leave the radio button to Scale to Fit.

10.   Hit the OK button.

This will resize all of your captures to a SUPER large screen size.

Set your viewing to 40% to work.

 

Victoria Pavry

Hi, I'm encountering an issue related to the one above. It applies to more recently published Storyline activities, which appear blurry when imported into Rise and viewed in Chrome at anything other than 100%. (There's no issue with the preview within Storyline).

I updated my version of Storyline recently but the issue has been ongoing for a while now - I've been meaning to raise a query about it for ages. I've attached images to show the problem. All help gratefully received.

Thanks!

Victoria Pavry

Thanks so much Kelley. 

I just got around to trying it but unfortunately it didn't fix the problem. I use screen size 4:3 (rather than 16:9) but I applied the same principles, increasing the story size to 2047 x 1535. Unfortunately the image is still blurry when imported into Rise and then viewed in Chrome at less than 100%. 

Does anyone have any further suggestions? This is definitely a bug that entered Storyline in one of the updates last year as the activities that were published prior to that date do not have this problem (but when you re-publish the exact same files, they do!)

Thank you in advance and stay well everyone :)

Katie Riggio

Hey there, Victoria. Happy to jump in!

Quick clarifying question: Do you experience blurriness with the published Storyline 360 slide itself or only when it's embedded in Rise 360?

For the next steps: Are you comfortable with sharing a sample .story course for testing? It'll help us look into the quality in Chrome and we'll delete the course after. You can either:

Victoria Pavry

Hi Katie, thanks so much for jumping in (and sorry for the slow reply).

The only thing I'm doing with the published Storyline slide is embedding it within Rise, so I don't know whether the problem exists independently of whether it is viewed through Rise, if you see what I mean ... not sure that is very helpful, sorry! I do know that the problem doesn't happen when the slides are previewed within Storyline. 

I have attached an example Storyline file - I've made a mockup as the stuff I'm working on cannot be shared publicly, but since the issues exists with every file it should do the trick of showing the issue! I have also created a dummy course in Rise into which I have imported the file, to show the problem. See here: https://rise.articulate.com/share/jqZOgjP3cvKSwdNSV4WuP01kGxeCgSLd

When this issue first came up about 18 months ago I was able to fix it by changing the image quality to 100% when publishing, but this no longer seems to solve it. However, earlier this year (hard to say exactly when - perhaps January??) it returned and I haven't yet figured out the solution.

Finally, just to add that this issue only seems to present when the Rise course is viewed in Chrome at less than 100% (although further testing may be needed on this). However, Chrome is used by a very large proportion of our audience and screen size (therefore comfortable viewing magnification) varies significantly, so we really do want to find a fix. 

Thank you so much in advance :)

Lauren Connelly

Hi Victoria!

Thank you for sharing your files! 

Here is how I tested the projects to see if the bluriness appeared on my end:

  • Previewed the Storyline course
  • Previewed the Rise course
  • Added the Storyline course in a new Rise course

Unfortunately, I didn't see any bluriness. Here's a screen recording of my test.

Have you tried importing the old Storyline course into a new project?

Lastly, it would be best to bring in our Support Engineers for further troubleshooting. You can connect with them by using this link.

Victoria Pavry

Hi Lauren

Thanks so much for taking the time to test this. I have recorded the issue as you suggested (sorry the sound quality is so awful!). Hopefully this helps? Just to add, it is not unique to my PC: I have had three colleagues test from different computers (all PCs rather than Macs). 

Thanks again and all best

Victoria

 

Aly Summers

Hi - I've been running into this issue as well. All of my images meet the image requirements, and I have my settings in the file to maximum quality. I use storyline 360 and it's updated to the most recent version. 

When I export with the modern player, the images appear blurry in both Chrome and Firefox - the entire player scales up to whatever size the browser window is. If I scale the browser window size down, the buttons get clearer. Learners should not be required to do this - nor is there any guarantee that they will.

When I export with the classic player, the images appear blurry in Chrome but crystal clear in Firefox. 

I've read through this entire thread and honestly I can't believe this is still a continuing problem. Is there any update to this being corrected? Will it ever be corrected? 

Katie Riggio

Hi Aly,

Thank you for taking the time to tell us what's going on, and I'm sorry you're dealing with this issue.

It does sound like the image quality loss may be from the modern player scaling up to fit the browser window.

When you switched to the classic player, did you pick the Lock player at optimal size or Scale player to fill browser window setting?

If you can share the file through this private link, we are happy to take a closer look at both player types and see what we can recommend!

Aly Summers

Hi Katie - I had the classic player set to lock at optimal size.  When I change the setting to scale the player to fill the browser window I encounter the same issue - the images become blurry - this occurs in both Chrome and Firefox. However even with the player locked to optimal size images still appear blurry in Chrome. 

I was able to get the modern player to lock to optimal size by changing the settings to: launch in a new window and resize browser to optimal size, however this creates an additional, unnecessary click for learners since "lock player to optimal size" is only available if you first select "launch in a new window". I also continue experience the same problem where images are  blurry in Chrome but clear in Firefox.

For me the choice is clear - that I should use the classic player locked at optimal size for the best UX. This does not resolve the issue of images appearing blurry in Chrome. Are there any updates as to when this will be corrected?