Should CSS transforms be applied to the picture element or the child img element?

For applying CSS transforms to an image element, such as a translate or translate3d for example, would it be best in terms of performance to:

1. Apply the transform to the parent <picture> element

const imageEl = document.querySelector('#image');

setTimeout(() => (imageEl.style.transform = "translateX(200px)"), 1000);

#image {
  transition: transform 2s ease;
  position: absolute;
  left: 0;
  top: 0;
  }

<picture id="image">
<img src="https://picsum.photos/536/354"/>
</picture>

or 2. Apply the transform to the child <img> element

const imageEl = document.querySelector('#image');

setTimeout(() => (imageEl.style.transform = "translateX(200px)"), 1000);

#image {
  transition: transform 2s ease;
  position: absolute;
  left: 0;
  top: 0;
  }

<picture>
<img src="https://picsum.photos/536/354" id="image"/>
</picture>

From what I gather it seems <picture> is effectively just an inline element like a <span> and thus intuitively I don't expect there will be much if any performance difference between applying transforms to the <picture> element versus the child <img> element. My question in a nutshell is: Are there any performance implications I should consider when deciding whether to place potentially taxing CSS transforms onto <picture> elements or child <img> tags - and if so then which placement is better for performance?