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. 

188 Replies
Aly Summers

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 

Lauren Connelly

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!

Aly Summers

Hi Jirah - if you see my above comment, the only work around I was able to find was to use SVG images, which stayed clear in any browser and scaled to any size clearly. However because Storyline doesn't have native support for SVG images, I had to embark on an adventure to get it done. Here are the steps I had to follow to make this work:

  1. Export images to SVG
  2. Import images to PowerPoint 365
    1. note: only 365 has native support for SVG images, because my organization doesn't use 365, I had to send the images to my personal laptop to add them to PPT, then send the file back to myself at work
  3. Import PowerPoint slides into your project

Something else to note about this solution, the SVG images will be listed as "Picture 1", "Picture 2" etc. If you import multiple PowerPoints it will re-use numbers, so you will end up with multiple images with the same name in the media library.

Ren Gomez

Hi Shari,

To confirm, are you running into blurry images only after you insert them into Storyline, or are you noticing blurriness when you screenshot them from the website?

If you'd like a hand, feel free to share your image files with our support team, and they can guide you on how best to import them! 

Shari Ifrach

The images are perfect in snag it and they are high definition pictures and when I copy them into storyline they get blurry. Then I’ll bring them into storyline and obviously they’re slightly blurry but once I go to publish them even if I change all the parameters they are still very blurry.
Thanks
Sent from my iPhone

Shari Ifrach

Ren,
Here is what is happening. I am not sure if my explanation was clear. I get a high definition screen shot of my site and add it to storyline. It is blurry when I insert it as a picture or as a copy and paste. Then I publish it using the parameters set for no compression and they still come out blurry. The files are too big for email. I will upload them to the support site.
Shari

 

Shari Ifrach

I have followed the directions and it is better.If I decided to make the slide size bigger than the one that is list. Would that enhance the image too? I am trying to use a the test feature with a recording and wondering if the slide size will make a difference on the image. I know that the recording get in-bedded into the background of the slide. Which is dumb. I want to resize the recording to get space. 

Matt McGuire

Shari- have you had any resolution to this, because I have the same issue and I can't really afford to implement all of these supposed work arounds when it would be simpler for it to be fixed. The many, many people who have this issue in a number of articles on this site is pretty clear evidence that this is a Storyline issue.

Shari Ifrach

Hi Matt,

Yes I did. The images I need are from our website and are dynamically made.  So I can't get the image in a vector drawing from the person creating them. What I do and it works pretty well is  I use Snagit to screenshot Internet Explorer at a zoom level of 150 -120% that way I get the biggest and clearest screenshot. I save the image as emf -windows vector file. This gives me the clearest image. I have played with the size of the slide but that has more to do with after I have copied it in. 

I hope this helps.

Shari

Shari Ifrach

Yes I did. The images I need are from our website and are dynamically made. So I can't get the image in a vector drawing from the person creating them. What I do and it works pretty well is I use Snagit to screenshot Internet Explorer at a zoom level of 150 -120% that way I get the biggest and clearest screenshot. I save the image as emf -windows vector file. This gives me the clearest image. I have played with the size of the slide but that has more to do with after I have copied it in.

Ren Gomez

Hi Tsvety, Beth, and Matt,

Thanks for popping in here to share your experiences, and I'm sorry you're running into this! Tsvety connected with our support team, and it looks like they came across a bug we have reported where:

Override of image compression on published images causes blurred or low-quality output.

If you haven't made changes to the image quality, connect with our team to take a closer look at your file and offer further guidance on what is happening behind the scenes here!

We'll be sure to reach back out in this discusssion when there's an update on a fix.

Tsvety Pendeva

Hi Ren,

Thanks for the update, however this doesn't seem very clear. How am I supposed to proceed as I need to make changes to 2 courses and publish them tomorrow on the LMS and the images are with embarrassing quality. The export quality is set to the highest possible as it is important for us the images to be shown at the best possible quality as it's a medical course on image interpretation.