こんにちは。今回はimgタグのdecoding属性の適切な指定方法とその効果について解説していきます。
概要
画像のデコード（後述）方法を制御する属性です。この属性は以下の3つの値を取ることができます。結論だけ言えば、とにかくasyncを指定しておけば読み込みが速くなります。
async: 画像のデコードを非同期に行うように指示します。これはページのレンダリングをブロックするのを防ぎ、ページの読み込み速度を向上させることができます。sync: 画像のデコードを同期的に行うように指示します。画像がすぐに表示されることを保証しますが、大きな画像をデコードするとページのレンダリングがブロックされる可能性があります。auto: ブラウザにデコード方法を自動的に決定するように指示します。ページの他の要素や画像のサイズや種類などの要素に基づいて最適なデコード戦略を選択します。
参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/img
さて、非常にややこしくなってきましたね。笑
まず「レンダリングをブロックする」とは何なのか説明します。
「レンダリングをブロックする」とは
その文言の通り、レンダリング（＝画面への描画）を止めてしまうことを言います。代表的なのは、画像、CSS、JavaScriptなどの外部リソースを読み込む時に発生することでしょう。例えば以下のようなHTMLがあったとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./resources/styles/style.css" />
</head>
<body>
<!-- 省略 -->
</body>
</html>7行目でlinkタグを使ってCSSファイルを読み込んでいます。この時、CSSファイルの読み込みが完了するまでHTMLの次の行以降が一切読み込まれません。もしCSSファイルの容量が大きいと、しばらくの間画面には何も表示されなくなります。これがレンダリングをブロックするということです。
そして、画像のデコードという行為はこれと同様に完了するまで他の要素の表示を止めてしまうのです。
画像のデコードとは
画像は通常、JPEGやPNGなどの形式でエンコードされた上で通信されます。ブラウザがこれらのデータを受け取ったとき、実はそのまま表示させているのではありません。画面の表示に適したビットマップ形式という別の形式にデコード（つまり、エンコードを解除して画像を再構成）する必要があります。このデコード処理は画像のサイズや複雑さによっては時間がかかる可能性があります。
そしてこのデコード処理は、完了するまでブラウザの他のレンダリングを停止させます。
ここでdecoding属性が登場します。decoding=”async”を指定するとブラウザはレンダリング操作を停止せずデコードを並列的に行うことができます。非同期に処理をするとも言います。これによりページの読み込み速度が速くなります。
デコード処理についての参考はこちらです。
これらの理由により、基本的にはdecoding=”async”を指定しておいた方が良いでしょう。
ブラウザ対応状況
主要なブラウザはほぼ全て対応しています。
対応割合は全体の67.17%ですが、主要ブラウザは対応されていることと、非対応の場合は何も起きないだけなのでとりあえず書いておいて損はないでしょう。
まとめ
というわけでimgタグのdecoding属性についてでした。原理の部分はちょっとややこしくすぐに理解するのは難しいと思います。そういう方は、とりあえず指定しておけばお得だと思っておいていただければ十分だと思います。
decoding属性以外にもimgタグに必要な属性はいくつかあります。それらについては次の記事をご覧ください。
また、こういった細かいテクニックをもっと知ってレベルアップしたい方はぜひこちらの本で勉強してみてください！
コメント