Scenario Block - Loading speed of images too slow over average speed

Hello there, we have been having some file size and loading speed problems with the scenario blocks in Articulate Rise.

  1. File size - the character images in rise are too large, by replacing the images manually in assets folder we were able to reduce a file down to 42mb from 69mbs - is there a way to have optimized character images directly on the Rise?
  2. Loading speed - most of our end users are larger institutions with limited network connectivity, making the scenario character loading speeds a challenge. Even after manually optimizing the character images in assets, they load just as slow as the original files. Is this an image problem or is it the loading process of the scenario block?

The scenario block has been an exciting new feature on Rise, it allows for great quizzing application. Yet, it proves a bit challenging to have end users wait for the images to load. Is there a way to resolve this issue? 

 

13 Replies
Sam Williamson

In a quick test I was able to reduce the file size of a character pose from 800Kb to 172Kb simply by scaling it to 50% resolution and saving it as a more compressed PNG. It displays fine in the Scenario block despite the resolution drop, and unless you're using a 4K monitor I don't think there's any perceptible drop in fidelity.

I appreciate it's a faff, but the above should help character poses load in considerably quicker in slow network environments. Truth be told I'm not sure how the Scenario block handles the loading of images, though; if it doesn't pre-load them before they're needed you might be able to incorporate some custom JavaScript to do that for you.

If total file size is a concern – although that shouldn't affect the end user directly – you could manually delete any of the character poses/expressions you aren't using. If you include an actor their entire suite gets packaged up whether you actually use all of them or not.

Angela Nyabera

Hello Sam. Thank you for your feedback, it has been most helpful. In specific the mention of custom JavaScript  and the fact that Rise loads up the entire character pack.

50% resolution - when you changed the resolution, did it affect your file size? One of the trials showed a smaller character size due to influencing the resolution/width/hight of the image.

JavaScript - how exactly where you able to approach this? 

Sam Williamson

Hi Angela,

Yes, halving the resolution will actually reduce the file size to around a quarter of the original. That might seem strange but remember that you're affecting both the X and Y axis of the image, so you're essentially halving the actual pixel count twice:

Original size: 544x2048 = 1,114,112 pixels = 800Kb

Half resolution: 272x1024 = 278,528 pixels = 172Kb

At the risk of confusing things with even more numbers, within the Scenario block itself the image is displayed at a resolution of 237x915. So, even though I've made the image much smaller there's no perceived loss of quality as my edited version is still of a higher detail than what is displayed.

Regarding JavaScript: I'm not really the person to ask, as I've only dabbled with it. It's possible Rise attempts to pre-load Scenario images by default, too, and this simply isn't addressing your specific issue; someone from Articulate would need to confirm.

That said, if you'd like to have a go at forcing your Scenario images to load before they're needed here's a relatively simple means of doing so, without JavaScript.

 

Disclaimer: The below is not a very elegant solution and could potentially make loading worse for your users, depending on other variables. 

 

Okay, first you'll need to customise the code below:

<div id="preload" style="display:none">
<img src="assets/first-image.png" width="1" height="1">
<img src="assets/second-image.png" width="1" height="1">
<img src="assets/third-image.png" width="1" height="1">
</div>

Simply replace the emboldened text with the names of the images you want to preload. For example, if I put in the file names for the images I resized it might look like this:

<div id="preload" style="display:none">
<img src="assets/0M4YqFG6f_S7D9XH_326_full.png" width="1" height="1">
<img src="assets/3sX2QhjzPW4D47JH_343_full.png" width="1" height="1">
<img src="assets/7gdEoXv3QboOENFQ_325_full.png" width="1" height="1">
</div>

(If you need to load more than three images, just add more lines using the same format.)

So you've got your completed block of code. Now what? Well, you need to paste it in your course's 'index.html' file. Simply open it up using a text editor, like Notepad, and paste in your code after the <body> tag:

Go to File > Save and you're done. The Scenario images should now attempt to load when someone starts your course.

Angela Nyabera

Hello Sam,

kudos for the quick and detailed reply, much appreciated. So, on the image resolution, that is understood - as long as the final resolution change does not go below 237x915, got that.

I will try out the second advice with the coding on some sample files and see how it helps. I opened a case with Articulate on the same issue, but since the holidays are on, it may take some time to get feedback. For now, you have been of great help, thanks a lot. Will feedback on how the coding test goes :)

Kim Sheppard

Hi Alyssa, I am also experience slow loading times for the characters once the module has been uploaded to our LMS (even when sitting right next to my router!) 

I am currently going through and compressing the files post publish, but also see that it has downloaded all characters from each pack. Its abit of a annoying step so it would be great if articulate can optimise these characters in the library to prevent the need to do this

Gerry McAteer

Hi @Crystal and Alyssa, with the last two Rise modules that I have developed I also have been experiencing issues with any image over 1 MB displaying very slowly or not even at all! This only occurs once the zip file has been uploaded into our LMS (SuccessFactors). It only seems to be a recent development as I would have notice this issue previously. I have had to go back into the Rise module and reduce the file size for all images over 1MB. Strange thing is that any embedded video loads and plays without any issues. The only other thing I have noticed is there also seems a slight time delay for any Storyline blocks to load and play as well. 

As I have mentioned the images all display as should be when viewed within Rise preview mode or when in the Review platform, it only becomes an issue when uploaded into the LMS.

cheers Gerry

Alyssa Gomez

Hi Gerry! Have you done any testing in SCORM Cloud yet?  If so, are you getting the same results? We generally compare the behavior in SCORM Cloud to your LMS experience to try to parse out Rise 360 file issues versus LMS issues.  We are happy to help you with that testing if you'd like to share your output file!

Hello, David! We'd be happy to take a closer look at your SCORM output file. If that works for you, you can send it to us by opening a case here.