Image Compression in Storyline 3

The issue is post publish. During preview, or while working on the project the images look absolutely fine. 

I have published for web and LMS and adjusted the image quality under publish quality to 100%

Thanks, Jeff. We are looking into an issue in Storyline 3 where courses look blurry in Chrome, but not in other browsers. Are you seeing the image problems mostly in Chrome?

I test in both IE, as well as chrome. I'll let my SME test in IE, but the image quality is comparable with my testing in both IE and Chrome.

Hi Jeff,

Could you share a copy of this image with us and your .story file? We're happy to take a look at what is happening with the blurry images. 

I apologize for the late response, I am currently providing 4 weeks of live onboarding training.

Hi Jeff, 

Thanks for sharing your file so that we can take a look.

Do you experience the same behavior when I publish your course? Take a look here.

Was this resolved? We're having the same issue and need to resolve this or else we'll be using Captivate.

Hi there, Tamara.  Would you be able to share you file with our team for testing?  You can upload it here, and please include your publishing settings, in which browsers you're seeing poor image quality, and any screenshots you can share with the URL when viewing your output.

Those clues will help our team determine some next steps for you.  Thanks!

In another thread from years ago, Phil Mayor mentioned trying a different file type. I just tested this theory because I have been fighting image quality issues as well in SL3. I thought it could be related to the fact that we fill the browser window with the player or publish to HTML 5 only, but no it was the file type the entire time.

I have all pngs and once the course is published, many of the images become blurry almost smudged the way that JPGs can sometimes look when lower quality. WHat was odd is that with the photo zoom tool, when it is clicked, the image sharpens a bit, yet the original image is blurry and smudgy. I tested a variety of images that had been enlarged, reduced in size, enlarged in pixel, cropped, not cropped, etc (aka jumped all the hoops to test different options).

To test the idea that Phil mentioned in the thread I linked above, I started a brand new course, uploaded three different file types and when the course is published, the GIF/JPG images look worlds better than the PNGs.

Update: My triumph appears to be short-lived. When I upload a course into S3 for testing, the image is much improved. Once I load the course into CSOD, it goes back to not great. I even changed from GIF to JPG on one image hoping that would fix it and increased the image optimization to 100% on publish. The majority of the images did improve, but one the one I'm referring to is still not great. However, when the zoom picture feature is selected--the image sharpens to almost normal. I didn't resize the image in any way shape or form. I pulled the original PNG image into SnagIt to resave it as the other file types. This process worked for the other pictures that improved, but this one image has a lot of information on it and I guess it just won't improve. I tested the output in both Chrome and FF in the LMS and there's no difference.

Hi Kimberly,

Thanks for sharing the thread that helped guide you through this further troubleshooting and for sharing the details with us here.

So, now you are only seeing the image degradation once uploaded to CSOD? Are you hosting the files on S3, then loading to CSOD?

Do you see a similar issue if you directly upload your zipped published output to SCORM Cloud?

Hi Leslie,

Yes, you are correct. The image again degrades once it is in CSOD. I'm uploading the output directly to CSOD. I was testing in S3 for convenience. Unfortunately, I cannot use SCORM cloud to test the course's performance.

Would you be able to share the .story file or the image for us to test in SL3?

Storyline 360 is still compressing files. I have tried using my jpg files at the size that they are supposed to be in Storyline and they still look fuzzy. I have changed my compression settings in Publish to 100%. I have checked in IE and Chrome and it doesn't matter the browser I am using. They still compress. When is there going to be a real fix for this so what I am seeing in photoshop looks just like what should be outputting in Storyline 360.

Here is an example for your perusal.

Hi Heinee,

It would help to take a look at your original image and your .story to understand the difference in quality and any sizing you're including.  If you want to upload those here using the Add attachment button, I'm happy to take a look. If you'd prefer to share privately our Support Team is happy to help!  Either way, we'll delete the files when done.

This is still a huge challenge for us. Any updates?

Very sorry you're at this obstacle, Nikki. 

A few questions to make sure you get the most up-to-date support:

• What version of Storyline are you using? You can find this detail by clicking on the Help tab, then About Storyline.
• Do you notice the difference in quality during Preview, in the published output, or both? If in the published output: What browser(s) are you using to view the content?
• If you can share a sample .story file with our Support team for testing, that would be gold. We'll delete it after troubleshooting. If that works for you, send it along by using this private upload link!

I am also interested in finding out whether there is an answer to Heinee's issue. If you could please provide an answer as soon as possible.

Hi Rosaline!

I'm happy to help! First, which version of Storyline 3 are you using? We released this bug fix in Update 7 which was released on September 10, 2019.

Are you able to share your file with us so we can begin testing? You can do so by using the "add attachment" button in this discussion. Or you can share the file privately with our Support Engineers by using this link.

Hi,

this discussion is old but I'd like to know if a bug has been identified and fixed.

We have courses with many schematics and diagrams, and even with the image quality setting at maximum value, there is an built-in, systematic compression on rendering which makes some of them blurry. This happen especially on simple diagrams, which are already very light and look just fine on preview, but the final published version is awful.

We use Storyline 2. I was considering upgrading to 3 but I'd like to ensure the problem has been fixed since then..

Thank you

Here are screenshots of the project file and the web rendered page. See the difference in the top image. Almost unreadable!

Hello Cédric!

Yes, this bug was fixed in Storyline 3 Update 5. We are currently on Update 11. We recommend that you upgrade to Storyline 3 or Articulate 360 (which includes both Storyline 360 and Studio 360) before Flash is disabled on December 31, 2020. Both Storyline 3 and Articulate 360 don’t have any Flash dependencies, and their HTML5 output works in all major browsers.

Hi Lauren. 

Great news! We'll consider upgrading then. 

Thank you, 

Same issue as above. Screenshot jpgs are being compressed in spite of setting quality to 100% and having the image the same size as the original. Is the compression happening on import or export? Running Storyline 3.53.