画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize

[nikunonamae]

全く専門外の閲覧者としての視点だけど、画像による Layout Shiftのせいでリンクをクリックし損じたり、ひどいと別のものをクリックしてしまったりとわりと気分が悪いので解消されるならありがたいなあ

[mohri]

すごい。Web新常識が爆誕みたいになってる→ “新規の img タグは width/height 属性を付けて書く”

[trickart412]

これが普及しても、クソ広告はズレて誤タップさせてくるんだろなぁという諦めに似た確信がある

[Knoa]

むしろ当たり前すぎる「width / height 属性による解決策」の前に、なんで「intrinsicsize 属性」なんて不可解なものが挟まってしまったんだという感想

[RATCHO]

これからの仕様の前にそもそものimgタグの仕様について勉強になった

[living]

あとは広告やソーシャルボタン等によるlayout shiftが無くなればだいぶ快適になるんだけどなー

[tohokuaiki]

え？マジで？これ、20年前のHTMLじゃん。cssで「すげー、別指定できる！」って感動したのに。“新規の img タグは width/height 属性を付けて書く”

[Windymelt]

だから画像の読み込みが重いっていう話をしてるんです。 > んなもんブラウザが先読みしとけよ。

[ntaoo]

“intrinsicsize”

[efcl]

ブラウザのデフォルトスタイルシートに`aspect-ratio`の指定が入ることで、widthとheight属性に値を入れることでLayout Shiftが抑えられることについて ``` img { aspect-ratio: attr(width) / attr(height); } ```

[kns_1234]

“新規の img タグは width/height 属性を付けて書く”

[rryu]

レスポンシブしているとwidth/height属性を指定しても無視されるのでガクつくという問題がようやく解決されるのか…

[lemarc]

良い

[kzms2]

色々なことが丁寧に書かれてて素敵です

[nilab]

「ブラウザが画像をダウンロードする前にアスペクト比を知る手段を提供すれば問題を解決できるということです. そこに着目し, 提案されたのが intrinsicsize 属性です」

[nijitaro]

結局これは予め画像のサイズが分かってないものに関しては解決にならなくないかな？

[buhoho]

セクシーな仕様

[daruyanagi]

やろう、やろうと思ってたんだけど、レスポンシブ対応がよくわかんなくて放置してた

[fukken]

webの世界の仕様は試行錯誤の歴史だなぁ

[pinkid77]

画像

[yhachisu]

NHK NEWS WEBは早くこれに対応してくれ。記事からトップページに戻る度にガタガタして位置がずれるせいで使いづらい。

[yarumato]

“レスポンシブなimg要素の寸法はその画像のアスペクト比が必要。CSSのwidth/heightプロパティにより上書きされ無視されていたimgタグのwidth/height属性をアスペクトの算出に利用する提案”

[ducktoon]

んなもんブラウザが先読みしとけよ。読めばわかる寸法を事前に書くなんてバカバカしい悪習を繰り返すな

[akahigeg]

渾身のまとめだ

[kenko_mania]

“アスペクト比”

[ykore52]

Togetterで誤タップしなくてよくなるのか

[fujii_yuji]

最近のマークアップとかフロントエンドまわりのこと、どんどん分からなくなってきているけれど、これはとても良いのでは。早く一般的に使われるくらいになったらいいな。

[Silica]

でもwebの人たち、SPA的なやつで画像の読み込みと無関係にいきなり位置ずらすよね？

[n314]

もう使えるのか

[side_tana]

めっちゃいいまとめだ

[tattyu]

画像のアスペクト比を適用する為だけにめちゃくちゃ色んな議論がされてるの不毛に感じてしまう。

[onesplat]

いい話 / id:aox 余計なことすんなハゲ

[aox]

ファイル名から読み取れるようにすれば良いのでは。今でもほにゃらら1280x760.jpgみたいなファイル名で最適化されたファイルが埋め込まれてる事がありますし