Poor image quality in HTML5 output

The image quality in my HTML5 output is very poor compared to the flash output of the same project. I have adjusted the publish settings but this has not made a difference. I have also re-inserted new images from my original source files.

I am sure when I started the project and tested the output, there was no issue. Why now?

You can view the html5 version here: http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp17r2c53vc12eo1e4noiboni1k3r1/story_html5.html

and the flash version here: http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp17r2c53vc12eo1e4noiboni1k3r1/story.html

Steve Wilkins

29 Replies
Jeff Forrer

Interesting.  What is also interesting is when you double-click David Unaipon and compare that larger picture, side by side between the two versions, those images almost look identical quality.  Are you using different images and/or image formats for the larger and smaller pictures?  Just wondering if the larger ones are pngs, and the smaller ones bmps or jpgs?  Not sure if this helps at all, but just my observation.  Good luck!

Jeff Forrer

I wish I had the answers, we use PNGs in SL to help allow scaling within SL without creating separate images, PNG gives the best quality as they are lossless, so you are using the right format.  But if you make a small and large PNGs using a program such as Photoshop, that may help.  Ideally it starts with the original image and the quality of that one from the start.  Scaling usually reduces quality.  If you start with a high res large image and use that to create the smaller ones from that versus the opposite, which you probably know, you will get a better result.  Good luck and let me know if you come up with an acceptable solution.

Laith Salama

Hi Steve,

Wow, that's a real headscratcher....

Maybe something for the mods to be able to steer you in the right direction.

The only suggestions I can make (although i'm positive you've probably already tried these, but any help is better than no help I guess) is on the ScreenR video on this link http://community.articulate.com/forums/p/15352/88792.aspx#88792 or have you tried setting your Player Template to "lock presentation at optimal size".

Good luck and if you figure it our please let us know as this is something we will all come across at some point i'd imagine.

Thanks,

Laith

AJ LaSaracina

Has there been any info on this?

I came across this today, and found  that using the "zoom" feature to zoom into text or a graphic is almost embarrassingly bad when you do such action on an HTML5 document compared to a Flash file.  I have made sure that my image quality settings are maxed as well as the output quality slider.

Christine Hendrickson

Hi AJ,

We're currently investigating an issue with text, image and object quality when zooming in HTML5 content. Are you able to share a URL, screenshots or your .STORY file, so we can confirm this is related to the issue we're testing?

If the file is too large, it may not post to the forums. If this is the case, please let me know and we'll find another method for sharing. 

If you can, please also let us know what version of Storyline you have installed. To find this information, click on Help > About Articulate Storyline. If you're not running Update 5, please download and install it, then test your project. 

Thanks!

Christine 

Erin Librarian

I would second this.  Have a look at the difference between the Articulate rendering and the originals (all images are PNG or JPG).  The colors are off and some of the lighter images don't display, even in Flash.  Even simple animations like a straight line or fade still look very shaky during animation.  Not much of an improvement over Studio '09.  I had higher hopes for better/smoother animation and picture/text quality.

Rod Westmoreland

This problem was first posted 5/20/2013.  The last time it was brought up was two weeks ago.  Is the quality issue being worked on?  I have the latest release and the image quality is still very poor when zooming in html5.  I am trying to use Flash as little as possible, but this will force me to only offer the Flash version until I can rebuild my courses without using zoom feature in certain parts.  Is there are planned resolution to this problem? 

Ashley Terwilliger

Hi Rod,

We continue to look at improvements and quality issues within HTML5, but it's also worth keeping in mind that objects aren't vectored in HTML5 output. As a result, they may not appear as crisp in HTML5 as they do in Flash if you set the player to scale to fill the browser. To avoid scaling and reduction in image quality, we recommend locking your course player at optimal size.

Also, because objects aren't vectored in HTML5 output, they may look blurry or pixelated in zoom regions.

Formation Moortgat

Hi all,

I have the same issue and I found the following solution (which is better in my opinion than locking the player at optimal size. The learner can indeed use a PC, tablet or smartphone and the different screen sizes will create a new issue).

The solution is simply to change the "story size" (DESIGN > Story Size) in order to extend it. (Of course your images has to be good quality and definition enough.)

For example : I changed the width (700px originally) to 1500px.

The player will fill browser window with perfect images in HTML5!

Best,

Laurent (France)

 

Formation Moortgat

Hi Ashley,

Thanks for your additionnal comment.

Changing the published output is the only solution I found to force the module to open in HTML5 on all the devices and plateforms. (but this is another discuss)

Otherwise, changing the "story size" into Articulate storyline is enough to solve the issue of poor quality images in HTML5 mode :)