Top Page › Web制作備忘録 › img要素にwidthとheight属性を付けて欲しい
2021-03-23 (Tue) 16:16

img要素にwidthとheight属性を付けて欲しい

今更感の有る記事ですが、先日(21/03/18)FC2リクエストに『img要素にwidthとheight属性を付けて欲しい』旨のリクエストを致しました。
img要素にwidthとheight属性を付けて欲しい
記事投稿時の画像にwidthとheightを付けて~という要望なのですが、何故これが必要かを記事にしていらっしゃるところは沢山有るのです。(Netで「レイアウトシフトとは」と検索すると色々出てきます。)

画像にwidthとheight属性が付いていないとレイアウトシフトが起きる…って、何?
「レイアウトシフト」とはページ読み込み時などでレイアウトがシフトする(ズレる)事です。 ↓こういう感じ。(見本画像を作ってみました。クリックで動きます。)

回線や画像データ次第で↓こんなだったり
レイアウトシフト見本
↓こんなだったりします。
レイアウトシフト見本-2

文章の間から突然画像が出て来るって一瞬戸惑いません?(^_^;)ココロ穏やかでない画像なら尚更に。
上記のようなガタツキを無くし、表示される部分のスペースを予めwidthとheight属性を付けて確保したのが下記の見本です。

レイアウトシフト見本1

表示される場所がここだと分かっていれば心の準備(?)も出来ますし、何より読み易くなります。(但し、表示に時間の掛かる様な重い画像は、逆にイラつきが増しますので軽量化必須です。)
Googleが設定した Core Web Vitals「品質指標」の中の『CLS』でも言ってます。

『CLS』 ページコンテンツに予期しないレイアウトのずれがどれくらいあるかの指標。
img要素にwidthとheight属性が無いと、PageSpeed InsightsやLighthouseで計測した場合『画像要素でwidthとheightが明示的に指定されていない』とチェックされます。

FC2にリクエストしておりますので、↓是非!ご賛同下さいませ。m(__)m
img要素にwidthとheight属性を付けて欲しい

詳しい解説等は、下記のブログ記事をお勧めします。

blog-image

レスポンシブデザインに於けるwidth, height属性について

最近になってGoogleのテストツールが「画像(img要素)に対しwidth, height属性を明示せよ」という警告を出すようになった、ということで、本件に関する個人的見解を記そうと思います。第三者に修正を義務付けるものではないですし、私個人の意見を強制するものでもありませんので、その点を事前にお伝えしておきます。...

blog-image

Lighthouse や PageSpeed Insights で指摘されるようになった画像表示に起因するコンテンツ移動問題の簡単解消方法

昨今、サイト検証ツールの Lighthouse や PageSpeed Insights の Performance の項で「画像要素で width と height が明示的に指定されていない」と指摘がされるようになったことはご存知でしょうか?スクショで表示すると、こんな具合です。 黄緑色の枠線で囲った表示の 「 画像要素で width と height が明示的に指定されていない 」 がそれですが、その直上に 「診断 - アプリケーションのパフォーマンスに関す...

[Tag] * リクエスト * FC2
⟳ 2021-03-24

Comments

こんにちは

akiさん、こんにちは。
昨夜なんとなく気が知れたのか、久しぶりに覗いたリクエストにakiさんの投稿を見つけ、私も一票投じてきました。
以前はあった機能、今必要となっている項目が省かれてしまうのは残念ですもんね。

widthとheight属性の問題と、記事投稿画面が任意で縦長に変更できるようになったら、私も新投稿画面から記事アップしてみたいなと思っています。
どうか画像に関しての要望がはやく叶いますように。

2021-03-23-16:24 そふぃあ
[ 返信 * 編集 ]
aki

Re: そふぃあ 様へ

こんにちは。コメント有難うございます。m(__)m

ホントはぼっちんさんの所の(そふぃあさんとの)やり取りを見て、その後Akira氏の記事を見て『有志の方~』と有ったので投稿してみた次第です。(有志じゃないですけど。^^;)
HTMLで書ける人は「無ければ付ける」が出来ますが、見たまま画面利用者には難しいですもの。
FC2が要望を汲んでくれて、色んな意味で利用者に優しい投稿画面になってくれたら良いですね。(^-^)

(最近はβ版HTML編集画面で投稿するようにしています。Pタグも使いますがbrも使います。疲れちゃうので難しく考えるの辞めました。^^;)
2021-03-23-16:44 aki
[ 返信 * 編集 ]






非公開コメント