If you do this, then a browser/user/client that wants that information simply doesn't have it - you can't create bits from thin air.
If you leave the metadata in, then any browser that wants it can use it, and any brower that doesn't want it can ignore it.
I can code up a Greasemonkey script in a few minutes that will strip the width and height attributes from img tags, but nobody on earth can write a script that will magically detect what size the author wants them to be if they don't send that data to you.
The width and height attributes we have been discussing set the size that the image will be displayed at, which are not necessarily the size of the image transferred.
Those are two very different things. My statement holds - if an image has size (a, b), but the author wants it to render at size (c, d) but does not send that data, the client has no way of magically determining c and d.
Furthermore, even when the actual image size is the same as the width and height attributes, there's the obvious problem of you needing to completely transfer the image itself before determining the size, which blocks rendering (or forces you to re-compute layout a second time, which both increases latency and decreases throughput).
Sending a high resolution image to a user with a low pixel density display is wasting their bandwidth and battery. Sending a low resolution image to a user with a high pixel density display isn't giving them the good experience they paid for when they bought a high end device.
Optimization is about giving all the users the best experience you can on a website. It doesn't necessarily change the design at all.
> For example, vanilla `<img>` will ship the same image to every device,
As it should be, for simplicity's sake.
Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today.
Let the browser handle layout, that is one of the things it is designed to do!