image artifacts when scaling sprites

[assafsahar]

hi,
I've created a simple interactive presentation of animations, where there are 2 characters on the screen and pressing on any of them make it play an animation. After the animation ends, another one replaces it.
There are 6 animations in total.
It runs well on pc machines, but because the assets are very big I've decided to make a mobile version with dedicated assets which are low-quality.

Here is the link for your conviniency: http://codactive.com/work/gingim/turtles/
when browsing from pc it redirects to: http://codactive.com/work/gingim/turtles/index_pc.html
when browsing from a mobile device it redirects to: http://codactive.com/work/gingim/turtles/index_mobile.html

Eventually, the low-quality images look OK on some devices, but on others the are small artifacts that are added to it and make the experience not pleasant..(see screenshots for example, it looks as small lines which are a part of the image's invisible framing square).

This is the way I created my assets:
My Flash animations' stage size is 960x540.
I use ZOE to create sprite sheets from the animations.
The pc version of the html loads a canvas sized 960x540 and using fgl-scaler.js scales to fit the screen size.
For the mobile version I use ZOE to create the spriteshhets (from the same flash movies) with a scaling of 0.5. Then the canvas is loaded with a size of 480x270 and again using fgl-scaler.js that scales to fit the screen size.
The resulting mobile assets are smaller in weight (to allow smaller loading time and use less memory) but there are still those artifacts I've mentioned above (that - as far as i understand - are not a part of the image, but created due to the scaling process).

Can anyone here think of a better way to make the assets for the mobile version? or maybe you have experienced those type of artifacts and know how to deal with it?
I have to mention that I've already reduced the files weight using https://tinypng.com/ to the minimum possible (for the pc version), so I can't use this solution any further.

Any idea will be appreciated.
Thanks!

[gskinner]

I believe that turning on padding in Zoe's Settings will resolve this. It looks like its just an issue with antialiasing causing images to bleed over their frame rects. Feel free to reopen if that doesn't help.

[gattaka]

Hi,
I have the same problem as assafsahar, but unlike him I am experiencing it in Chrome (on PC). I've noticed that the issue occures only when I am trying to create multiple instances of the same sprite at one time. Then some of these instances have "lines" above them. There is no scaling applied, no effects, just a plain sprite.

Sprite:

Problem:

I am using the createjs-2015.11.26.combined.js version and PNG files from Gimp. I tried converting them with tinypng as well, but it didn't make any difference.

Thanks for any advice :)

[lannymcnie]

This is probably due to canvas anti-aliasing. There is no space at the bottom/top of some of the sprites, so they might be naturally overflowing into neighbouring sprites. If you can add a 1px margin into the images, that would likely solve your issue.

[gattaka]

Thanks for your fast response!

I tried that and it fixed the issue.