Forum Discussion
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.
- 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?
- 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?
32 Replies
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.
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?
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.
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 :)
Thanks for letting us know what's going on, Angela. I don't see a support case under your Articulate ID, so I've opened a new one for you. You'll hear back from our team soon!
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
Hi Kim. We're looking into whether it's possible to include only the character poses that are used in the scenario. We'll update this discussion if we make a change that will help!
Hello, I have the same problem when I use stage, SCORM weighs 40MB because stage images are too heavy. When I edit the scorm package and reduce the pesp of the images it sends an error when importing to the LMS. Any solution?
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.
Thanks Alyssa I have uploaded the zip file using the link you have provided.
Thanks!!
Thank you, Gerry! My teammate, Jose, is reviewing your output file now. You'll hear back from him soon!
Are there any updates on this issue @Alyssa Gomez?
Hi there! Since there are a few issues covered in this discussion thread, let's start fresh. Are you seeing slow loading in a scenario block? If so, I'd love to get more details from you.
- What image is slow to load: the character, or the background image?
- Does this happen when you're previewing the course, or only after it is published?
- Does this happen in all web browsers?
Hi Alyssa,
I have found this thread and do also have the issue with slow loading character images in a scenario block. Sometimes these appear only partially or very delayed. What is the reason for this? Do you have any tips or solution to this problem?
And in addition: In one case I do have this issue at the "Labeled graphic" block, too. Here, the background image loads with a time delay, so that only the interactive buttons are visible at the beginning.
Best, Marianna
It seems like the scenario block images contributing to large SCORM packages is a common thing. We're having a similar issue on a course. Is there a way for RISE to shrink the image sizes without us doing it manually in the SCORM package?
Hi Jordan! Does this happen to all your courses with a Scenario block or just a particular one? Have you tried testing your SCORM Package in SCORM Cloud, is the behavior the same?
Hi Hazel, in this particular case, it was only one course. However, I have another course with a scenario block that performed better but also produced a large SCORM package size. We did not yet test the course in SCORM cloud.
