画像の最適化において技術的なテクニック画像の遅延デコードを紹介します。画像タグにプロパティを付与するだけでパフォーマンス効果を得ることができるため、表示速度のプチ改善として最適です。
画像の非同期デコードとは？
decoding="async" を使う方法
画像の非同期デコードはWebサイトの画像の最適化のテクニックになります。設定方法は img タグにdecoding="async"というプロパティをつけるだけです。たったこれだけで画像を少しだけパフォーマンスの向上をさせることができます。
技術的な解説を挟んでおきますと、画像のデコード処理を非同期化（遅延）させるようにブラウザに命令するプロパティになります。画像は imgタグが読み込まれた時に、ブラウザが自動でダウンロードし、その画像を描画させるために、デコードという処理を行います。コードは通常はメインスレッドで実行されるため、表示をブロックさせることになります。それをバックグラウンドで実行してしまおうというアイデアです。また画像の遅延読み込み（Lazy Loading）と併用が可能です。
imgタグの decoding に指定できる値
imgタグの decoding に指定できるプロパティは三つしかありません。デフォルトでは auto が設定されているため、async を指定することでパフォーマンス効果を得ることができます。非同期にすることで表示が変になってしまう場合は sync を明示的に指定するとよいです。
| 値 | 概要 |
|---|---|
| sync | 画像を同期的にデコードするためのプロパティ。スレッドをブロックする |
| async | 画像を非同期にデコードするためのプロパティ。スレッドをブロックせずにバックグラウンドでデコード処理を行う |
| auto | デフォルトでの設定。ブラウザによって sync か async のいずれかが自動で最適なものを選ぶ |
decoding に指定できる値注意点
画像の遅延読み込み（Lazy Loading）のときと同様ですが、初期表示の時点で表示される（初期のビューポート）画像に指定するときに、ユーザに確実に表示させたい（遅延させたくない）ならば非同期にするべきではないでしょう。端末のスペックにもよりますが、画像がチカつく原因になります。
また注意点は対応ブラウザです。当然 Internet Exploler では対応していませんが、他のブラウザでは概ね対応されています。
対応ブラウザ表
https://caniuse.com/?search=decoding
画像の遅延読み込み（Lazy Loading） との違いは？
画像の遅延読み込み（Lazy Loading）では loading=lazyをimgタグに指定することで画像の"遅延読み込み"をしていました。一方で本記事で紹介する画像の"非同期デコード"とは何が異なるのでしょうか？
言葉の違いから分かるように読み込みとデコードは根本的に別々の処理になります。処理の順序としては「読み込み→デコード」です。画像の読み込みは画像を（URLから）取得しブラウザまでダウンロードする、画像のデコードはダウンロードした画像を実際に表示できるような処理という違いになります。したがって両プロパティは別々の効果を持つため併用が可能になっています。
ということで、画像の遅延読み込みも一緒に設定しておくとよいでしょう。以下の記事を参考にしてください。
