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?
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
Hmm, I wouldn't expect the image to the blurry since it's larger than the slide size. If you could share the image, that would be super helpful. To attach it to the forum thread, click here, then click the ADD ATTACHMENT button.
I am also facing the same issue with regards to image quality variation.I have tried various methods mentioned above but to no avail. Is there a solution to this?
Thanks, Shubh. Mind if we have a closer look at your file? You can send it to our team privately by clicking here. If you let me know your case number, I can follow along. ☺️
104 Replies
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.
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.
The image is attached here.
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?
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
.storyfile. 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.
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?
Hi Victor!
Do you have a sample file we could take a look at to see this happening? I'm not seeing that in my simple test, but I would like to take a look.
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?
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.
It's 2017 and I'm having the exact same issue Cheng. I've tried everything.
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.
Hi Joanna,
Are you able to share one of these images with our team and a copy of your .story file? You can upload those here to our Support Engineers.
hi guys,
was this ever resolved? i am also having the same issue with storyline 360. i have taken a screen shot of the difference.
i dont understand the degradation in quality. is it because of my story size?
Hi there John, sorry that's happening! Did you have to stretch the image for it to cover the slide?
If you're already following our best practices for high-quality images and you're still seeing a loss in quality, could you share your image file here?
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.
Hey John!
Hmm, I wouldn't expect the image to the blurry since it's larger than the slide size. If you could share the image, that would be super helpful. To attach it to the forum thread, click here, then click the ADD ATTACHMENT button.
I publish with the custom setting, on the highest quality...best output.
When you are viewing the unpublished version, it looks blurry, but it is much better when published.
Thanks for chiming in, Lesley! That's a helpful tip. 🌟
Hi Guys,
I am also facing the same issue with regards to image quality variation.I have tried various methods mentioned above but to no avail. Is there a solution to this?
Thanks for the screenshot, Shubh. What version of Storyline are you using? Was the image on the right a screenshot of the published output in HTML5?
Yes, the image on the right was a screenshot of the published output in HTML5. I am using Articulate 360.
Thanks, Shubh. Mind if we have a closer look at your file? You can send it to our team privately by clicking here. If you let me know your case number, I can follow along. ☺️