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 for reaching out and sending in a file for our Engineers to test.
I'm recapping my teammate Cleo's tips publicly for others following along:
For the highest quality videos and pictures in Storyline 360 courses, we recommend using videos and pictures with dimensions that don't exceed the story size.
If your slide is 1024x576, your media should be cropped/resized to 1024x576 before it's importing into Storyline. If you change the scale of the media in your course, it can cause blurriness in the published output. To check the size of your imported media, right-click on it and select Size and Position. If the scale isn't set to 100% (both height and width) then that'll cause blurry media in the published output. More here:
We also suggest using PNG files, this vector format is great for images with lines and shapes and typically renders a much sharper image than other image formats.
If you set your media to fit perfectly in your Storyline slides and you still see issues in the quality, it's likely that the published slides were stretched to fit the browser window. Using the modern player automatically stretches the player to fit the browser. If the learner has a high resolution/large monitor, chances are the 1024x576 slide will be stretched and may result in blurry media.
Thanks for sharing this Katie, one small correction though:
> We also suggest using PNG files, this vector format is great for images with lines and shapes and typically renders a much sharper image than other image formats.
PNG is a raster format, just like JPEG. For the best possible quality it would indeed be a good idea to use some vector format (like SVG), but sadly that is to the best of my knowledge not supported by Storyline.
Storyline does convert any imported image to inline SVG. And if you really want vector SVG you can use it, either by importing it from Powerpoint, it then gets converted to a Storyline shape... and shapes are SVG. It still is a cumbersome procedure alas, but it is SVG. Also you can use javascript code or json to directly create png's in Storyline. Not for the unexperienced non-technical, but it is possible.
I echo Jeffery's post. I am having the same issue with screencaps from Snagit. They look great on my pc until I publish the project (review and final publish to LMS). We are building simulations of one of our systems and it is hard for the learners to see the image. SL lowers the picture quality when publishing. Is there a way to prevent it?
I know this topic is old, but I was having the same issue. I am writing some system training where i have screenshots dumped into a word doc. I was copy and pasting them in to storyline, but they would go blurry. I found, once I saved the image as a file and then inserted it, it was clear and crisp. Weird and a little annoying I cannot just cut and paste, but a solution all the same.
For system simulations it really is key infact to use the images as is, else you loose too much quality. I have quite some tricks to get it showing optimal. If you can share a sample of your images... and the course it has to be in...i can test if i get it showing properly.
This is the solution that I found works for my setup:
I'm using dual monitors, my SurfaceBook Pro 3000x2000 and a Samsung screen 3840x2160. I capture screenshots using SnagIt.
In Design/Story Size Setup I changed the Story Size to "Custom" using 2047Wx1151H. This is a 16:9 ratio.
I no longer have fuzzy images. See the two attachments showing the same images with Story Size Setup at the default 720x405 as well as the higher resolution.
It is 2021 now and we can't insert sharp pictures into Storyline 360... This can't be brushed off as a "feature request". I tried everything and still Storyline can't seem to show the original pictures. It's just laughable because Storyline has soo much good features and it is a real machine, but it can't do a basic thing like inserting sharp images. For companies, screenshots are used regularly in e-learnings, tutorials and manuals, so this is really concerning. Hope this get's fixed soon. (My images are smaller than 2048 x 2048 and still appear blurry "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.")
I'm definitely going to convince my superiors to switch development tool because this is just nonsense.
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.
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 is the solution that I found works for my setup:
I'm using dual monitors, my SurfaceBook Pro 3000x2000 and a Samsung screen 3840x2160. I capture screenshots using SnagIt.
In Design/Story Size Setup I changed the Story Size to "Custom" using 2047Wx1151H. This is a 16:9 ratio.
I no longer have fuzzy images. See the two attachments showing the same images with Story Size Setup at the default 720x405 as well as the higher resolution.
This is the most helpful comment I've seen in this thread. I set my dimensions (from the Design tab in Storyline) to 1920x1080, to match my screen size. The image in Storyline now looks perfect, but there's still one small issue. On each side of the published image (I'm publishing it to video), it's black. I wanted the image to fill the screen. How do I fix this?
1. Setting the image quality to 100% leaves the image without compression. So if you want an untouched image in the published output, then we recommend setting the image quality to 100%. Less/No compression does mean a larger file size.
2. In order to publish audio as is, you'll want to remove compression. This article explains this in great detail.
Let us know if you have any other questions! We're here to help!
Unfortunately, #1 is not the case. the 100% setting just means maximum #quality' of Storyline's subpar image processor. No one in this thread would have a problem, if a 'disable compression' setting existed ...
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:
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.
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.
104 Replies
Hi, Jeffery!
Thanks for reaching out and sending in a file for our Engineers to test.
I'm recapping my teammate Cleo's tips publicly for others following along:
Let us know if you have any questions about this!
Thanks for sharing this Katie, one small correction though:
> We also suggest using PNG files, this vector format is great for images with lines and shapes and typically renders a much sharper image than other image formats.
PNG is a raster format, just like JPEG. For the best possible quality it would indeed be a good idea to use some vector format (like SVG), but sadly that is to the best of my knowledge not supported by Storyline.
Storyline does convert any imported image to inline SVG. And if you really want vector SVG you can use it, either by importing it from Powerpoint, it then gets converted to a Storyline shape... and shapes are SVG. It still is a cumbersome procedure alas, but it is SVG.
Also you can use javascript code or json to directly create png's in Storyline. Not for the unexperienced non-technical, but it is possible.
I echo Jeffery's post. I am having the same issue with screencaps from Snagit. They look great on my pc until I publish the project (review and final publish to LMS). We are building simulations of one of our systems and it is hard for the learners to see the image. SL lowers the picture quality when publishing. Is there a way to prevent it?
I know this topic is old, but I was having the same issue. I am writing some system training where i have screenshots dumped into a word doc. I was copy and pasting them in to storyline, but they would go blurry. I found, once I saved the image as a file and then inserted it, it was clear and crisp. Weird and a little annoying I cannot just cut and paste, but a solution all the same.
For system simulations it really is key infact to use the images as is, else you loose too much quality. I have quite some tricks to get it showing optimal. If you can share a sample of your images... and the course it has to be in...i can test if i get it showing properly.
This is the solution that I found works for my setup:
I'm using dual monitors, my SurfaceBook Pro 3000x2000 and a Samsung screen 3840x2160. I capture screenshots using SnagIt.
In Design/Story Size Setup I changed the Story Size to "Custom" using 2047Wx1151H. This is a 16:9 ratio.
I no longer have fuzzy images. See the two attachments showing the same images with Story Size Setup at the default 720x405 as well as the higher resolution.
It is 2021 now and we can't insert sharp pictures into Storyline 360... This can't be brushed off as a "feature request". I tried everything and still Storyline can't seem to show the original pictures. It's just laughable because Storyline has soo much good features and it is a real machine, but it can't do a basic thing like inserting sharp images. For companies, screenshots are used regularly in e-learnings, tutorials and manuals, so this is really concerning. Hope this get's fixed soon. (My images are smaller than 2048 x 2048 and still appear blurry "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.")
I'm definitely going to convince my superiors to switch development tool because this is just nonsense.
Well. They still haven't fixed it. Simple solution.
Problem Solved!
Be able to import PDF's and .SVG's.
But why after so many complaints is just making me SMH.
Totally agree. Especially when they charge so much for their product!
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 is the most helpful comment I've seen in this thread. I set my dimensions (from the Design tab in Storyline) to 1920x1080, to match my screen size. The image in Storyline now looks perfect, but there's still one small issue. On each side of the published image (I'm publishing it to video), it's black. I wanted the image to fill the screen. How do I fix this?
may i know what type of storyline version do you use?
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?
This post was removed by the author
Unfortunately, #1 is not the case. the 100% setting just means maximum #quality' of Storyline's subpar image processor. No one in this thread would have a problem, if a 'disable compression' setting existed ...
Regards,
David
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:
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 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
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 Guys,
I am also facing the same issue i have tried all the above solutions. but still facing the same problem.