I’m not quite sure what you are up to but surely you want that to be 24px if your background size is double that and you just want to show half. You can move the background position around to show what you want as like as you have segments of 24px.
Make sure there is at least a pixel gap around the sprite otherwise one may bleed into the other due to rounding errors.
Transforms don’t affect the flow which is why they are performant. The size the element occupies is always the original size whether it looks larger or smaller.
I assumed that would match the sprite on your image. I’m assuming you have multiple images on your sprite?
Maybe I misunderstand your goal. If the image’s natural size is say 48 x 48 and you have 4 sprites of 24x24 then applying the background image to a 24px blank image will show the 24x24 individual sprite which you can then move around with background position to show the others.
That’s a bit overkill but better safe than sorry. Keeping all the sprites the same size with the same gap means you have everything consistent. If you don;t have a gap around the outer edges then that images is off centre by the width of the gap.
Hardly a problem on 1 or 2px though.