Reducing PNG size in published output?

Hi! Question for this wonderful hive mind:

 


One of our clients is experiencing issues with their course being slow and laggy in their LMS and they say it’s due to the large size of the PNG files embedded within the course. We’ve never heard this issue before from any other client (and 90% of them receive this exact same course), and to resize the HUNDREDS of images within the course would take WEEKS. I can’t even imagine the amount of work going into that. So we did some republishing tests to see if lowering the overall image quality upon publish would change the PNG sizes….. the overall course size was brought down but the PNGs themselves were not. Do you know if the smaller overall file size would help with the bandwidth issues they’re having, even if the individual PNGs are not any smaller? 

Is there some simple way to mass-resize the hundreds of PNGs used in this course without having to do it individually? (I’m sure there is and I just haven’t thought of it or am not aware of it.)

Thoughts??? 

21 Replies
Ashley Schwartau

Y'all are the best!!!! This worked like a charm. Thank you :) 

And now I have a technical question about how published courses load the individual media elements: When we dropped the publish quality of the course, the size of the individual pngs/jpgs did not reduce but the overall package size did. What is actually being compressed during that lower quality publish? And how does it work when streaming courses? Does the course load the high quality image and then compress it in real time? I assumed they were being compressed upon output. 

Matthew Bibby

Storyline's png handling is certainly less than ideal, especially when one optimises their own images before bringing them into a course.

Ideally, if the image quality is set to 100% then they shouldn't be altered by Storyline at all. However, unfortunately, that isn't the case.

I'm interested to hear what support says when they get back to you regarding this.

Matthew Bibby

Ashley, as you probably discovered, TinyPNG doesn't change the quality of the image in any noticeable way. It reduces the size by decreasing the number of colours in the image and removing unnecessary metadata.

Sometimes the reduction in file size is huge, other times minimal, but I've never had it produce a noticeably poor quality image (and I've run thousands of images through TinyPNG).

Ashley Schwartau

Okay further questions for you guys! 

1. Changing the output quality of a course doesn't seem to change the size of the individual image files within the mobile folder -- they remain the same size regardless of if I publish at 100% or 50%. What is actually being compressed in Storyline to lower the overall size of the zipped package?

2. On average, how big are the image files in your courses upon publish? 

Alyssa Gomez

Hi Ashley,

After digging a little deeper, we found that the image quality slider is designed to impact only JPEG/JPG files, so it won't affect PNG files. 

The reason you're seeing increased image sizes is because the resolution at which we publish PNG files has changed for the HTML5 player in Storyline 3 and Storyline 360. 

If you'd like to see an enhanced image quality slider that includes adjustments to PNG files, you're welcome to share your ideas with our product team here as a feature request!

I hope that clears things up, and let us know if you have further questions. ☺️

Vincent O'Connor

That's great Ashley, when I download and add images from the content library, they are very high quality (as you would expect!), it would be nice to have a compression option or DPI choice prior to inserting the image into a project. I had three quizzes (different grade levels) in one with about 100 background images which I wanted to load to a Moodle site, but the maximum allowed upload was 80 Mb and my project was 140 Mb, I ended up removing all the images and each quiz dropped to about 21m Mb. I'm learning the hard way!