Forum Discussion
Scenario Block - Loading speed of images too slow over average speed
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.