HTML をどこで身につければ良いか。ひとつひとつタグ別にネットで御厄介になるのは効率が悪いし信憑性も疑われる。
まず、HTML の正式な最新仕様の確認はHTML Living Standardにて行うことができる。
とはいえ、私にとっては分かりにくい編集内容なので、mdm web docs のHTML: ハイパーテキストマークアップ言語を参考にしている。
出会い頭にその都度行いたい、という場合は、構文エラーを確認するバリデーター(validator)を使ってひとつひとつ間違いを潰していくのも分かり易い。以下にバリデーターのプログラムを挙げておく。
私は Another HTML-lint を使ってhttp://zyco.jp/explanation-30/index.htmlを HTML5としてチェックし、構文エラーを幾度となく訂正しながら、100点に到達するまでやってみた。
ネットの情報では、旧 W3C の HTML5と新 Living Standard HTML の仕様解釈が混在しており、混乱させる状態があるので注意が必要だ。
以下は <img> に「.width-aspect-ratio」というクラス名を付けて CSS でレスポンシブ対応を行った例である。今回のポイントのひとつである。
.width-aspect-ratio {
aspect-ratio: 16 / 9;
width: 100%;
}おぼろげながら、認識はしているものの、明白な違いが分からないのがこのタグである。このセクションで明確にしたいと思う。
お馴染みの <img> は HTML の要素で、画像を表示するために使用するもので当然のように使ってきた。従来、<p> で囲んできたものが <img> である。alt 属性は、この画像のテキストによる代替情報を保持する。これはアクセシビリティに必須ものだ。スクリーンリーダーは、この属性値をユーザーに読み上げるので、画像の意味が分かる。この属性に空文字列を設定すると (alt="")、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合はレンダリングを省略することがある。
<p>
<img
class="fit-picture"
src="images/something.jpg"
alt="explanation" />
</p><figure> は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で <figcaption> 要素を使用して表されるキャプションを付けることができる。アイキャッチなどの目的で文脈上必要で無い画像の場合 <figure> タグを使うことが奨励されている。
<figure>
<img
class="fit-picture"
src="images/something.jpg"
alt="" />
</figure>「src 属性」は必須で、埋め込みたい画像へのパスを入れるもの。「alt 属性」は、この画像のテキストによる代替情報を保持する。width と height の両方を使用して画像の固有の寸法を設定すると、画像を読み込む前に場所を確保し、コンテンツのレイアウトが移動することを防ぐことができる。
画像の上下左右に挿入する空間の幅は CSS の margin プロパティを使用する。
さて、<picture>タグは、HTML5から新たに追加された要素で 0 個以上の <source> 要素と 1 つの <img> 要素を含む構成で、「ユーザーの閲覧環境に応じて最適な画像を表示させることができ、レスポンシブデザインに対応することができる。」とある。
また特定の形式に対応していないブラウザーに対して、代替画像形式を提供する。<picture>タグは画像を表示するものではなく、imgタグを制御するためのタグだ。
レスポンシブ対応？、既に CSS で対応しているので、今さらと思う諸君は多いだろう。
では言い方を変えてみる。レスポンシブ対応で WebPとか、AVIFとかの画像を扱うにはどうすれば良いのか。明確に言うならば、
である。WebP形式の画像やAVIFを扱える、またはユーザーの使っているブラウザーがその種類の画像を扱っていないときは別の画像形式、例えば JPEG などを表示させることを可能にするのが <picture>タグである。
ここで、<picture>タグの使い方を検証するために、WebP と AVIF と JPG の画像を用意した。<picture>タグは、複数の <source> と、1つの<img>を囲う形で使う。
ブラウザに読み込んでほしい画像のリストは <source> に表示したい優先順に、WebP のファイル、AVIF のファイルを配置する。以下の提示する画像の(1)、(2) は優先順位が一番目のファイルが表示される。WebP や AVIF が読み込めないブラウザは JPG を表示する。
この定義の場合、chrome が読み込む画像は、WebP の画像のみである。無駄に全ての画像を読み込むことはないのでロードの短縮につながる。
<picture>
<source srcset="images/800x600.webp" type="image/webp" />
<source srcset="images/800x600.avif" type="image/avif" />
<img src="images/800x600.jpg" alt="Jaco Pastorius" class="image-width"/>
</picture>.image-width {
width:100%;
aspect-ratio: 8 / 6;
}(2).800x600.avif は 73.9 KB
<picture>
<source srcset="images/800x600.avif" type="image/avif" />
<source srcset="images/800x600.webp" type="image/webp" />
<img src="images/800x600.jpg" alt="Jaco Pastorius" class="image-width"/>
</picture>(3).800x600.jpg は 63.9 KB
<img src="images/800x600.jpg" alt="Jaco Pastorius" class="image-width"/><picture>タグにはタイトルを付けることはできない。
今さらだが、画像関連についての最低限の知識が欠如している諸君が多すぎる。デバイスのRetina(レティナ)、4K、画像形式の JPG、PNG、GIFなどの知識は基本である。
近年秀逸な画像形式が出揃った。その画像形式が非対応ブラウザの場合、picture タグなどを用いて、JPEG や PNG などの代替フォーマットの画像を表示させる必要がある。といっても現在において非対応のブラウザは ie (殆ど無視できるシェア率)だけなのだが、近い将来に新しい画像形式が登場してきたら、ここでやれば良い。
<img src="images/800x600.webp" alt="Jaco Pastorius" class="image-width"/>以下に挙げたのがウェブで使いたい次世代の画像形式のメインである。
対応: Chrome, Edge, Firefox, Opera, Safari
Googleが開発した画像ファイル形式で、可逆圧縮と非可逆圧縮の両方に対応している。
PNG や JPEG よりもはるかに優れた圧縮を提供し(JPEGやPNGと比較して、最大60%のサイズ削減が可能)、より高い色深度、アニメーションフレーム、透明度などに対応している。
JPGは「非可逆圧縮」な画像形式で、保存し直す度に画質がどんどん劣化する、オリジナル画像として保存して再利用するには、PNG などが良い。
対応: Chrome, Edge, Firefox, Opera, Safari
複数のPNG画像を1つのファイルに格納してアニメーションとして再生できる画像形式。劣化のない一連のアニメーションに最適（GIF は性能が低い）である。 AVIF や WebP はより性能が高いもの
対応: Chrome, Edge, Firefox, Opera, Safari
高性能でロイヤリティフリーの画像形式であるため、画像とアニメーションの両方に適している。 PNG や JPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応している。
source 要素の type 属性は、ドキュメントへ埋め込むメディア・ファイル（動画ファイルやオーディオ・ファイル）のMIMEタイプを指定する任意属性である。HTML5 の source 要素に type 属性がない場合は、複数のリソースを指定する機能が利用できない。
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<source srcset="photo.apng" type="image/apng" />
<img src="photo.jpg" alt="photo" />
</picture>loading 属性を <img> 要素に設定することで、ユーザーが近くにスクロールするまで、画面に表示されている画像の読み込みを延期するように、ブラウザーに指示することができる。
<img src="something.png" alt="画像の詳細" loading="lazy"><picture>
<source srcset="images/800x600.avif" type="image/avif" />
<source srcset="images/800x600.webp" type="image/webp" />
<img src="images/800x600.jpg" alt="Jaco Pastorius" class="image-width"/>
</picture><img
srcset="image/1x.webp 1x, images/2x.webp 2x, image/3x.webp 3x"
src="images/xxx.png"
alt=""
/>srcset(ソースセット)は、img 要素や picture 要素内で、複数のイメージソースを指定するために使用し、1 つ以上の画像候補文字列を表し、それぞれはカンマ (,) で区切り、指定された状況下で使用する画像リソースを指定する。srcset に置いた画像は、Retina ディスプレイ用に画像を切り替えることができる。srcset の指定方法のひとつに、w 記述子がある。
x 記述子は、デバイスピクセル比を指定する記述子だ。以下のように表さられる。
今閲覧しているデバイスのデバイスピクセル比を、このデバイスピクセル比を調べる確認ツールを使って確認することができる。
iPhone 15 や iPhone 16 Pro Max など解像度は 3倍Retina(1x の3倍のピクセル数) である。x記述子では「3x」になる。通常のディスプレイで 320x320px の画像を表示する場合、Retina(2x) ディスプレイでは 640x640px、3倍Retina では、960x960px の画像を用意することになる。個人的な感触では 2x と3x は殆ど同じなのだが。
アンドロイドの 4K のデバイスピクセル比はどうなのだろう。スマホ・タブレットの解像度一覧表をご覧いただくと良い。
1x、2x、3x、4x を画像リソースに指定しておけば、常にデバイスピクセル比に一致した画像が表示できる。
話しはそれるが、配置場所とサイズの特例を除き、本サイトのレイアウトの場合では、殆どの画像は PC とスマートフォンで使う画像は同様のサイズ画像になるように画策した。だから一枚の画像で賄っていける。
閲覧者のデバイスのデバイスピクセル比が 2x であれば 2x、3倍 Retina であれば 3x の指定したリソースの画像を表示する。
<img style="width:100%; aspect-ratio: 2 / 1;"
srcset="images/1x.webp 1x, images/2x.webp 2x, images/3x.webp 3x, images/4x.webp 4x"
src="images/1x.png"
alt="Movie Troy"
/>srcset の指定方法のもうひとつに、画面の幅を対象にした w 記述子がある。
<img srcset="small.png 400w, medium.png 800w, large.png 1200w" />現在のところ本サイトでは考慮してない。必要があれば、希望的観測により、CSS にてこの部分はマネージメント出来ればと思う。だから、手付かずに、ほとんど省略。