画像のwidth, height属性の重要性はアスペクト比にあり

width, height属性と width, heightプロパティの違い

私なりの解釈をお伝えしますので、もっと専門的、厳密な解釈があるかもしれません。と最初にお伝えしておきます。

width, height 属性 --- html

<img src="画像アドレス" width="数値" height="数値" alt>

width, height プロパティ --- インラインCSS

<img src="画像アドレス" style="width: 数値px; height: 数値px;" alt>

width, height プロパティ --- CSS

img {
  width: 数値px;
  height: 数値px;
}

インラインCSS というのは、htmlの style属性 の値として直接スタイルを書き記す方法のことです。本来CSSプロパティというのはhtmlとは分離させ スタイルシート に記しますが、画像の場合そんなことやってらんない (´・ｪ・｀)
サンプルのようなCSSだと「(全ての)画像のサイズ」を指定することになってしまいます。画像全てが同じサイズなわけありませんし、個々の画像の識別のためにいちいちclassを付けたり、なんてことはやっていられない。なので画像についてはインラインCSSがメインになります。

html属性とCSSプロパティのコードの見た目の違いをまず理解してください。html属性の方は値に単位をつけません。自動的に px が適用されます。CSSプロパティの方は単位必須です。

htmlとCSS

CSSというのは htmlが無ければ何の意味もない という点がポイントです。例えば簡単な例で

.xxx {
  color: red;
}

というCSS内容があるとします。これは「xxxというクラス名(class属性の値)を持つ要素は赤い文字」という意味です。でもその「要素」自体が存在しなければ意味が無いですよね。要は「対象が必ず必要」ということです。サンプルの場合は「クラス名xxxのなにがしかの要素」です。

<span class="xxx">あいうえお</span>

上記のhtmlが存在を発見したら、その要素を赤文字にする。つまり「あいうえお」が赤文字になります。

一方htmlというのは単独で存在できます。

<span>あいうえお</span>

というhtmlがあれば、ブラウザ上に「あいうえお」という文字が書き出されます。webページで最も重要なのはhtml です。文章を人間の目に見えるように表記する、という基本中の基本はhtmlが担いますし、ボックスの基本的な配置もhtmlのみで行うことができます。

CSSは装飾を担う ものです。文字を赤くしたり、縦並びになったボックスを横並びに変更したり、視覚の調整を行います。文章をセンタリングする、文字を小さく(or 大きく)する、といったことも「装飾」に分類されます。「スタイリング」「デザイン」と言えば伝わりやすいでしょうか。

ここまでが基本です。ここまでが理解できるとこの先も理解できる(はず)

width, height 属性とは

要素の横幅と高さを指定する というのがそのまんまの役割なんですが、今回は img要素 つまり「画像」に於いてはどうなのか、というのが焦点です。

画像の width, height属性は領域の指定 であり width, heightプロパティは画像自身のサイズ指定 と考えて良いと思います。

htmlというのは多種多様な htmlタグ で構成されます。そしてhtmlというのは単独で存在できるものだよ、という説明をしました。つまりCSSを頼りにせずにweb上で視覚形成できる、ということです。視覚形成ができる、ということは、配置ができる という意味でもあります。例えば

<div>あいうえお</div>
<div>かきくけこ</div>

とあった場合、以下のような視覚形成になります。

「あいうえお」と「かきくけこ」は縦に並んでいますね。では今度は

<span>あいうえお</span>
<span>かきくけこ</span>

とあった場合には、以下のようになります。

縦ではなく横に並びました。これらの違いは div要素 であるか span要素 であるかの違いで、それぞれに ブラウザでどう描画(レンダリング)されるのか があらかじめ決まっています。決められているからCSSが無くとも配置が可能なわけですね。もしこれが決まっていなければ「CSSの指定が無ければどう配置して良いのか(並べば良いのか)わからない」といった状況になってしまいます。

ただ全くCSSに頼っていない、という言い方はちょっと乱暴で、実際は「どう並ぶか」これを一般的に ボックスモデル と言いますが、実はこれはCSSによるものです。各html要素によって、最初からボックスモデルの初期値(デフォルト)が決められている、という表現が正しいかと思います。

div同士は横に並ばず縦に並ぶよ、だとか、p要素は上下に余白ができるよ、といったことも「初期値」「デフォルトスタイル」が関係しています。初期値であれば特別なCSSは無くとも自律できる、ということですね。

width, height属性は領域を指定する

画像というのは ファイル ですから、その情報を取得するには アクセス をする必要があります。でもhtmlはCSSなどの手がかりがなくとも描画を行わなければいけません。画像の情報がわからない = サイズも縦横比もわからない ということでは困ってしまうんですね。htmlは画像の情報を取得できなくとも次々と後続要素の配置を行う必要があるとなるとさあどうしましょう、ということで、画像が表示される領域の確保 が必要になります。その場所取りに利用するのが width, height 属性 です。画像の実際のサイズはわかりません。わからない状態でもあらかじめ場所を確保できるのがwidth, height属性だよ、ということです。

