Blurred images when adding to course, but not outside of course

Jan 08, 2020

Hi, I'm coming across a strange issue when trying to build a scrolling image in my course. I have created a long, narrow height image to use as my background, and plan to have it scroll as I go. However, I wanted to put it in my course just to see how it looked and determine if I needed to adjust the width of my course to see more/less of the slice of the background. When I place my image, it defaults to being the width of the slide, too small. When I resize, it becomes blurry, even though it's at the specs the image was made to be. I have tested in PowerPoint to confirm that the image should not be blurry at that size. Any ideas what's going on here and how I can fix it?

Thank you! 

7 Replies
Jennifer Shelden

Hi Tom, I've made the image in a variety of sizes testing various options. Attached is the one I confirmed in PowerPoint shouldn't be blurry. I'm not sure if there's a better way to be doing this or an output I should be using that will work better?

I'm planning on using it as a slider thumb image and have another slice of the background that will move separately on it's own slider to create a parallax scroll effect. 

Jennifer Shelden

I did see that, and when I shrunk the image down to the image size limit and output it, it still was blurry though (even though it is then around 2048 x 200 px). That version attached here. 

I also tried changing the slide size to be the longest length so that Storyline wouldn't auto-size the image to the slide size to test how it looked. 

Phil Mayor

I do find that when you add images inside  a slider they get blurry.

 when I inserted into storyline it shows as 2048x177 but it does look blurry before I add into a slider (it also looks blurry in photoshop but may be because I have to zoom it). The other image looks much better in photoshop. 

You could try outputing the image as 96 DPI but not sure it will help much. Only other things I would check are the output quality and the slide size

Tom Kuhlmann

How are you creating the image? A few thoughts:

  • When you insert the image as a thumb, it's going to get some compression. It's more noticeable on line drawings such as this because they tend to be crisp and when not, it's more obvious than an image with millions of colors.
  • If the original starts as a vector drawing, I'd save as a vector and see if that helps: you could try .emf and .wmf. You can also save as a .svg but you can't import that into Storyline. However, you can insert into a PowerPoint slide, then copy and paste the image over and ungroup it. It'll look pixelated on the slide, but the preview should be crisp.
  • If you can't save as vector, try .gif since the image is mostly solid colors and won't have as much artifacting as a .png.

If you want to insert the image into the slide as you were going to use it and then share that slide, it may help us better see what you're seeing and what you want.

Jennifer Shelden

Thanks to both for the tips so far!

Saving as a vector weirdly makes it very pixelated, which logically doesn't make any sense in my brain, but oh well. The SVG route has worked, I just have to go back in and recolor everything, which is not the end of the world if it could solve my blur issue. However, when I save as image for the slider thumb, it returns to being blurred, even as a regular image in Storyline. Is there a way to get this type of image saved in a way that it could be a slider thumb?

The clearest image I have gotten thus far can be seen in action as a slider in Review here. It looks much better when the screen is brought down to the "optimal" size.

This discussion is closed. You can start a new discussion or contact Articulate Support.