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

画像には width属性height属性 を指定する、というのはhtmlの習い始め、基礎中の基礎として教わるのだけれど、やれレスポンシブだなんだと時代が進むにつれ疎かに。ところが現在では これまで以上に重要な属性になっています

本記事ではwidth, height 属性 と 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関連記事を非公開にします

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

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

-
2021/09/27 (Mon) 07:49

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/09/27 (Mon) 08:13

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/09/27 (Mon) 11:32

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/27 (Mon) 15:13

To 脱字の件等 内緒さん

こんにちは ('0')/
今修正しました。まだ他にもあるかも。なんか日本語変ところも色々あった ^^;
また気づかれましたら教えてくださいね。いつもご協力ありがとうございます :)

-
2021/09/27 (Mon) 20:13

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/28 (Tue) 00:01

To ピクピク 内緒さん

お久しぶりです :)
わ、わ、ホントだ!動いてる!(笑)
やっだー気持ち悪… ( ̄∀ ̄;)

なんなんでしょうね。これ。わからないなぁ。今14.8で確認しました。15にアップグレードしますね。また報告します ('0')/

-----
アップグレードしたらめちゃくちゃ目立つようになりました (;`ー´)o
ここだけでなくフッターの「更新通知」も左右にうごうごしてます。ビューポートもおかしい。
えー、なにこれ (∵`)
ビューポートはノッチの関係かなぁ、いやぁわからん。14.8もバグ多かったですが、今回もあれかなぁ… とりあえず長男がiPhone12なので見てみますね(すぐには会えないけど)
私まだiPhone XSなので(笑)

-----
ブルブルするページはモバイルでpre要素の横スクロールが効かないことに気づきました。
なんでっ! (;`ー´)o
もう眠たくて無理なので明日また調べてみますー。

ぼっちん
2021/09/28 (Tue) 07:49

To Akiraさん

おはようございます ^^

やっぱりAkiraちゃんのiPhone XSでも再現しましたか(笑)
いえね「私のiPhone Xだけがバグッた?」って思いもあったので、恥ずかしすぎてナイショコメントにさせて戴いたんですけど(笑)

そうです、私が気がついたのはiOS 15.0にバージョンアップしてからなんです。
ですから、それ以前でも実際には多少ピコピコしてたのかもしれませんね。
よく見ると、テキストがピコピコよりも、個別にいろんな方向に勝手に「ウゴウゴ」してるって感じですよね(爆)

> モバイルでpre要素の横スクロールが効かない

あっ それは、テンプレートが今の[Choir]に替わったと同時に発生しておりましたから、今回の「テキストウゴウゴ」には関わっていないと思います (^^ゞポリポリ
それはもっと早くにお知らせするべきでしたね(笑)

vanillaice (Akira)
vanillaice (Akira)
2021/09/28 (Tue) 15:14

To ぼっちんさん

こんにちは ('0')/

スクロールできるページもあるんですよねぇ (∵`)
うごうご + スクロールできない がセットになっている。もちろん全ページにpreがあるわけではないので、うごうごページにpreを足したらやはりスクロールできないですね。うごうご無しではスクロールできることも確認。法則性がわからないので放棄しようと思います(笑)
新しくテンプレート作った方が早そう ( ̄∀ ̄;)
ご協力ありがとうございます。放棄して申し訳ない ^^;

ぼっちん
2021/09/28 (Tue) 17:20

To Akiraさん

は~い 「放棄」の件、了解です~(笑)
関係者は[Choir]ご利用のAkiraちゃんお一人だし (•‾⌣‾•)にこ♪
お返事ご無用ですからね~ ^^

vanillaice (Akira)
vanillaice (Akira)
2021/09/28 (Tue) 17:41

To ぼっちんさん

