There's got to be a way to remove the extra space.
Short answer: you can't.
Long answer: you can't, but you don't need to. No one else even tries.
(Qualifier: I do web development for a living and teach it at the University level)
Everything on a web page is a rectangle. Always has been ever since the Mosaic 1.0 browser back in 1993. Transparency exists to provide the illusion of non-rectangular shapes and it's used pretty much everywhere.
So what you do with your candycane is put it in the background. Either as a background-image property where you can push it around quite easily with background-position, or use position: absolute on the <img> tag and go from there.
If you want your text to flow around an irregular object, the usual way is a stack of empty <div> objects and creative use of float. It's a lot of time to get it right, I've got most designers trained not to do it.
clip-path has a lot of promise, but until Microsoft gets up to speed we either accept that MSIE users will see something else or we do something else.