img要素にwidthとheight属性を付けて欲しい
今更感の有る記事ですが、先日（21/03/18）FC2リクエストに『img要素にwidthとheight属性を付けて欲しい』旨のリクエストを致しました。
img要素にwidthとheight属性を付けて欲しい
記事投稿時の画像にwidthとheightを付けて～という要望なのですが、何故これが必要かを記事にしていらっしゃるところは沢山有るのです。（Netで「レイアウトシフトとは」と検索すると色々出てきます。）
画像にwidthとheight属性が付いていないとレイアウトシフトが起きる…って、何？
「レイアウトシフト」とはページ読み込み時などでレイアウトがシフトする（ズレる）事です。
↓こういう感じ。（見本画像を作ってみました。クリックで動きます。）
文章の間から突然画像が出て来るって一瞬戸惑いません？(^_^;)ココロ穏やかでない画像なら尚更に。
上記のようなガタツキを無くし、表示される部分のスペースを予めwidthとheight属性を付けて確保したのが下記の見本です。
表示される場所がここだと分かっていれば心の準備（？）も出来ますし、何より読み易くなります。（但し、表示に時間の掛かる様な重い画像は、逆にイラつきが増しますので軽量化必須です。）
Googleが設定した Core Web Vitals「品質指標」の中の『CLS』でも言ってます。
『CLS』 ページコンテンツに予期しないレイアウトのずれがどれくらいあるかの指標。img要素にwidthとheight属性が無いと、PageSpeed InsightsやLighthouseで計測した場合『画像要素でwidthとheightが明示的に指定されていない』とチェックされます。
FC2にリクエストしておりますので、↓是非！ご賛同下さいませ。m(__)m
img要素にwidthとheight属性を付けて欲しい
詳しい解説等は、下記のブログ記事をお勧めします。
レスポンシブデザインに於けるwidth, height属性について
最近になってGoogleのテストツールが「画像(img要素)に対しwidth, height属性を明示せよ」という警告を出すようになった、ということで、本件に関する個人的見解を記そうと思います。第三者に修正を義務付けるものではないですし、私個人の意見を強制するものでもありませんので、その点を事前にお伝えしておきます。...
Re: そふぃあ 様へ
こんにちは。コメント有難うございます。m(__)mホントはぼっちんさんの所の（そふぃあさんとの）やり取りを見て、その後Akira氏の記事を見て『有志の方～』と有ったので投稿してみた次第です。（有志じゃないですけど。^^;）
HTMLで書ける人は「無ければ付ける」が出来ますが、見たまま画面利用者には難しいですもの。
FC2が要望を汲んでくれて、色んな意味で利用者に優しい投稿画面になってくれたら良いですね。(^-^)
（最近はβ版HTML編集画面で投稿するようにしています。Pタグも使いますがbrも使います。疲れちゃうので難しく考えるの辞めました。^^;）
[ 返信 * 編集 ]▼ ▲