Slider thumb pictures blurry

I'm using a .png as a slider thumb. When the story is published, the thumb version of the picture is blurry. When the same image is inserted as a picture (at the same size), it's fine. Anyone know a way to fix blurry slider thumb pictures?

Screen snapshot attached showing the thumb slider version of the picture and the same image inserted as a picture.

23 Replies
Rob Pannoni

Thanks for the suggestion. I tried that, but it didn't make a difference.

Since the picture works fine when not used as a slider thumb, I'm fairly certain this is a bug. Storyline seems to be resizing the picture down to the default thumb size and then enlarging it again from the tiny version. This prevents using large thumbs, which greatly cripples the usefulness of the feature. 

I'm hoping that someone has found a workaround.  For instance, is there an alternative way (other than a slider) to constrain the path of a user-dragged object ?

Pierre Jouan

I do get a slight difference when publishing, expecially with Flash (less artefacts in red disk). See attached file.

You're right about the difference between pic and cursor : in the HTML 5 folder, you can see cursor is published as JPEG while picture remains as a crisp PNG.

(cursor on the left)

Rob Pannoni

I created a generic story for this. I'm exporting as HTML5 using Chrome on Windows.

The first image is what the thumb looks like at the default height of the slider.

The second image shows the slider height and thumb enlarged to the actual pixel size of the image.

The third image is inserted as a picture at 100% size. This version looks fine. 

Ashley Terwilliger

Thanks Rob for sharing that example. I see what you're describing when previewing (as that shows the HTML5 output) and once I published and uploaded a copy to Tempshare here. 

It appears in the HTML5 output in Chrome and Edge, although the Flash output doesn't cause the same blurriness. We've seen some blurriness appear in Chrome HTML5 based on how Chrome is rendering it - but since it's also visible in a few other set ups, I'm going to share this with my team as a possible software bug. 

From here, I’ll meet with my team to take a closer look so we can determine next steps. Sometimes my team catches errors in my logic and we don’t have a bug after all. Of course, if that’s the case, I’ll let you know! 

Depending on priority and risk, some bugs can be fixed quickly, while others take longer to resolve. Here's more information on how we identify and tackle bugs.

I’ll let you know as soon as we have an update on this issue. 

Leslie McKerchie

Hi Margit - No update at this time. I wanted to share some information on how we define bugs and how we tackle them when they occur.

This thread is attached to the report so we can update you when we can. Thank you for chiming in to share your experience and sorry that you've run into this and that it is slowing you down.

Ricky Ratcliff

Hi everyone, 

I'm running into the same issue. I've created a custom image to be used as a thumb fill image for a slider and when I export for HTML5 the image is completely pixelated. To the point that you can barely make out what it is. 

It seems to work fine when using EDGE and Safari, but in Chrome for Mac the image is completely distorted. The issue is that our company employees primarily use Chrome browser on Mac. I've tried resizing my image at least 30 times with no success. I've also tried every output option available. All of my other images are crystal clear in the same browser which leads me to believe this is a bug with how the images are compressed when used with the slider feature. Has there been any recent updates to this?

Leslie McKerchie

Hi Ricky,

Thanks for contacting us and sharing what you are experiencing as well. I see that you are currently working directly with Gerald on our support team.

Hi Pierre,

You are correct. We are still tracking and investigating this issue.

I wanted to share some information on how we define bugs and how we tackle them when they occur.

Ricky Ratcliff

Hi Neil - nothing yet on a software fix; however, I was able to use a work around that required me to hit the max size in width which is 2047px. My final graphic size was 2047px W and 1400px H. This is not ideal because the framing of my project looks a bit off; however, this is what worked for me. Pictures are not completely crisp, but look a lot better. I'm definitely less embarrassed to present the work now. 

Jen P

I just wanted to share what worked for me. I noticed that the slider thumb (with custom png graphic) looks sharp when the mouse hovers over it. If this is the case for you, then try duplicating the hover state, and name it Selected (or any of the SL built-in states). Then add a trigger to change the state of the slider to Selected when the timeline starts.

Correction: I realize that you actually need to create a Visited state, NOT Selected state. It doesn't really work with a Selected state, because every time the user interacts with the slider, the thumb graphic toggles back and forth between the Selected (sharp) state and the Normal (blurry) state. With the Visited state, the image stays sharp.