In HTML/CSS is the "padding-bottom hack" for img's still the best way to ensure no re-flow?

Question

In 2017, is the "padding-bottom hack" (wrapping an img in a div with a padding bottom of Image Height / Image Width * 100%) still the best way to ensure space is allotted for a responsive (percentage-width) image to avoid a re-flow?

(More on padding-bottom trick: https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack)

BONUS: If the img tag specifies a width and height attribute, why couldn't the browser compute the space natively. Eg, <img src="..." height="100" width="200">? It has all the information it needs, no?

The "padding-bottom hack":

html

<div class="image-wrapper">
  <img class="image" src="...">
</div>

css

.image-wrapper {
    height: 0;
    padding-bottom: 50%;
    position: relative;
}
.image {
    width: 100%;
    position: absolute;
}

Answer 1

Chrome is adding an intrinsic-size attribute, EG: <img intrinsicsize="400x300" style="width: 100%">

This attribute allows developers to specify the intrinsic size of a media element (<img>, <video>, <svg:image>). With this attribute media elements will maintain their aspect ratios. Developers need only specify one dimension, either a percentage or pixel value, and the other dimension will be computed immediately without causing a visual re-flow.

https://www.chromestatus.com/feature/4704436815396864