How to remove white space around images in Drag and Drop content

Hi! I am trying to make a Drag and Drop page similiar to the Chess board example where the images that are dragged on to the board do not have a white sqaure around them. Like in the chess board example, all of the game pieces that you click to move on to the board only have the piece itself moving not an extra white sqaure around the piece. How do I do that? Every setting I've seemed to try still leaves a white sqaure being dragged with it around the image as that's how the image was saved. Is it a setting in the Drag and Drop H5P or something I have to do to the image itself before uploading (a certain format or way to make the background invisible except for the shape of the item itself)?

Thank you!