The policy promises to track bytes/pixel; but the downloaded image content does not necessarily end up in an <img>. It could be an unattached Image or, drawn into a canvas, e.g.:
<canvas/>
<script>
fetch(big_image).then((response) => response.blob()).then((blob) => {
  let url = document.createObjectURL(blob);
  var ctx = document.querySelector("canvas").getContext("2d");
  var image = new Image();
  img.src = url;
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
  };
</script>

I think the policy should report violation as soon as a downloaded image violates the size limit. Also the enforcement should include canvases.