Forum Discussion
How to keep image quality after inserting into Storyline
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
107 Replies
I have the same problem with captures. The only solution I found was to return to the classic player, and set a fixed size. But it is not the ideal solution when displaying on small screens.Hi everyone!
We just released Storyline 360 (Build 3.57.26407.0) today, which includes the option to import scalable vector graphics (SVGs) to Storyline 360 so images stay sharp when learners zoom in and out.
Thank you to everyone who continued sharing how important this feature was in Storyline 360. Now all you need to do is update Storyline 360 in your Articulate 360 desktop app!
If you run into any issues, don't hesitate to reach out in this discussion or in a support case.
This does not fix the problem
Hello Krystina!
Can you share more about what you're running into? Are you finding the quality of SVG files is compromised when importing them into Storyline 360?
Praise be to the mother of Mary! Finally, something that works to get an image into a scrolling panel that does not get screwed up because it is over 3000px long. Now I open my images in Illustrator, convert it to SVG and finally I no longer have to shoot spit wads at the wall to calm myself down. Thank you.
Hi all!
I am jumping into this discussion to share that we just released Storyline 360 (Build 3.63.27628.0) which includes changes to how images are handled.
Fixed: We improved how Storyline 360 handles images during import and in the published output, resulting in crisper images.
Now all you need to do is update Storyline 360 in your Articulate 360 desktop app!
If you have additional questions, don't hesitate to reach out in this discussion or in a support case.
Hi
It is now May 2022 and I am still waiting for a resolution to this issue. My clients are becoming restless.
Hi Gary!
As shared by my colleague, we've released a version of Storyline 360 that essentially publishes image files as is to prevent any loss or drop in quality. You'll need to do the following to see how the new version of Storyline 360 affects image quality:
- Update Storyline 360 in your Articulate 360 desktop app
- Republish your Storyline 360 courses
If the image quality does not improve after doing the steps above, you can reach out to our support team here and we'll be glad to take a closer look at your project and image files.
New to Storyline, but I have found the solution around the 2048x2048 image cap. Using Illustrator or equivalent, convert your image file (jpg, gif, png, ex.) to be exported as an imbedded .svg file. On export, the svg is converted to .js code and not compressed.
Storyline ignores the rules of other image formats when dealing with svg. However, this also means it does not have the same style settings, like borders or picture effects. Also, the image may not be visible on the authoring stage, but the preview and exports just fine.I see the .js javascript conversion of the .svg file. I am still not getting the full resolution for some reason in Safari.
It might not be a Storyline issue.
Picture of file size comparison between .SVG and the .JS conversion.i had to insert the the .SVG file into PowerPoint and then import the powerpoint slide contents into Storyline to get the .SVG file to display when editing the .story file.
Exporting to .SVG with Photoshop 2024 caused the inserted .SVG file to not display when editing the .story file.
I tested SVG with embedded PNG in march because Storyline had imported PNG without alpha channel incorrectly at that time (as jpg !!!).
The only disadvantage of SVG with embedded PNG is the file size (33% because the image is encoded as base64)
Jürgen
Hi Guys,
I am also facing the same issue i have tried all the above solutions. but still facing the same problem.
Hello Bhagyashri!
Sorry that you're running into the same issue! If you've already tried what is listed above, then I'd recommend reaching out to our Support Engineers by submitting a support case. I'd encourage you to share your .story file with them too!
Hi Bhagyashri,
Thanks for reporting this in a case and sharing the files! I see you're working with my colleague Cleober, and he recommended that the dimensions of the imported image do not exceed the Design > Slide size, along with the best practices for high-quality images.
Let's continue the conversation in your support case, but I'm happy to assist further as needed!
Hi Eric,
I tried resizing picture before importing it into the articulate but still facing the same issue.
Hi Bhagyashri!
Thanks for following up!
I've updated your support case with the added feedback you shared so Cleober can be notified. We can continue this conversation over in your support case to keep all information in one spot!
please upload an example with your problem here as attachment
- a .story file
- an example picture in the original resolution
