Images pixelating in Storyline 360

This is my first course, so I'm not sure if I am doing things correctly. But my images and .png files are terrible and fuzzy and pixelated when they are put in. They are placed at 100% or reduced a bit but nothing has been enlarged when placed. we have tried several resolutions - even 300% with no change in fuzziness. I am including a sample with a logo on page one and images on page 2. Can some one help me please?

thanks

10 Replies
Katie Riggio

Congrats on your first course, Shari! ūüéą

Happy to take a look into what's happening with the image quality and share my findings with you! Here's how the .JPG files in your sample slides look in my Storyline 360, Update 23, Preview and published output. I focused on the second slide, as it has multiple image files for us to explore:

Preview

Published

A few questions to help us dig deeper:

  • What Storyline 360 update are you using?
  • Could you share¬†a few original image files with me, so I compare¬†the before and after views?
  • Do my screenshots match what you're seeing on your end? Also, do you¬†notice¬†any blur in your published output?

In the meantime, (you've probably seen this already, but) here are our pointers on how to get the highest quality media in your Storyline 360 courses! Looking forward to helping!

Shari Pritchard

Please bear with me... I'm very new to this program. I don't know where to find what update version I am using. Can you point me there?

I do have some concerns about my header font not showing up in your screen shots. Don't the fonts stay with the story doc or do they have to be resident on the computer a learner is using? I hope that is not the case.....

We have only published for review at this point, but yes, everything is blurry on review publishing.

I will look at the pointers you indicated also.

Here are a few of the original images that are placed on Page 2 along with the logo that was placed on page 1.

Ashley Terwilliger-Pollard

Hi Shari,

 You can check what version you're using by going to the "Help" Tab -> "About Articulate Storyline". You'll see the build number listed in the bottom right corner.

The fonts are native to your machine, so they won't transfer with the .story file, but they will carry over to your published output when you share that with learners. 

Can you include a link to the course in Review so that we can take a look there?

Lastly, the quality settings Katie was pointing to would only impact JPEG files to prevent compression, and it looks like you're using PNGs. The other best practices you'd want to keep in mind are the top of that article on using images that don't need to be resized. 

Shari Pritchard

Thank you Ashley. Here is a link to a review for you to check. I did find the image quality in the publish wizard and put them up to 100%. I understand it will take longer to load but we need the image quality more than speed. The course itself isn't that long so I think we are okay.

On the resizing of the PNG files - do you mean I can't reduce them either or are you just referring to enlarging them? I haven't enlarged the PNG of the cat logo on the first page, I actually reduced it. But even when placed at 100% it still seems fuzzy. It was a vector EPS out of a Mac illustrator program that was saved as a PNG so we could keep the transparent background. But as a vector it should still maintain the ability to be crisp when sized down shouldn't it?

https://360.articulate.com/review/content/689bffc4-ad5c-47f3-b2d6-c4c58a8e55c7/review

 

Leslie McKerchie

Hey Shari,

Thanks for verifying your version for us. I'm not able to access your Review link above, so not sure if you've made some changes since you shared that in the forums.

Let's tackle your additional questions:

  1. Katie's documentation and Ashley's comment are referring to the built-in compression within Storyline, but your PNGs would not be included in this compression.
  2. Are you saying saving your EPS to PNG is where the quality loss happened? If so, I'd take a look at the software you used to convert this format. It's no longer a vector image once converted though.

I took a look at the original .story file you shared and saw the same results that Katie shared above.

Rob Barnes

I'm having the same problem. My graphics made outside of Storyline (in PowerPoint for example), are saved as .jpg's, and they look very fuzzy when put in Storyline. My image quality is set at 100%. (I'm creating some images in PowerPoint because the standard Storyline graphics don't have applicable ones.) Any help would be greatly appreciated.

Thanks,

Lauren Connelly

Hi Rob!

I'm happy to help!

I've tested this on my end and noticed that .jpeg images from PowerPoint are blurry in when imported into Storyline 360. I tried saving the images as a .png file and that did the trick! You can view a Peek of my testing by clicking on this link.

Can you try saving the images as a .png in PowerPoint? 

Also, we are now on Storyline 360 Update 40 (Build 3.40.22208.0). I'd also recommend making sure that you're using an updated version with the newest bug fixes and features! Here's how to update Storyline 360.