img 태그의 이미지 로딩을 비동기로 처리

img 태그에 decoding 속성을 async로 주면 브라우저가 이미지가 로딩되는 것과 화면의 다른 요소를 그리게 하는 것을 비동기로 처리하게 된다. 반대로 sync로 주면 동기로 처리한다.

<img decoding="async" src="/images/last-big-bunny.png" />

혹은

let img = new Image();
img.decoding = 'async';
img.src = 'images/hero.png';

참고로 decoding 속성은 세 가지 옵션을 가질 수 있다.

용량이 크면서 당장 이용자가 보는 화면에 보이지 않아도 되는 이미지 엘리먼트에 적절한 방식을 골라 사용하면 효과를 볼 수 있다.

참고로 IE를 제외한 모든 브라우저에서 사용할 수 있다.