Better way to display the same image content but with different size?

I come in question for a better way to efficiently display sprites on screen from a selected image resource (mostly fetch from SpriteFrameCache) in different size.

Firstly, I believe that by setting different scale would do job nicely but i’m a little bit curious about its performance. If my image resource is around 200*200 in resolution, and I need to display it on screen for 1 sprite in actual original size, and several sprites with same smaller in size, is that the best way to achieve it?

Or another approach can be just provide different in size of image resource (maybe 200*200 and 50*50), and separate load them via normally SpriteFrameCache and finally display them on screen without any scaling.

I would love to hear your thought and which way (or may be your own) you choose to accomplish this thing.

For an image that small, just make versions for each size.

The performance of resizing an image dynamically is going to vary browser by browser, giving you an x-factor for performance for no real benefit. I mean, a compressed 200x200 image is what… 15kb?

Thanks Mike, I think the same. Thanks for your input!