The quality of Image compression/rendering in Storyline

Hi Benjamin,

Are you able to share the .story file you're working on in addition to the image attached? Also, could you share information about the story size you're using, player/browser scaling settings, where you're hosting the published content and what browser you're using to view the HTML5 output? 

You can attach those here using the "add attachment" button as you uploaded those images and even just that one slide from your .story file would suffice. 

Hi Benjamin,

If you respond via email the attachments won't go through - also, sharing the files here is not confidential. If you need to share confidentially please send along to me here and reference this forum thread. 

You are definitely on to something here. However, after some tests this morning, I've concluded that it's not about the stage size, or about cropping. I haven't figured out the magical ratio, but increasing the number of transparent pixels surrounding the actual graphic seems to completely fix the issue.

To test, I used both a 100x100 pixel Storyline stage size, and a 720x540 stage size, with an icon that was giving me problems. The results were the same, regardless of stage size. Cropping the extra added transparent space around the icons didn't seem to make a difference either.

The icon is approximately 94x94. I kept increasing the Canvas size of the graphic in Photoshop  (just increasing the number of transparent pixels around the art, not resizing the art) and testing in Storyline.

I tested it at 100x100 at 72ppi, 96ppi, 150ppi, and 300ppi. No difference in the appearance between them. All look equally crappy on Preview and Publish, and on both stage sizes.

I increased the image's canvas to 120x120 (still crappy), 150x150 (equally crappy), 175x175 (still crappy), and then 200x200 (issue resolved! Icon looks crisp!)

Increases beyond the tipping point didn't seem to noticeably improve it any further (225x225,  300x300, 720x540, etc.)

I repeated the test with the icon enlarged in Illustrator to  200x200. As expected, this icon looked awful in Storyline at 200x200. I expanded the canvas to 400x400, which solved the problem, as expected. It's worth noting that 300x300 also looks great. 

So like I said, I don't know the magical ratio for how many extra transparent pixels to add, but at least we have a workaround to get images to publish out of Storyline acceptably.

Thanks for the inspiration, Stephen - I never would have guessed that this would be the solution!

This is definitely going to be an issue when Flash is finally killed off. Our clients will not accept blurry images and text that is not crisp. So I hope in the next release we get some image quality improvement!

Hi Ashley,

I answered a similar comment of yours here, so I wanted to link the two so that you were sure we saw them. 

Ashley,

Thanks for the reply, but I'm afraid that is not at all the same issue we're discussing here. 

Please re-read the thread and view my sample. The image quality is not at ALL related to the problem in the other post with browser scaling, or HTML5.

The problem we are talking about happens even in Preview and on Publish of files in both the Flash versions and HTML versions, viewed at 100% of the publish size, not scaled.

I would hope that this particular issue is being taken seriously by Articulate and not lumped into the same category as the other unrelated issue and forgotten about.

Hi Renee,

My last response was to another Ashley as she posted in both of the forum threads (it's easy for folks to see an issue and connect the two) so I wanted to link them in terms of my answer for her there as it was related to HTML5.

As for this discussion, it does date back some time with a few different issues - and my last attempt at viewing Juanjo's images I wasn't able to discern the same difference that he mentioned or showed - and maybe that's just my bad eyes and starring at a computer all day!

I do see in the image you shared 2 months ago a discrepancy in regards to the images at different sizes and to look at this on our end, I'd like to have you share the original image with us, whatever is the one you're importing into Storyline. Also, can you share any additional information about what update of Storyline 2 you're using (this thread also dates back to Storyline 1). Also, if you're unable to share the copy of the image here, please send along to our Support Engineers here and you'll want to reference this forum discussion as well. 

I've noticed the same issue, working with SL2 here. I know this is an old topic but the issue still persists, though I believe it only occurs while previewing. I am using icons that are 64x64 pixels, transparent png files and they look incredibly blurry when previewing.

The issue is best replicated in @Juanjo Haro 's storyline file that he has uploaded. You will see three crisp hexagons in the Storyline editor, but when previewing the file they will appear incredibly blurry as if saved as a low-quality JPEG (with the exception of the first hexagon, which has dimensions equal to the size of the stage).

The good news is that this problem only occurs when previewing. It seems to be a software glitch of some kind. Forgive me for bumping an old topic but I had to spend a lot of time today getting to the bottom of this and I hope to help anyone else reading this topic in the future. As long as you publish your file with 100% image quality, the images WILL look crisp in the final file.

No apologies necessary RM and I'm glad you were able to share here that the published output worked successfully for you. As you can read in this thread we've had some mixed results testing it, so it's good to hear from other users their experience and ways in which it was resolved.