Difference in image quality

May 08, 2015

Hi!

I am working with a project containing wireframe images. My problem is that those seem to differ in quality from image to image, and I can't seem to find any consistency in how they appear - if they look sharp and nice, or if they get a bit fuzzy and the colouring is off (which I guess is a compression thing). It has nothing to do with the publish settings (the image quality is set to the best, and this issue shows already when previewing the page), and the images I import to Storyline are all created and saved in the same way. Still they differ in sharpness and colour in preview and when published - the majority of them look compressed. The bigger the screen where I look on the published result, the more it shows.

I've attached one of the pages that this problem appears on: There is an image covering the entire slide, which looks sharp. On that I have placed 4 separate images, containing only one wireframe symbol each (I've circled them in green here). As yo can see 3 of the separate images looks compressed (they are a bit yellowish), while the 4th up in the top left corner looks sharp and nice. I've tried to use different file formats for the images, different sizes (no, none over 2048 px), to not put states or triggers on them in Storyline, but no luck. I've also tried to take the big image (which looks sharp) and crop it in Storyline, but the cropped result looks compressed (even though it's the same image).

I'm don't know what else to try, what can I do to make the wireframe images look sharp and not yellowish?

Thanks!

/Anna

12 Replies
Ashley Terwilliger-Pollard

Hi Anna,

Thanks for sharing your file here with the images. I published it for Web (for ease of testing) and uploaded it here.  I'm not seeing the yellowing that you described or a difference in the image quality but wanted to have you take a look at it as well. You also mentioned the larger the player or screen is, the blurry it may be, which depending on the original size and scale, it's having to scale larger and therefore may cause display issues - you could lock the player/browser size as described here. 

Anna Jönsson

Hi Ashley,

Me, my colleagues and our customer all see the quality difference - perhaps it's a question of what kind of screen you’re using.

We don't want to lock the player/browser size, since the production will bee shown on big screens for an audience. Even though - we still see the quality difference when we preview, which is at the productions original size. All the images are big enough never to be shown bigger than they actually are even when scaled up on big screens - I've tried everything up to 2000 px for the separate images with only one wireframe symbol each.

My guess is that this kind of images, wireframes with thin and sharp lines, looks compressed easier than other types of images (even though that does not explain why a few of the images looks crisp). Is there any image file format that would be better to use in Storyline for this type of images? I've tried png, jpg, gif etc, but the result is the same. Or is there anything else I can do for Storyline not to compress these images at all (under publish settings I set the image quality to 100%, but that doesn’t seem to be enough)? What puzzles me the most is that the quality seems to be random – a few images looks perfect while others doesn’t look good ...

Ashley Terwilliger-Pollard

Hi Anna,

I'm just on a laptop screen 1920 x 1080 with the DPI setting at 96 (based on using Storyline), and typically view stuff in my browsers at 100% zoom as well. The maximum size for images in Articulate Storyline is 2048 pixels x 2048 pixels. Images that are larger than this will lose quality when inserted into Storyline, which may make them appear blurry or fuzzy.

Here is a really great post about different image types and when to use one vs. the other.  

David Charney

Hi Anna,

I am not seeing it either. Could you post a screen shot of what you are seeing? I might be on a brighter monitor that is reducing the yellowing you mention and I am not seeing the artifacting due to potential compression either. I do notice that the images circled are scaled to 53%, which can cause some shadowing/yellowing because it is scaling down the image and trying to decide where all the pixels sit).

Dominik Ginthier

Hello Everyone,

I know this thread is quite old, but today I came across the same "issue". I tried to import an image with roughly 9900 x 1000 pixels (3,5 MB). Unfortunately Storyline 360 is reducing the image to a maximum of 2048 pixels. The only workaround I found is to cut the image into smaller pieces and to group them together in Storyline.

Are there any plans to remove the limits in the very near future? 

The idea is to add motion paths to the visual so that the learner can navigate/scroll through the image.

Thank you in advance.

Best,
Dominik

Ashley Terwilliger-Pollard

Hi Dominik, 

2048 is the maximum dimension for Storyline's width and height, so if you're inserting an image larger than that it'll be scaled down to fit. 

I haven't heard any recent changes to this, but we'd love to know more about how this would help with your course design! I’ll be happy to pass your thoughts on to our product team, but you can also feel free to detail them more through a feature request!

Dominik Ginthier

Hi Ashley,

Thank you for your quick reply.

It is nothing super important. I took my large picture and cut it into four smaller images. After inserting them into Storyline I grouped them together. Same result, just some additional steps. 

In times of 4K (3840 x 2160) or even 5K (5120 x 2880) displays it is maybe worth to re-evaluate the maximum picture size of 2048 by 2048 pixels. 

Best regards,
Dominik

Evan Bahoric

I strongly 2nd Dominik here. I've seen creators in these forums having issues with this for years. Its well overdue especially as 8K is becoming a thing... heck, my PHONE has a 4K display. Sure the project file sizes will be enormous, but storage is getting cheaper and cheaper and user expectations are getting higher and higher. Hope this limitation is removed SOON.

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