これらの属性が無い場合には手がかりが何もありませんので、領域について一旦無視して画像情報へのアクセスが完了(ダウンロード)するまで 横幅・高さなし として処理するしかないんですね。するとどうなるかというと CLS（Cumulative Layout Shift, レイアウトシフト) が発生する というわけです。

閲覧中の文章がが急にガクガクっと下へ移動したり、といった経験があると思います。高さゼロとして処理された要素(今回は画像)のダウンロードが完了し、高さが発生したため に起こります。これが随分と都合が悪い。ユーザビリティに悪い、と。

つまりwidth, height属性は 画像のダウンロード前に処理される ものです。

width, heightプロパティは画像のサイズ指定

ここで大事なのは最初に説明した通り CSSは必ず対象が必要 という点です。width, heightプロパティはCSSですね。そして対象は「画像」です。つまり画像の情報が確定しなければ何もできません。言い換えれば、このプロパティが適用されるということは 既に画像の情報を知っている ということでもあります。ダウンロードが終わっている、ということです。

つまりwidth, heightプロパティは 画像のダウンロード後に処理される ものです。

表示例

例えば横600px縦600pxの正方形の画像があるとします。

<img src="xxx.jpg" width="600" height="600" alt>

上記は width="600" width="600" と、画像の実寸を記しています。

画像の表示領域を小さくしてみます。

<img src="xxx.jpg" width="300" height="300" alt>

上記は width="300" width="300" と、画像の実寸とは異なりますが、アスペクト比 (縦横比) は正しく設定されています。

では縦横比をわざと崩してみます。

<img src="xxx.jpg" width="600" height="400" alt>

width="600" width="400" こうしてアスペクト比が正しくない場合はどうでしょうか。
* ここからは便宜上スクリーンショットを掲載します。

潰れてしまいました。width, height属性は画像の描画領域を確保し、画像はその領域に対し 横100% 縦100% で収まる と考えれば納得できませんか。アスペクト比が画像と比較して正しくない領域の中に縦横100%で収まろうと思えば当然画像自体は歪みます。

少し言い方を変えると、width, height属性は「要素の横幅と高さ」の指定でこれがつまり「領域」であり「占有範囲」、この場合は img要素 ですね。そして「ファイル」この場合は画像ファイルがその中に収まるのだ、ということです。

ではこの状態で widthプロパティ を入れてみます。width="600" height="400" width: 300px を入れます。

<img src="xxx.jpg" width="600" height="400" alt style="width: 300px;">

やはり潰れています。今度は縦長ですね。

ではさらに heightプロパティ を入れてみます。そして値を auto にしましょう。width="600" height="400" width: 300px height: auto です。

<img src="xxx.jpg" width="600" height="400" alt style="width: 300px; height: auto;">

アスペクト比が正常に戻りました。

height属性のautoはダメ heightプロパティのautoはOK

先程の例で height: auto というようにheightプロパティにauto値を指定すると縦横比が正常に戻りました。これが何故か。ここまで理解できた方はもう説明不要だと思います。

CSSのheightプロパティは画像のダウンロードが済んで情報を取得済みの状態で適用されるわけですよね。ということはもう元の高さについては既知です。つまり 画像の縦横比も既知 ということです。そしてwidthが300pxで確定していれば、縦横比に合わせて自動で調整ができる、と。

htmlの場合は「ダウンロードが完了していなくとも配置」でしたよね。auto という値は「自動」ですが何が自動かというとこの場合は「widthと縦横比を合わせて自動でheightを計算する」という意味。ところがhtmlの場合はimgのファイルが未知の状態で行うわけですから、実際の画像がどのようなものかわからないうちに行うわけです。なので「横に合わせて自動調整」なんてことはできないし、それでは事前の場所取りの役目を果たせません (´・ｪ・｀)

height属性auto値

<img src="xxx.jpg" width="数値" height="auto" alt>

heightプロパティauto値

<img src="xxx.jpg" width="数値" height="数値" alt style="width: 数値px; height: auto;">

aspect-ratioプロパティの登場

FC2ブログにもレスポンシブウェブデザイン(RWD)と呼ばれるテンプレートがありますね。いかなるデバイスでもフィットするwebページ設計のことです。パソコンからタブレットからスマートフォンまで幅広くカバーすることができます。

ということは例えばスマートフォン画面で

<img src="xxx.jpg" width="1200" height="600" alt>

widthの指定が 1200px です。スマートフォンの画面が1200pxもあるはずないので、こんな指定結局無駄じゃないか、と。実際「なんかこれ…無駄だよね…」という時期もありました。

