How should I re-size images on webpage?

[gamerzusa]

I have some high resolution images and have to re-size it to be smaller and animate it on webpage.I do not want to re-szie it on image editor because I want to have high resolution on wide monitors.I have tried several methods to re-size the images, but there still performance issue on Firefox.While the re-sized images is animated, the CPU rise to 90%,and memory take up to 500mb.The below methods didn't help improve the performance, what is the common best way to re-size images?\[code\]<img id='picture' src='http://stackoverflow.com/questions/13774178/picture.png'>#picture{width:50px;height:50px}\[/code\]Or\[code\]<div id='picture'></div>#picture{display:block;width:50px;height:50px;background:url('picture.png');background-size:100%}\[/code\]Or\[code\]<div id='picture'></div>#picture{display:block;background:url('picture.png');background-size:100%;-moz-transform:scale(0.5);}\[/code\]