Blurry images in Storyline 360 November 2021

Nov 23, 2021

Support says it's a bug. But I don't understand why isn't everyone complaining about blurry images here? I can't believe hundreds of users are suffering in silence, so am I the only one?

94 Replies
Diarmaid Collins

Deleted a post kind of critical of something Michael said: "there is some resizing going on which isn’t ideal for image formats that do not scale well like SVGs, EMFs, or WMFs"

After re-reading that line a few times I realised he was saying "like" to mean "as well as"...

Apologies.

Diarmaid Collins

Hi Mark. I took the liberty of peeking into your file and checking things out. I completely understand your frustration because I can find no reason why it displays blurry upon preview or publishing.

One caveat; I notice a lot of folks do this so it's not pointed at you - PNGs are only necessary to use whenever your bitmap image has a transparent section. If it doesn't then a JPEG is the optimum file format. The reason is that PNGs tend to be far larger in 'size' than JPEGS.

Which brings me to JPEG image compression.

Generally, the more compression applied to a JPEG upon export the more degradation there is in the image (blurriness, pixelisation, artefacts, etc). I have uploaded a version of your file to Review with 4 buttons that show whatever differences there are between the formats and compression.

Weirdly, there is little or no difference in the visual result between your original PNG (2048x1536px which scales down to 720x540px in the SL360 file), a straightforward high quality (zero compression) JPEG and a resized JPEG (720x540px import - actual size).

The only noticeable difference is in the third option which was the original size JPEG compressed to Very Low Quality (10) and the result is predictably bad. 

But what is concerning is that this deliberately bad image is not really that far off from the other 3. So yeah, conclusive proof that I have no idea what is happening to your image. there is no reason, AFAICS, for the quality to publish so poorly.

Not sure if this helps at all.

https://360.articulate.com/review/content/e203cc0d-6e22-4864-95f4-d0b4a3866d2b/review

Mark Kirby

Hi Diarmaid,

It does help, because at least I don't feel like I'm expecting something unreasonable. It's crushing to see your work almost vandalized when you publish it. People naturally assume it's incompetence from the author, either in the creation of the material or the selection of the delivery platform.

Diarmaid Collins
Justin Grenier

Sure thing, Mark.

Here's a screenshot of what Mike's mocked-up HTML page looks like in a 1920 x 1080 browser window, and here's a screenshot of what Mike's mock-up looks like in a 1366 x 768 browser window.

I think our goal was to demonstrate that we'd expect any text-heavy screenshot to suffer from a loss of quality when scaled, inside or outside of Storyline.

Hi Justin,

Thanks for showing the impact on text quality and images when scaling downwards.

How does Storyline best practice, which encourages images to be imported to a file at the exact size it should be within the file, accommodate most users who utilise the Modern Player which automatically scales (upwards) to fill the screen display?

Personally, I find that if I import an image that is twice the size of the intended image I have no issues with image quality when viewing my work on high-resolution monitors where the file displays many times the 'specified' Storyline file.

Is it an issue with Storyline internal settings compressing images on, say like Mark's file, at 720x540, and then being scaled upwards within the modern player? 

Michael Marcos

Thank you everyone for your patience, and apologies for the slight confusion on the file types! Let me take your findings back to the team Matthew so we can review this function of Storyline 360.  I just want to confirm that when you say you "replaced the published image with the original", this means you went into the Storyline output\mobile folder after publishing and replaced the processed image with a raw version of the same image?

EDIT: Nvm, I just saw your earlier post confirming this. Thank you.


I really appreciate the extra effort you've all put into this.

- Michael Marcos
Customer Support Product Liaison 

Diarmaid Collins

Full disclosure - I don't generally import images with text in them so I don't encounter this issue that often. It's clearly obvious that text is affected. I think there is probably more leeway with images without text. I, unfortunately, tend to recreate any charts, diagrams or text images within Storyline itself to bypass these publishing issues (yet another productivity limiting 'hack' or workaround that's been embedded into my workflow).

But, from the link I posted a little bit further up, there is (was) clear degradation in image quality if the image is embedded in a non-rectangular frame. This may be fixed now but if I require bespoke image 'frames' I do it outside Storyline and import the image as a transparent PNG - just another workaround to broken Storyline functionality. I have not tested if it's fixed.

But at least we know arrows are no longer blurry.

Michael Marcos

I'm just circling back here to let everyone know that we will be taking investigating this further on our end. The results Matthew got from the steps he documented earlier are not expected behavior. I can't give an ETA on how soon it will take to fix this as that can change depending on how complex of an issue the original image quality issue may turn out to be though.

Thank you again for your patience as we continue to chase down this issue!

Diarmaid Collins

Wow. I'm blushing here. I wouldn't exactly call myself a hero but if it gives me an excuse to keep wearing my underwear over spandex with a cape then... uh... wrong forum...

wrong thread... OMG

<delete> <delete><delete>

Matt's the real hero. I was just procrastinating from doing the work I was supposed to be doing while everyone else is still on holiday.

I can't help but notice that the screengrabs you posted are really blurry. Have we considered that maybe we all need glasses?

Mark Kirby

Part of a branching scenario, with a convoluted workflow - a random number in Storyline (1,2 or3) to select different sales vs time history, then using an Excel spreadsheet, with a linked picture to save output as an image, which is then used as a decal in Fusion360 to give me the illusion of a P&L sheet (12 different sheets depending on the scenario choices). Talk about a procrastination runway, lol.

John Fanely

OK so when I create learning, I create it with the thought in mind that my 80 year old father would be able to understand a topic or process without ever having been exposed. I simplify process verbiage and add visuals both animated and static.

NOW, I'm going to ask you all, that are clearly cerebral folks to bare with me for a second.

You talk about using SVG's. Is there an easy way to help me understand why JPEG's or PNG's are not used? When I searched for an answer, it's because I use JPEG's and PNG's. Seems like the issues happen with all of these.  

Just making sure I'm not still living in the stone age chiseling on a stone tablet here. 

Thanks in advance folks!

Phil Mayor

I always thought that the blend modes were broken, however what I think they are doing isn't what I expected them to do.

You have to choose a colour, and they behave similar to the same options in photoshop if you had a layer of solid colour (the colour you selected) over the top of your image.

Although not 100% identical to the photoshop output they are analogous. Just not what I expected them to do I expected the image would be blended with whatever was below.

Mark Kirby

Hi John

I too want to use the easiest image format (like jpeg or png), so the ONLY reason I was looking at SVG was that ALL my images are blurry when published in Storyline. The blur only really shows up (horribly) when image has text in it (which is maybe why there isn't more of an outcry, as perhaps users typically add text natively inside Storyline on top of an image as a time consuming work around).  Diarmaid and Matthew are clearly much more expert in image formats than I am. I am an engineer and just want my images to appear on screen without massive degradation because Storyline is doing something to them.

John Fanely

That sir is a clean explanation and much appreciated. Agreed that the text is blurry, however I still feel like the images aren't as crisp as they can be. Please see the two attachments. These are an example of one of my sons figures. PPT is cleaner overall as compared to SL360. To me it should just be that simple.

Also and again just a simple mind thought. Once an image is captured, even if it has text, it transitions from layers of an onion, to a flat picture of an onion. In my mind, the text then becomes a image. It's no longer text.