現在2021年に於いては、aspect-ratio という新しいプロパティが登場しています。これは(画像に関して言えば) ブラウザがhtml内にwidth, height属性を発見したら、すぐさまこのプロパティを適用する という仕組みになっています。例えば

<img src="xxx.jpg" width="600" height="600" alt>

というのがあった場合には

aspect-ratio: auto 600 / 600;

この内容です。この目的は 縦横比を確定する ことです。結局のところ画像の表示に際しては 縦横比を知ることが最も重要 です。そしてそれをやってくれるようになりました。手がかりとしてwidth, height属性の値を利用しています、ということですね。なので今まで以上にこの両属性が非常に大事。

このaspect-ratioプロパティはごく一部のブラウザでは未実装ですが、メジャーなものはもうほとんど実装済み。IEは当然実装されませんが2022年6月16日に正式にサポート終了を迎えますので、それ以降は堂々と使えるかな、と思います。既に脱IEを行っている方は今からでもすぐ使えます。なかなか実装されなかったSafariも2021年の7月ぐらい？に対応しました。

例えば YouTubeの縦横比固定 など、これまではラッパーやラッパーの疑似要素に padding-top: 56.25% と指定してそこへYouTubeのiframeをabsolute掲載、とかやっていたんですが今後は

.xxx {
  aspect-ratio: 16 / 9;
}
.xxx iframe {
  width: 100%;
  height: 100%;
}

これで済みます。簡単かつ美しいコード (n'∀')n
IE対応している方はまだダメですよ。再度念押し。

縦横比さえわかればレスポンシブだろうとなんとでもなる。というよりレスポンシブでこそ必要。

人間が計算する必要は無い

height属性にautoを指定してしまう方の思考回路を紐解くと恐らくですが「画像の実寸は 横1200px 縦556px で、これを横 720px で表示させたいから… 縦… 高さ… 縦… なんぼやねーん！計算できひーーーん！」とかそんなところかなぁ、たぶん。

計算する必要ないですよ。

<img src="画像アドレス" width="横実寸" height="縦実寸" alt="代替テキスト" style="width: 表示したい横サイズpx; height: auto;">

2021年9月27日
コード内容の一部に抜けがありましたので追加しました。申し訳ございません。

これで良いです。width, height属性は画像の原寸をそのまま記せばOK。そして表示を調整したいならばstyle属性にインラインCSSで widthに表示希望サイズ、heightはauto あとはブラウザが良きに計らってくれます。「がぞう」などで辞書登録しておけばすぐに変換に出てくるので便利です。

インラインCSSという手法自体は推奨されておらず「できるだけ辞めて」という扱いですが、画像に関しては使わないとか無理なんで (´・ω・｀)

コード内容はテンプレートスタイルシートに img {max-width: 100%} の指定有り、を大前提としています。この指定が無いとタブレットやスマホではみ出します(もちろんパソコンでも画像が記事幅より大きければはみ出します)
また、上記内容が記されているということはまず間違いなく img {height: auto} も同時に記されているはずなので、その場合はhtml側の height: auto は不要です。でもどのテンプレートにも必ず記されているとは限りませんので一応書いておいた方が良いでしょう。

まとめ

ポイントとして

• width, height属性 と width, heightプロパティは意味も役割も違う
• height属性に auto という値は無い
• img要素の width, height属性は省略しない

こんなところでしょうか。ところがFC2ブログの新投稿画面(見たまま編集)というのは何度も言うように width, height属性が書き出されない んですよねぇ (´・ｪ・｀)
ただし画像をpreloadすることにより(重要リソースとして最優先でダウンロードされます)、レイアウトシフト自体はほぼ発生しません。ので、まぁ看過できる… かなぁ。中〜上級者さんはhtml編集の方を使うだろうからこれでも良いかー、という感じです。

lazyloadを入れておきたい、という方は雛形に一部追加して

<img src="画像アドレス" width="横実寸" height="縦実寸" alt="代替テキスト" style="width: 表示したい横サイズpx; height: auto;" loading="lazy">

まぁ要らんけどねぇ。preloadされちゃってるんで (´・ｪ・｀)

画像のpreloadは 有料会員 と 記事下広告を表示している無料会員 のみの特典のようです。
* 画像URLに origin が含まれる場合は適用外、つまりCDN利用者のみ特典です。

lazyload関連記事を非公開にします

これまでlazyload(速度改善のための画像等リソースの遅延読み込み)の記事を重ねてきましたが、それらを非公開に変更します。本記事はその理由について。...

vanillaice000.blog.fc2.com

最後についでですが width(読み方 うぃず) height(読み方 はいと) aspect-ratio(読み方 あすぺくと れいしぉぅ) です。