How to keep image quality after inserting into Storyline

Feb 11, 2014

Hi everyone,

It seems that no matter what quality an image has, its quality gets blurred after inserted into Storyline. Is there a way to keep the image quality as it is after inserting into Storyline?

Thanks in advance,

Cheng

104 Replies
Ashley Terwilliger-Pollard

Hi Cheng,

How large is the image size? There is a maximum image size of 2048 pixels x 2048 pixels. Images that are larger than this will lose quality when inserted into Storyline, which may make them appear blurry or fuzzy. There are two additional troubleshooting steps in the bottom of that article on how to retain the image quality if it's larger than 2048 x 2048 pixels. 

You may also want to look into changing the Image Quality settings in the Publish dialog.

Cheng Li

Ashley Terwilliger said:

Hi Cheng,

How large is the image size? There is a maximum image size of 2048 pixels x 2048 pixels. Images that are larger than this will lose quality when inserted into Storyline, which may make them appear blurry or fuzzy. There are two additional troubleshooting steps in the bottom of that article on how to retain the image quality if it's larger than 2048 x 2048 pixels. 

You may also want to look into changing the Image Quality settings in the Publish dialog.


Hi Ashley,

When I insert an image into SL (no matter it' larger or smaller than the default max image size), the image is always resized, which result in blurry quality. Let me show you an example here.

Before image is inserted into SL, the image quality is: (the image resolution is less than the default max image size)

After the image is inserted into SL, the image quality changes to...

As you can see, after the image is inserted into SL, the image quality is blurred. 

Have no idea why it happens. 

Cheng Li

Ashley Terwilliger said:

Hi Cheng,

Thanks for sharing the images. What type  of image are you inserting into Storyline? Would you be able to share the Storyline file and the image file with us here? If you'd prefer not to share in the forums, I can send you directions to share with me privately. 


That's okay. I attached both the image and the SL file here. The image type is png.

If you preview it in SL, you can see how the texts in the image get blurred.

Hope this helps you see where the problem is.

Thanks Ashley.

Bill Harnage

Hey Cheng,

Your player (output) is set to scale to fit the browser; this is what's causing the fuzz.  Preview mode does the same thing - you have a rather large slide size.

Go to your player settings > Options and lock the player to optimal size.  Once you publish it'll be nice and crisp.

But, if someone has a smaller resolution than your player size they will lose parts of the player that don't fit the resolution.

Cheng Li

Bill Harnage said:

Hey Cheng,

Your player (output) is set to scale to fit the browser; this is what's causing the fuzz.  Preview mode does the same thing - you have a rather large slide size.

Go to your player settings > Options and lock the player to optimal size.  Once you publish it'll be nice and crisp.

But, if someone has a smaller resolution than your player size they will lose parts of the player that don't fit the resolution.


Hi Bill,

I set the player that way because the images in my course are really large, but I want them to fit into screen and yet keep them at a high resolution. 

I used your settings as well, but it does not seem to work. The images are still blurred as they were. Is it something that I did wrong?

C. L. Norman

Referencing a comment I made on another thread,  I’m seeing image degradation as well.  But it might not be for the reason I was expecting.

As we didn’’t have the original assets used in this particular project and needed to do some minor Adobe Photoshop retouching (to remove name badges and replace with embroidered names), I used the trick here to recover JPEG images from the .story file.  I retouched those and replaced them in the project.  It looked fine when first dropped in there, but upon previewing the project yesterday, there was obvious blurring in the image.

I decided to “take a look under the hood” and found something interesting—there  were a number of image assets which had been converted to Adobe Flash (SWF) files.  In several cases, the images were quite small and the SWF version was actually larger than the original file!  With the attached image, you can see what the change to SWF introduced.  The left image is the original recovered JPEG, and the right image is the SWF version found in the newest version.  (If it’s not obvious, compare the light from the windows hitting the woman’s hair, and the fine lines on her forehead.)

I could understand rendering Storyline’s assorted animations and transitions (such as image cropping, zoom regions, etcetera) as SWF to speed execution and keep the filesize down, but some of these were static objects that had no such formatting applied.  I was wondering on the other thread if SL2 was “recycling” the images, and using lossy compression on them with each new publish or save.  Perhaps not, but the encoding as SWF—haven’t a guess there.

Victor Linnemann

Hi C. L. Norman!

Today I have made the same observation: A number of Images has been converted into SWF during production. The funny thing about this:  It happened with a story file that had been translated into several languages. Nobody touched these  images, changed the size or the position on the slide.  In the master Version there is only one Image that has been converted. The same is true for 2 of the translated versions. Only in the third Version, some additional images have been converted into flash.  In each production, Image quality is set  to 100%. I don't get the clue about this behavior. The result is that one SCORM file is 2 times bigger than the others.

What does trigger this optimization?

Victor Linnemann

Hi Leslie

Due to restrictions of the content owner I can't upload the complete story files. But I tried to isolate the problem. I just left one slide in each with the same image on it that has the same size (width is 2048px, height is smaller) and exactly the same position on both slides. With the original story files, this image had been converted into SWF only in  the publish of one of the story files but not in the other.

After deleting all other slides except that one with the grapic on it, both Images are converted into SWF in the publish.

How can that be?

Ashley Terwilliger-Pollard

Hi Victor,

Thanks for sharing the information here. As Leslie mentioned she didn't have any difficulty with her  publish, and it sounds like just one of your files? You mentioned the original, and I wasn't sure if the non-problematic one is the one that you initially started with? Are you duplicating the file, slides or images? Did you place these on a master slide or on an individual slide? 

You can change the publish quality settings within the publish window as detailed here, but there isn't an option to stop any media elements from going through optimization, except for MP4 videos as detailed here. 

If you're able to share the information privately we're happy to take a look at it there as well. You can send it along to our team of Support engineers here. 

Joanna Kurpiewska

I'm experiencing the same problem.

My progress bar in Illustrator is 30x401 px, whilst inserted in SL  (as .png file) is automatically resized to 31x402 px and it says it's 100% size. The publish quality is set to 100% but the image looks blurry and unprofessional. I'm pretty sure the client comes back pointing this as an issue. 

John Policarpio

Hrmm... would you be able to advise?

So I set my story size to 1024x768 (I don't know how to set aspect ratio in custom).

I then took a screen shot from my monitor with a resolution of 1366x768 (attached).

Plop it into the story, then set the scale to 100% which is bigger than the story.

Is that ideally how to keep it sharp? By maintaining the scale of the original sized image?

Best,

John

This e-mail may contain confidential and/or privileged information for the sole use of the intended recipient.
Any review or distribution by anyone other than the person for whom it was originally intended is strictly prohibited.
If you have received this e-mail in error, please contact the sender and delete all copies.
Opinions, conclusions or other information contained in this e-mail may not be that of the organization.