Suggestion re: your images - I see some white fringe on your images. Here’s how to fix it -
Open them in Photoshop and convert to RGB. Select the object (select all, then hold down the command key and hit the right arrow and then the left arrow - this will make sure that the all the pixels are selected and that the object is in its original position).
Go to the Layer menu, select Matting > Remove White Matte
Another option is to select Matting > Defringe and set a width of pixels to select and remove. If you wish, you can create a layer beneath this and fill it with black to see the effect, then remove that layer before saving.
Note that while GIFs create smaller files, PNGs create smooth edges for transparencies. Make sure to use the above selection method to isolate the pixels, then, with the selection active, go to the Image menu and select Crop.
Output the file using File > Save For Web > PNG 24.