choir利用者さん、把握してる数人いらっしゃるんですが、その方たちはなんともないんですよね。たぶんまたsvgかなぁ (∵`)
androidではならないんですって。教えてもらった ^^;
また何かお気づきでしたら教えてくださいね。ご協力ありがとうございます :)

* お返事無用に書いてから気づきました(笑)

P
2021/10/07 (Thu) 20:48

No title

https://webcache.googleusercontent.com/search?q=cache:am-XMHJ_roIJ:https://vanillaice000.blog.fc2.com/blog-entry-504.html+&cd=1&hl=ja&ct=clnk&gl=jp

「Google botはFC2ブログのカレンダーリンクを延々と辿ります」
何故削除したのでしょうか。このタイプのサイトは削除ではなく、訂正をするのが正ではないでしょうか。
信用がなくなりませんか?ご回答よろしくお願い致します。
このコメントを削除された際は、他のサイトで当記事を引用して質問します。

vanillaice (Akira)
vanillaice (Akira)
2021/10/07 (Thu) 22:10

To Pさん

こんばんは。
何故攻撃的なのか全く意味がわかりませんが、今古い記事の整理などしておりまして、消すつもりのない記事・新しく書き直そうと思っている記事も「削除」ではなく「非表示」にしています。間違って非表示化したものもあり、実際「表示してください」という依頼があり再公開したものもありますよ。普通にそうおっしゃって頂ければ良いだけなのに(笑)

> このコメントを削除された際は、他のサイトで当記事を引用して質問します〜

お好きにどうぞ。訂正が必要ならばご自分でなさってくださいね。
他の方のご迷惑にもなりかねませんので今後はもう少し穏やかな物言いでお願いします。

-
2021/10/13 (Wed) 16:02

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/10/13 (Wed) 21:55

To 諸々の件 内緒さん

こんばんは ('0')/

内緒さんは本編未見だったんですね。わかりやすい胸アツ展開で楽しめると思います (((ง'ω')و三 ง'ω')ڡ≡シュッシュ

> いきなり〜

マジで理解に苦しむ。なんなんだろ、ホント(笑)
いつもお気遣いありがとうございます :)

bon
2021/10/16 (Sat) 18:54

No title

Akiraさん、こんばんは。

今さらでしてお恥ずかしいのですが、聞くは一時の恥と思って質問させてください。

Akiraさんがブログで過去にもwidth, height属性について書かれていましたよね。
その時にも拝読して「うんうん、width, height属性で画像の場所を確保するのね!」と理解していたつもりでいました。
しかし今回の記事を読み、自分がそれを実践していなかったことにハッと気づきました。
何度も注意喚起してくださり本当にありがとうございます。

これまでは画像一枚につき
<img src="画像url" alt="" style="width: 700px; height: auto;">
このようにしておりましたが、
現在は
<img src="画像url" alt="" width="1000" height="667" style="width: 700px;">
こうしておりますがこれで良いでしょうか。
プロパティの「height: auto;」は単語登録の文字数オーバーのため省略することとしました。
(OGP画像のみ横幅1200pxにして、他の画像は1000pxにすることが多いです)

またもう一つ疑問があります。
たとえ画像のアスペクト比が同じものを横幅1000pxで統一しても、縦幅が667pxだったり668pxだったりはたまた666pxだったりになってしまうのですが、width, height属性を入力するためにはその都度画像サイズを確認し、私の場合は「 width="1000" height="667" style="width: 700px;"」を定型文に入れておりますが、666pxの場合は数値を変更しないといけません。
この面倒な作業を皆さんやっておられるということ…なんですよね。
過去には、Fc2ブログで画像を貼り付けるとwidth, height 属性は自動で書き出されていたのですよね、その機能を戻してもらいたいものです。

今回の質問は以上なのですが、何か改善すべき点や認識の間違いがありましたら教えていただきたいです。
お忙しいところ恐れ入りますが、よろしくお願い致します。

vanillaice (Akira)
vanillaice (Akira)
2021/10/16 (Sat) 23:14

To bonさん

こんばんは ('0')/

> これで良いでしょうか〜

はい。bonさんは現在有料会員だと思いますので、これで良いと思います。解約をした場合に備えたいならば loading="lazy" も入れておくと良いと思います。

> この面倒な作業を皆さんやっておられるということ〜

そうです ^^;
エディターで出力されない件については運営に確認したところ、別件との調整で致し方なく(わざと)変更したそうなので、抜本的な修正をしてもらえると良いんですけどね (´・ω・`)

一応雛形の
<img src="画像url" alt="" width="1000" height="667" style="width: 700px;">
の描画の仕組みを言うと、まず w1000 h668 でアスペクト比を割り出してレイアウトを確保します。そしてstyle属性によるインラインCSSというのはスタイルシートと違い、その場ですぐに処理しますので、ほぼ同時に w700 で調整されます。
なのでリフロー(再整形)に大きな影響は出ませんが、レンダリングブロック要因(全体の描画を遅らせる原因)にはなります。画像に関してはstyle属性を利用しない、というのは難しいので、この雛形で問題ないと思いますよ :)

bon
2021/10/17 (Sun) 18:14

To vanillaice (Akira)さん

こんばんは。
お返事ありがとうございます。

はい、有料会員です。コードに関して現状で良いと言っていただいて安心しました。

lazyloadは、Akiraさんが過去にブログで「一度導入したらずっと続けないといけないので、その自信がなければやらないほうが良い」ということを書いておられて、継続する自信がなかったこと、また導入方法が難しそうだったこともあって私は見送りました。そうであれば loading="lazy"は要らないでしょうか。

そしてやはり「都度画像サイズを確認してwidth, height属性を入力」を皆さんやっておられるんですね。
Akiraさんのブログを何度も読み返し、これはやらねばならないことらしいとは感じたものの、今回確認してあきらめがつきました^^;

とはいえ最初は大変な重荷に感じたものの少しずつ慣れてきましたし、単語登録のおかげで労力を最小限にできていると思います(クリボーも便利に使っています)。FC2が自動で画像サイズ属性を書き出してくれるまで、工夫してやっていきたいと思います。頭の中で「???」だったことをAkiraさんに聞いていただいてホッと安心しました(*´ー`*)いつもありがとうございます。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)