PNG, EMF, WMF, even resorted to trying the TIFF...all import as fuzzy or noticeably lossy in Storyline (Storyline 360).
Note 1/24/17 - This problem is persisting among all vector as well as raster images that Storyline can import; I've tried them all. And in all browsers, whether accessing the HTML or the Flash version after publication. Please provide a solution, thank you. This issue goes to the core of what I acquired Storyline for == to publish crisp, professional-looking modules.
We have seen a couple of similar reports. Can you tell me if you're viewing the content with Flash or HTML5 and what browser you are viewing the content in? If you'd like for our team to take a look, you are welcome to share your file here.
I saw you linked back to a few much older discussions about the issues with vector graphics, specifically this one. It's a long one, but there is a good amount of discussion there in terms of how to properly export from your image creation tool and use within Storyline (1 and 2 specifically). Overall we recommend adhering to the general guidelines here for using images and media in your projects. You'll also notice in our comparison chart that images aren't vectored in a zoom region.
With all that being said, what Alyssa noted in terms of the HTML5 output being a bit blurrier is something we've seen recently with Storyline 360 and our team is investigating. I know that it seems Edge and Firefox are working better with this than Chrome, so if you're able to share a copy of your course with our Support Engineers that'll help us narrow down the issue further and weigh in on any specifics about your images.
Hi Alyssa, I've tried all vector images types that Storyline will import, and all raster types as well. I've adjusted the Quality Publishing controls in both Storyline, as well as in my drawing app Adobe Illustrator. Files in Illustrator are crisp, once imported to Storyline they are fuzzy along all file types on the stage, in Preview, and after publication.
I've attached two examples for comparison. One is the crisp "pre-Storyline" image, and the second is the image after being imported into Storyline. You can see in the latter there is a word "Measurement" in the upper-left hand corner that is crisp; this is because it is the only element I created in Storyline. The imports were degraded.
I've tried Firefox, IE (post-10), Safari, and Chrome. Chrome is the worst, the others are not presentable either.
Fix needed on this issue. Thank you for any practical feedback or solutions that you and your team may have to share. I am seeing this issue discussed in blogs throughout eLearning Heroes and elsewhere on the internet, and seeing examples of this as far back as four years ago. Not to be cruel, but I don't know how anyone is relying on Storyline if this is persisting. It goes to the core of what the application is for.
No offense intended, I hope these details are helpful for your business and for finding a resolution. Thank you.
NOTE - the off-center red text in the second image is due to a misalignment here. I was able to resolve that in 2 seconds. The blurriness persists.
I hear your frustration, Adam, and I appreciate you for persisting on this issue. We are aware that Storyline 360 renders blurry images in Chrome when content is viewed with HTML5, and our Quality Assurance team is monitoring the way this issue impacts our customers and figuring out how a change here might fit in with other priorities. I'll be sure to share your experience with the team and include this discussion thread in the report.
Are you able to see a marked difference in image quality when comparing the Flash output and the HTML5 output? At this point the only workaround I can offer is to use Flash instead of HTML5.
Hi Alyssa, please note that the issue is not only in Chrome. It happens in at least Firefox, IE, and Safari as well. Also, the image degrades noticeably simply upon import onto the stage, then gets worse in Preview as well as upon Publication. So it does not appear to be a browser-based issue. I'm also sure you guys are not sitting around ignoring all of us, and so thank you for your persistence as well.
All of that information is really helpful, Adam. Thanks for those details. It sounds like this could potentially be a completely separate issue than the one I mentioned before. I'll share all of this with the team and post an update here as soon as I can!
Thanks. I think Storyline is posited as the elearning authoring of choice, hands down. But I will look forward to this resolution as soon as it is available as I'm unable to usefully implement Storyline products for customers in the mean time.
Just wanted to let you know it looks like your thread responses are coming in multiple times here. You're welcome to pop back in and remove the duplicates.
Update - the best workaround (until a fix is provided) that I've found is to open the published Story_flash file, and not the other provided options. And in Firefox. There is still fuzziness however. Sharp image is lacking unfortunately. But it is less than opening in HTML5 or with another browser.
Also tried importing images at calculated sizes. So no resizing in Storyline. That did not abate the issue either.
If you anyone else has any tips, I'm always all ears. I'd like to work with sharp images and that just doesn't seem to be in the cards with the intel I have at present.
Hi Adam. Just curious but have you tried exporting the vector image from Illustrator as a PNG sized to the proper screen size and then importing that into Storyline? I frequently do that with Illustrator-created vector images. (Choose "Save for Web" option in Illustrator.)
I'm seeing a similar problem when I'm publishing through Articulate Studio. (I'm guessing it has the same compression method as Storyline). I've upped the image quality to 100%, but it doesn't seem to have much effect. Even the text I use on the slide titles (nothing special in the font - just Arial at 32 pt) is fuzzy.
Any ideas on how to resolve this? The low quality makes the presentation look bad.
I'm using Studio '13. I published for LMS, and also published directly to AO. Here's what I'm finding...
The file has an included video in one of the slides. Sometimes, the player controls appear as an overlay on the bottom of the screen (which appears on hover), and other times it's a permanent set of controls directly under the screen.
Sometimes, one type will open up over the other. I understand that the overlay controls means I opened the HTML 5 file, while the permanent controls are the Flash version. It's the HTML 5 version where I'm finding that the text and images aren't as crisp. The Flash version looks much better.
I just republished an LMS version for you to view. :-)
Thanks for the published zip file! I uploaded it to SCORM Cloud here and tested it on an iPad to force the HTML5 content, and sure enough I did see blurry text and images like you described. Fortunately, as long as your learners are viewing the course in a Flash-enabled browser, they'll see the Flash version instead of the HTML5 version.
I'll take this issue to my team, and we'll determine next steps. Depending on priority and risk, some bugs can be fixed very quickly, while other bugs take longer to resolve. I’ll let you know as soon as we have an update. Thanks so much again for letting us know about this, and I’m sorry if it’s causing you headaches.
We do have the original issue shared here filed with our team.
I wanted to share some information on how we define bugs and how we tackle them when they occur. That being said, if you could share your Articulate Package for us to take a look at, that would be helpful.
This may be a resolution for this concern if not already mentioned.
I too was experiencing pixelated or degraded vector images in Storyline 360. This occurred when creating something even as simple as a circle or oval in Illustrator then copying and pasting the vector shape into Storyline 360 (newest version). This also happened when importing the image as a PNG which was exported from Illustrator.
My Workaround: I copied the vector path or shape in Illustrator and pasted it into a new Photoshop document. Then select 'Save for Web'. Settings were set to 'PNG-24', 'Transparency' checked, 'Interlaced'checked, Image Size 100%. Quality set to 'Bicubic Sharper'. Then select Save.
When the exported PNG image was imported into Storyline 360 it was thankfully crisp as can be.
Not sure if this helps but worth a try.
Presuming this could work for photos or rasterized images also but I have yet to test this.
Zoinks, that sounds like a lot of work, so thanks for discovering it and sharing it.
As for Articulate, I'm seeing 2 years of "we're aware of it, we're monitoring it, and we're working on it" with no solution... from a user's perspective, this is really not acceptable. I do a lot of screen captures, and our users should believe they're working in the live system, and this is difficult to achieve with fuzzy images.
25 Replies
Hi there Adam!
We have seen a couple of similar reports. Can you tell me if you're viewing the content with Flash or HTML5 and what browser you are viewing the content in? If you'd like for our team to take a look, you are welcome to share your file here.
Hi Adam,
I saw you linked back to a few much older discussions about the issues with vector graphics, specifically this one. It's a long one, but there is a good amount of discussion there in terms of how to properly export from your image creation tool and use within Storyline (1 and 2 specifically). Overall we recommend adhering to the general guidelines here for using images and media in your projects. You'll also notice in our comparison chart that images aren't vectored in a zoom region.
With all that being said, what Alyssa noted in terms of the HTML5 output being a bit blurrier is something we've seen recently with Storyline 360 and our team is investigating. I know that it seems Edge and Firefox are working better with this than Chrome, so if you're able to share a copy of your course with our Support Engineers that'll help us narrow down the issue further and weigh in on any specifics about your images.
This post was removed by the author
Hi Alyssa, I've tried all vector images types that Storyline will import, and all raster types as well. I've adjusted the Quality Publishing controls in both Storyline, as well as in my drawing app Adobe Illustrator. Files in Illustrator are crisp, once imported to Storyline they are fuzzy along all file types on the stage, in Preview, and after publication.
I've attached two examples for comparison. One is the crisp "pre-Storyline" image, and the second is the image after being imported into Storyline. You can see in the latter there is a word "Measurement" in the upper-left hand corner that is crisp; this is because it is the only element I created in Storyline. The imports were degraded.
I've tried Firefox, IE (post-10), Safari, and Chrome. Chrome is the worst, the others are not presentable either.
Fix needed on this issue. Thank you for any practical feedback or solutions that you and your team may have to share. I am seeing this issue discussed in blogs throughout eLearning Heroes and elsewhere on the internet, and seeing examples of this as far back as four years ago. Not to be cruel, but I don't know how anyone is relying on Storyline if this is persisting. It goes to the core of what the application is for.
No offense intended, I hope these details are helpful for your business and for finding a resolution. Thank you.
NOTE - the off-center red text in the second image is due to a misalignment here. I was able to resolve that in 2 seconds. The blurriness persists.
A
I hear your frustration, Adam, and I appreciate you for persisting on this issue. We are aware that Storyline 360 renders blurry images in Chrome when content is viewed with HTML5, and our Quality Assurance team is monitoring the way this issue impacts our customers and figuring out how a change here might fit in with other priorities. I'll be sure to share your experience with the team and include this discussion thread in the report.
Are you able to see a marked difference in image quality when comparing the Flash output and the HTML5 output? At this point the only workaround I can offer is to use Flash instead of HTML5.
Hi Alyssa, please note that the issue is not only in Chrome. It happens in at least Firefox, IE, and Safari as well. Also, the image degrades noticeably simply upon import onto the stage, then gets worse in Preview as well as upon Publication. So it does not appear to be a browser-based issue. I'm also sure you guys are not sitting around ignoring all of us, and so thank you for your persistence as well.
Same issue in Flash as well as HTML5.
All of that information is really helpful, Adam. Thanks for those details. It sounds like this could potentially be a completely separate issue than the one I mentioned before. I'll share all of this with the team and post an update here as soon as I can!
Thanks. I think Storyline is posited as the elearning authoring of choice, hands down. But I will look forward to this resolution as soon as it is available as I'm unable to usefully implement Storyline products for customers in the mean time.
This post was removed by the author
This post was removed by the author
Hi Adam,
Just wanted to let you know it looks like your thread responses are coming in multiple times here. You're welcome to pop back in and remove the duplicates.
This post was removed by the author
This post was removed by the author
Update - the best workaround (until a fix is provided) that I've found is to open the published Story_flash file, and not the other provided options. And in Firefox. There is still fuzziness however. Sharp image is lacking unfortunately. But it is less than opening in HTML5 or with another browser.
Also tried importing images at calculated sizes. So no resizing in Storyline. That did not abate the issue either.
If you anyone else has any tips, I'm always all ears. I'd like to work with sharp images and that just doesn't seem to be in the cards with the intel I have at present.
Hi Adam. Just curious but have you tried exporting the vector image from Illustrator as a PNG sized to the proper screen size and then importing that into Storyline? I frequently do that with Illustrator-created vector images. (Choose "Save for Web" option in Illustrator.)
Hey there,
I'm seeing a similar problem when I'm publishing through Articulate Studio. (I'm guessing it has the same compression method as Storyline). I've upped the image quality to 100%, but it doesn't seem to have much effect. Even the text I use on the slide titles (nothing special in the font - just Arial at 32 pt) is fuzzy.
Any ideas on how to resolve this? The low quality makes the presentation look bad.
Hi there Chris!
It sounds like you're seeing blurry text and images when viewing a published Studio file, is that correct? Can you help me with a few more questions?
Also, if you could share your Articulate Package with me, that would be really helpful. Here's how!
Hi Alyssa!
I'm using Studio '13. I published for LMS, and also published directly to AO. Here's what I'm finding...
The file has an included video in one of the slides. Sometimes, the player controls appear as an overlay on the bottom of the screen (which appears on hover), and other times it's a permanent set of controls directly under the screen.
Sometimes, one type will open up over the other. I understand that the overlay controls means I opened the HTML 5 file, while the permanent controls are the Flash version. It's the HTML 5 version where I'm finding that the text and images aren't as crisp. The Flash version looks much better.
I just republished an LMS version for you to view. :-)
Thanks!
Hi Chris,
Thanks for the published zip file! I uploaded it to SCORM Cloud here and tested it on an iPad to force the HTML5 content, and sure enough I did see blurry text and images like you described. Fortunately, as long as your learners are viewing the course in a Flash-enabled browser, they'll see the Flash version instead of the HTML5 version.
I'll take this issue to my team, and we'll determine next steps. Depending on priority and risk, some bugs can be fixed very quickly, while other bugs take longer to resolve. I’ll let you know as soon as we have an update. Thanks so much again for letting us know about this, and I’m sorry if it’s causing you headaches.
Thanks, Alyssa! Glad we were at least able to nail down why it appears in some cases and not in others.
Dear Articulate Team,
I am still facing this issue, any idea if it can be resolved or any available workarounds?
Hello Naeem and welcome to E-Learning Heroes :)
We do have the original issue shared here filed with our team.
I wanted to share some information on how we define bugs and how we tackle them when they occur. That being said, if you could share your Articulate Package for us to take a look at, that would be helpful.
Hi Everyone,
This may be a resolution for this concern if not already mentioned.
I too was experiencing pixelated or degraded vector images in Storyline 360. This occurred when creating something even as simple as a circle or oval in Illustrator then copying and pasting the vector shape into Storyline 360 (newest version). This also happened when importing the image as a PNG which was exported from Illustrator.
My Workaround:
I copied the vector path or shape in Illustrator and pasted it into a new Photoshop document. Then select 'Save for Web'. Settings were set to 'PNG-24', 'Transparency' checked, 'Interlaced'checked, Image Size 100%. Quality set to 'Bicubic Sharper'. Then select Save.
When the exported PNG image was imported into Storyline 360 it was thankfully crisp as can be.
Not sure if this helps but worth a try.
Presuming this could work for photos or rasterized images also but I have yet to test this.
Zoinks, that sounds like a lot of work, so thanks for discovering it and sharing it.
As for Articulate, I'm seeing 2 years of "we're aware of it, we're monitoring it, and we're working on it" with no solution... from a user's perspective, this is really not acceptable. I do a lot of screen captures, and our users should believe they're working in the live system, and this is difficult to achieve with fuzzy images.