Blurry images in Storyline 360 Modern player

Hi all,

I'm having a terrible time with blurry images in Storyline 360. I'm using the modern player.

I've read the documentation about best practices for using images, but even with the zoom function my images aren't sharp. 

Newbie question...is it better to use jpg or png and not gif? Also, how can I best figure out the optimal size to use knowing that the modern player is going to expand it? I do have the player set to show at optimal size.

I'm attaching an example .story file here with one page where I'm having trouble with both images.

Thanks!

6 Replies
Tom Kuhlmann

There's always some degradation with images when they're being resized and scaled. Here are a couple of tips:

  • Preview and review are going to be a little blurry compared to the final published output because the course is being scaled to fit into the windows. The published output will look better.
  • Your image is 706x988 and your course size is 720x540. That means the image is being scaled down to fit into the course. And with the zoom enabled it's not scaling bigger than the course.  
  • The modern player is designed to scale to fit the browser. I'd create your story size to be larger than the image if you want the best quality. Also, instead of zoom image, put it on a layer with a link to open and close the layer. This way you get the best control over size and placement.
  • Here's a demo link. I made the story size 1600x1200 (design tab). Slide 1 has the zoom and slide 2 is a layer so you can see the difference. Scale the browser up and down and you can see how the image quality gets better when you get closer to the original size. 
  • I'd turn off shadows and picture effects as those will impact the quality of the image.
SAURAV KUMAR

Recently, I also get the same issue and I tried a lot to fix it. Only solution I find out is given as follows in few steps:

1. Do not crop or scale your image in Articulate Storyline.

2. If you want to resize the image. I better suggest you to use Adobe Photoshop for cropping and scaling.

3. Export the image from Photoshop as JPEG or PNG format and Import the image in Articulate Storyline. 

4. I repeat.. please do not scale or crop in Articulate Storyline. (if you are facing above issue.)

Thanks & Regards

Saurav