Forum Discussion
Blurry Images in Preview and Published
I've noticed this for awhile, all of my images I insert into this Storyline 3 course appear quite blurry everywhere - on the Storyline development screens, when previewed and when published (either as HTML5 or Flash).
The images are all smaller than the maximum size, they are at 100% scaling, have no effects applied to them. My Publish settings is set to 100% quality. I've tried bitmaps, pngs, jpgs, all identical blurry results.
I've searched these forums and seen a couple other threads on it , but never found a solution or real explanation for it. I can't send this course over to my client - it's embarrassingly bad.
190 Replies
- VictoriaPavryCommunity Member
Hi Katie, thanks so much for jumping in (and sorry for the slow reply).
The only thing I'm doing with the published Storyline slide is embedding it within Rise, so I don't know whether the problem exists independently of whether it is viewed through Rise, if you see what I mean ... not sure that is very helpful, sorry! I do know that the problem doesn't happen when the slides are previewed within Storyline.
I have attached an example Storyline file - I've made a mockup as the stuff I'm working on cannot be shared publicly, but since the issues exists with every file it should do the trick of showing the issue! I have also created a dummy course in Rise into which I have imported the file, to show the problem. See here: https://rise.articulate.com/share/jqZOgjP3cvKSwdNSV4WuP01kGxeCgSLd
When this issue first came up about 18 months ago I was able to fix it by changing the image quality to 100% when publishing, but this no longer seems to solve it. However, earlier this year (hard to say exactly when - perhaps January??) it returned and I haven't yet figured out the solution.
Finally, just to add that this issue only seems to present when the Rise course is viewed in Chrome at less than 100% (although further testing may be needed on this). However, Chrome is used by a very large proportion of our audience and screen size (therefore comfortable viewing magnification) varies significantly, so we really do want to find a fix.
Thank you so much in advance :)
Hi Victoria!
Thank you for sharing your files!
Here is how I tested the projects to see if the bluriness appeared on my end:
- Previewed the Storyline course
- Previewed the Rise course
- Added the Storyline course in a new Rise course
Unfortunately, I didn't see any bluriness. Here's a screen recording of my test.
Have you tried importing the old Storyline course into a new project?
Lastly, it would be best to bring in our Support Engineers for further troubleshooting. You can connect with them by using this link.
- VictoriaPavryCommunity Member
Hi Lauren
Thanks so much for taking the time to test this. I have recorded the issue as you suggested (sorry the sound quality is so awful!). Hopefully this helps? Just to add, it is not unique to my PC: I have had three colleagues test from different computers (all PCs rather than Macs).
Thanks again and all best
Victoria
- VictoriaPavryCommunity Member
Hello Victoria. Thanks for taking the time to share all of this with us!
I'd like to bring our Engineers to the table and have compiled our testing collection for them. Your video is super helpful in seeing the problem in Chrome first-hand.
Look out for an email from the team, and I'll follow along!
- EmmaCloughCommunity Member
Hi Katie,
I work with Victoria and she has gone on maternity leave a little earlier than expected! Can I pick up this thread for her please? Would it be possible to ask the engineers to contact me via my email address? As we won't be able to access Victoria's emails while she's on leave. Thank you!
- RenGomezStaff
Hi Emma,
Thanks for letting us know Victoria has gone on maternity leave! I've given my teammate Christopher the heads up, and he will contact you shortly with where they left off.
Be on the lookout for a response soon!
- AlySummers-05d5Community Member
Hi - I've been running into this issue as well. All of my images meet the image requirements, and I have my settings in the file to maximum quality. I use storyline 360 and it's updated to the most recent version.
When I export with the modern player, the images appear blurry in both Chrome and Firefox - the entire player scales up to whatever size the browser window is. If I scale the browser window size down, the buttons get clearer. Learners should not be required to do this - nor is there any guarantee that they will.
When I export with the classic player, the images appear blurry in Chrome but crystal clear in Firefox.
I've read through this entire thread and honestly I can't believe this is still a continuing problem. Is there any update to this being corrected? Will it ever be corrected?
Hi Aly,
Thank you for taking the time to tell us what's going on, and I'm sorry you're dealing with this issue.
It does sound like the image quality loss may be from the modern player scaling up to fit the browser window.
When you switched to the classic player, did you pick the Lock player at optimal size or Scale player to fill browser window setting?
If you can share the file through this private link, we are happy to take a closer look at both player types and see what we can recommend!
- MiriamLarson-bcCommunity Member
Please let us all know how this comes out and which settings to use!
Thanks!
M Larson - AlySummers-05d5Community Member
Hi Katie - I had the classic player set to lock at optimal size. When I change the setting to scale the player to fill the browser window I encounter the same issue - the images become blurry - this occurs in both Chrome and Firefox. However even with the player locked to optimal size images still appear blurry in Chrome.
I was able to get the modern player to lock to optimal size by changing the settings to: launch in a new window and resize browser to optimal size, however this creates an additional, unnecessary click for learners since "lock player to optimal size" is only available if you first select "launch in a new window". I also continue experience the same problem where images are blurry in Chrome but clear in Firefox.
For me the choice is clear - that I should use the classic player locked at optimal size for the best UX. This does not resolve the issue of images appearing blurry in Chrome. Are there any updates as to when this will be corrected?
Hi Aly!
We'd like to continue troubleshooting in a support case so that our Support Engineers can step in! Would you mind uploading your project to us? We'll take a look to see what the fix is for the blurriness you're seeing in Chrome. Here's a secure upload link.
- AlySummers-05d5Community Member
Hi Lauren - thanks so much for reaching out. The project itself is confidential and I am unable to share it. I can create a dummy version and upload it if you would like to continue the conversation, though I have found a workaround outlined below.
The workaround: SVG images. However this work around adds a significant amount of time and effort on my part, because Storyline doesn't accept SVG files...Essentially what I have to do is first export my images as SVG files, then import them into PowerPoint, then import the PowerPoint into Storyline. Once done the images scale PERFECTLY and look crystal clear in both Chrome and Firefox.
Here's the sticky part though: Only Office 365 offers native support to SVG images.
All of this could be avoided if SVG's were added as an accepted native file type in Storyline.
I found this thread (which goes back 2 years) requesting that this feature be added: https://community.articulate.com/discussions/articulate-storyline/svg-files-for-sl360-on-the-roadmap?page=2#reply-689554
I'm so glad you found a workaround, Aly! It sounds like that approach offers the exact outcome you're looking for.
We don't currently support SVG files in Storyline, but we do have a current feature request that was submitted to our product team. SVG support is not on our roadmap, but if our team decides to make this an addition in future updates, we'll let you know in this discussion!
Related Content
- 9 months ago