Highlighted

Big JSON files

Engaged ,
Jun 11, 2019

Copy link to clipboard

Copied

Hi there

The json files that I have in the dr folder are making the scorm file too heavy.

I looked a bit in them to see what do they contain. I would like to understand a bit more about them and possibly to reduce the size.

I am using as many shared actions as possible and try not to be heavy with the advanced actions.

At the end of the post there is an image of the dr folder. There are quite a few that are about 1 MB.

I opened one of these json files and I can see the following on the first lines

cp.imagesJSONCache075={

"dr/btn_SHRC.png": "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",

1. The cp.imagesJSONCache075 refers to what exactly? The other files have a different number.

2. The btn_SHRC is the object name of a smart shape button with a colour fill. There is no png involved there.

Why would that be reported in the json file with a png as an extension? The smart shapes are converted to pngs maybe?

3. Overall, how can one reduce the size of the project?

Thanks in advance

B

Adobe Community Professional
Correct answer by RodWard | Adobe Community Professional

Actually there IS an image file with that button, because in normal (non-responsive) HTML5 output the buttons and Smart shapes would be turned into PNG images.  The PNGs are then being turned into JSON files. That's what you are seeing.

The JSON files are used in HTML5 output to reduce the number of image files that need to be downloaded from the server.  That code you see in the JSON file is describing one or more PNG files in what is known as Base64 encoding. It's usually done for PNG files, not JPGs.

The 'serialised' encoded data of the image is actually slightly larger than image itself but the advantage of this method is that you can have multiple small images encapsulated in a single JSON file. The reason this is desirable is that instead of making multiple requests to the server to get each individual image file you can just get one file that does them all.  In the case of an e-learning course with lots of small PNG files the performance of the course can be greatly improved by using JSON files.

If you want to reduce the number of JSON files, you need to look at ways of reducing the number of objects.  How many buttons do you have in this project?

Views

208

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Big JSON files

Engaged ,
Jun 11, 2019

Copy link to clipboard

Copied

Hi there

The json files that I have in the dr folder are making the scorm file too heavy.

I looked a bit in them to see what do they contain. I would like to understand a bit more about them and possibly to reduce the size.

I am using as many shared actions as possible and try not to be heavy with the advanced actions.

At the end of the post there is an image of the dr folder. There are quite a few that are about 1 MB.

I opened one of these json files and I can see the following on the first lines

cp.imagesJSONCache075={

"dr/btn_SHRC.png": "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",

1. The cp.imagesJSONCache075 refers to what exactly? The other files have a different number.

2. The btn_SHRC is the object name of a smart shape button with a colour fill. There is no png involved there.

Why would that be reported in the json file with a png as an extension? The smart shapes are converted to pngs maybe?

3. Overall, how can one reduce the size of the project?

Thanks in advance

B

Adobe Community Professional
Correct answer by RodWard | Adobe Community Professional

Actually there IS an image file with that button, because in normal (non-responsive) HTML5 output the buttons and Smart shapes would be turned into PNG images.  The PNGs are then being turned into JSON files. That's what you are seeing.

The JSON files are used in HTML5 output to reduce the number of image files that need to be downloaded from the server.  That code you see in the JSON file is describing one or more PNG files in what is known as Base64 encoding. It's usually done for PNG files, not JPGs.

The 'serialised' encoded data of the image is actually slightly larger than image itself but the advantage of this method is that you can have multiple small images encapsulated in a single JSON file. The reason this is desirable is that instead of making multiple requests to the server to get each individual image file you can just get one file that does them all.  In the case of an e-learning course with lots of small PNG files the performance of the course can be greatly improved by using JSON files.

If you want to reduce the number of JSON files, you need to look at ways of reducing the number of objects.  How many buttons do you have in this project?

Views

209

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 11, 2019 0
Adobe Community Professional ,
Jun 11, 2019

Copy link to clipboard

Copied

Actually there IS an image file with that button, because in normal (non-responsive) HTML5 output the buttons and Smart shapes would be turned into PNG images.  The PNGs are then being turned into JSON files. That's what you are seeing.

The JSON files are used in HTML5 output to reduce the number of image files that need to be downloaded from the server.  That code you see in the JSON file is describing one or more PNG files in what is known as Base64 encoding. It's usually done for PNG files, not JPGs.

The 'serialised' encoded data of the image is actually slightly larger than image itself but the advantage of this method is that you can have multiple small images encapsulated in a single JSON file. The reason this is desirable is that instead of making multiple requests to the server to get each individual image file you can just get one file that does them all.  In the case of an e-learning course with lots of small PNG files the performance of the course can be greatly improved by using JSON files.

If you want to reduce the number of JSON files, you need to look at ways of reducing the number of objects.  How many buttons do you have in this project?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2019 2
Engaged ,
Jun 12, 2019

Copy link to clipboard

Copied

Hi there Rod,

Thank you for that reply. I understand the process a bit better now.

I guess using JPEGS is not very smart since it would slow down the

To answer your question, I have quite a few buttons and shapes. Would be hundreds. Is there a way to calculate that automatically?

Also, what about responsive output. Would there be a json file and would the size be smaller normally? I do not use responsive normally, but would consider it if the size is reduced.

On a side note, I have read different opinions, but would be good to hear yours. Are any unused items in the project really make the output scorm file bigger?

Thanks again

B

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0
Most Valuable Participant ,
Jun 12, 2019

Copy link to clipboard

Copied

Will not answer about JSON.

However clearing the library of unused  items is NOT reducing the output file sze. This is not an 'opinion' but I asked that question to the team over 10 years ago, anc my 'intuition' was fully confirmed. I know that some 'experts' claim the contrary, but it is easy to test this out (as I did).

I will rarely clear the library, since sometimes the Usage button fails (careful with assets used in states).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 2
Engaged ,
Jun 12, 2019

Copy link to clipboard

Copied

Thanks Lieve

This is my understanding too. Just wanted to reconfirm.

I am just trying to reduce the file size.

When one has different locations around the world with different bandwidth, one should be extremely careful with the size.

Thanks again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0
Most Valuable Participant ,
Jun 12, 2019

Copy link to clipboard

Copied

Understand. Biggest gain in file size is with audio and video. Cut down the settings as low as possible.

For images: if possible use SVG (for icons). Sometimes GIF can be an alternative for PNG (if number of colors is not so important). Always use images, video in exactly the same resolution as you need them. I use AME a lot. Neve ruse Stereo for narration...

Shared actions instead of advanced actions. Buttons on master slide whenever possible.  Use timing for rest of project when possible.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0
Engaged ,
Jun 12, 2019

Copy link to clipboard

Copied

1. Video. I had 7-8 intros of about 1 MB but due to issues I replaced them with sequences of images. So I have about 12 jpeg small images that create the illusion of movement. We did amazing offices in Blender and 5 sec videos but I have issues with the LMS or just the IT security. I really have no time to dig deeper so I am using a set of images to create the movement.

2. Audio. No audio

3. SVG for icons. I use quite a few icons but as PNGs. Why is that a good idea - to use SVG instead of PNG? The vector file can be exported in any size. What if I have the SVG icon with 20x20 and then need to have the image in Captivate at 50x50. Resizing in Captivate would not add to the weight?

4. Shared actions. Agreed. I try to use them a lot whenever possible.

5. Resizing. A good point. I am aware but should recheck the whole course. There will be images that are not used with their original size but are resized in Captivate.

Lastly, since I have you online, would you please confirm where one should change the background of the webpage that loads?

I think it is in the Skin editor and I have set it to black, but when I review the project it is grey. What i mean - the parts on the sides of the project are grey.

Thanks again Lieve

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

If you have hundreds of buttons, then I would suggest you look at WHY that is the case and find ways to reduce the number.  Each separate button is probably being published out as a separate JSON image so it could be part of your filesize bloat issue. Having hundreds of buttons can also get you into problems with stability of projects.  Captivate seems to have an internal limit that should not be exceeded.  It's in the hundreds, but I cannot give you an exact number.

Can you not perhaps reduce the number of navigation buttons greatly by using Smart Shape buttons on the Master Slides?  A well-designed set of Master Slides can not only give a consistent look and feel to the project it can also simplify your navigation as well.

Another common approach is to put the basic button array on one of the initial slides and set them to display for Rest of Project.  Then you can show and hide this array on other slides later in the project using Shared Actions etc.

Changing to Responsive should only be done if you have a compelling reason for doing so.  Reducing the filesize is not usually a good enough reason.  Responsive has other issues that would usually negate any productivity gains in that area.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 2
Engaged ,
Jun 12, 2019

Copy link to clipboard

Copied

Thanks Rod

I use buttons and shapes on Master slides regularly but for this particular project I have many cartoon bubbles with a Continue/Next button close to them.

Also, I have buttons that are customised smart shapes when the user should click on an object.

I have quite a few next buttons that are "standard" and appear at the bottom right corner but they would appear only if a particular condition or timeline has been reached.

All this cannot be done in a master slide I am afraid.

This said, I guess I can at least use master slide with the Previous button on it. For the slides that do not have the Previous button jumping back to a particular slide and not to the Previous slide, that is...

Thank you for pointing out about the limitation. After all these years with Captivate and Storyline my absolute credo is that one should create several smaller projects and have them as separate modules instead of having one big one ... For this one we have a nice overview of a bunch of offices as a menu and the user would "fly in" them one by one and complete them. Maybe that is why I decided to have one module.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

I can see how your current design looks quite appealing, but your graphics are probably what is weighing it down at the moment.  Try to find a way to reuse a lot of those buttons if at all possible to avoid bloat. 

Also putting everything for the course inside a single CPTX is always going to end up with a large download.  I usually try to keep each individual module around 10-15 meg if possible, and that's including voiceover audio.  Also be aware that if you have all modules in a single CPTX then you will only have one SCORM and only be able to get one overall result from your LMS.  Having the course set up as a multi-SCORM course would mean you'd lose that nice office fly-in effect you've designed but it would give you the opportunity to have more granular reporting.

I think the jury is still OUT as to whether or not SVGs are a good idea in Captivate projects.  I've had lots of issues with them and keep hoping that the next release of Captivate will sort out the bugs.  I find PNGs a lot more reliable, but I reuse all graphics as often as possible in a project to reduce the filesize.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 2
Engaged ,
Jun 12, 2019

Copy link to clipboard

Copied

Thanks again Rod

All that makes sense.

I think I will go through the module and see what can be adjusted according to the points listed by you and Lieve above.

Immediate things that I see are

- Check if there are any images that are resized in Captivate

- Put a previous button on a Master slide

PS. BTW is there a way to check the resized images and see which ones are actually resized in the project? Somewhere in the js files?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

Captivate doesn't show this sort of detail in any real simple way.  But you can quickly go through each of the images one by one and click the Reset to Original Size button.  The ones that have been resized will jump out at you.

If the images also tend to be much the same dimensions in the project, look at the differences in file size they are shown in the Library.  The ones that have been significantly resized should also see much bigger figures in the Library.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 2
Engaged ,
Jun 12, 2019

Copy link to clipboard

Copied

Thanks for all these tips Rod

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0