Poor image quality in HTML5 output
May 20, 2013
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
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!
Thanks Jeff for the response,
No the same source image was used for each and resized withing Articulate Storyline. Perhaps I shouldn't be resizing within the software package and insert pre-sized images. What do you think?
BTW, they are all PNGs.
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.
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
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.
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
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.
Hi Erin! This thread is a bit dated. If you need us to take a look so that we can understand what may be happening, please do so. Even if it's just a sample slide in a .story file to indicate the issue, that would be helpful.
Leslie,
Has there been any progress on this? I am currently working on a project where we must use the HTML 5 output but the overall quality of the interactions are grainy.
Thanks! Magen
Hi Magen! Are you utilizing the latest update to Storyline 2, which is now Update 6? When we released Update 5, there were many improvements to HTML5.
Leslie,
Yes I have the most recent version. Does that include 508 accessibility support or player fonts? I have reviewed the table and those have remained unchanged. I appreciate your response!
Magen
Hi Magen!
There were some improvements to both of those features, but if you are still having difficulty I would advise that you share your .story file with our support team here so that we can take a look.
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?
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.
Thank you for the response. However, I do have the player locked to optimal size and the image quality set 100%. Perhaps there should be something documented about this. If there is documentation on it, I must have missed it.
Thanks,
Rodney Westmoreland
Hi Rodney,
The information I included above is documented here.
You'll also want to make sure you're viewing the HTML5 output in one of the supported browsers here.
Has there been any updates on this? We are on the latest update of S2 and still having the same poor output in HTML5
Hi Eric,
Our team continually looks at ways to improve our HTML5 output but it still holds true that objects aren't vectored in the HTML5 output. If there are specific changes you'd like to see you may also want to share your thoughts in the form of a feature request too.
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)
I forgot to mention you have to delete the two files "story.html" and "story.swf" after you published the project.
Then duplicate twice the story.htm5 file and rename them "story.html" and "story.swf".
Best,
Laurent
Thanks Laurent for sharing your workaround - and I did just want to caution that making changes to the published output is not something we can offer support for, so you'll want to do so with caution.
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 :)
Certainly understand - did you look at pointing direct to the HTML5 output using the story_html5.html link vs. the standard story.html?
Yes I tried first this solution (which is the easier) but I can't select the launcher in my LMS plateform (e-doceo).
Ah, certainly understand. The file structure isn't as visible within an LMS so it's hard to point to that specifically.
This discussion is closed. You can start a new discussion or contact Articulate Support.