画像が届いた瞬間に、読んでいた行が下へ逃げた。大きさを書き忘れていただけだった

スマホで、自分の書いた記事を開いた。
上から読みはじめて、一行目の途中で文章がガクッと下へずれた。
目で行を追い直して、また読みはじめる。
少しして、押そうとしていたリンクが指の直前で逃げた。
自分のサイトなのに、読みにくい。

ずれた瞬間に、何が起きていたのか

ブラウザはページを受け取ると、まず文字のほうから組み立てていく。
文章は軽いので先に届く。
写真は重いので、少し遅れて届く。
厄介なのは、まだ届いていない画像がどれくらいの大きさなのかを、そのときのブラウザが知らないことだ。
知らないものの場所は空けられない。
だから画像を無いものとして、文章を上から詰めて並べてしまう。
そこへ、遅れて画像が届く。
ブラウザはあわてて場所を空ける。
空けたぶん、下にあった文章が押し出される。
あれは回線が遅かったのではなくて、席が用意されていなかっただけだった。

大きさを書いておくと、先に席が取れる

やることは拍子抜けするほど少ない。
img タグに width と height を書く。
それだけだ。

この二つの数字が入っていると、画像そのものが届く前に、ブラウザは縦横の比が三対二だと計算できる。
幅が決まれば高さも決まるので、その大きさの空き地を先に確保しておける。
あとは届いた画像がそこへ収まるだけで、下の文章は動かない。
数字を書き足すだけで、あの飛び跳ねが止まった。

CSSで縮めても、この数字は効く

ここで一度つまずいた。
width="1200" と書いたら、スマホでも1200のまま出てはみ出すんじゃないか、と思ったのだ。
そうはならない。
CSS側にこの一行があれば、表示は画面の幅に合わせて縮んでくれる。

img { max-width: 100%; height: auto; }

タグに書く数字は「表示したい大きさ」ではなく「画像ファイルそのものの大きさ」だ。
比率をブラウザに伝えるための数字だと思えばいい。
見た目の大きさを決めるのはCSSのほう。
役割が分かれていると分かってから、迷わなくなった。
画面の幅に合わせて中身が折り返されていく仕組みは、前に書いた回と地続きの話でもある。

あとから割り込んでくるのは、画像だけじゃない

直したつもりでもう一度スマホで開いたら、まだ一か所だけ動いていた。
記事の途中に貼った地図だった。
外から読み込んで表示するものは、画像と同じで遅れて届く。
地図、動画、SNSの埋め込み、あとから差し込まれる枠。
どれも「届いてから場所を取る」ので、同じことが起きる。
こういうものは、囲っている箱のほうに最低限の高さを書いておくと止まる。

もうひとつ気づいたのが文字だ。
選んだ書体が届くまで、ブラウザは手元にある別の書体で先に出しておく。
届いた瞬間に入れ替わるのだが、書体が違えば一行に入る文字数も行の高さも変わる。
そこでまた、少しだけ下がずれる。
これは完全には消せないので、僕は本文の書体をあまり凝らないことにした。

見た目の話ではなかった

直しながら、これは体裁の問題ではないな、と思った。
文章が下へ逃げるだけなら読み直せばいい。
けれど押すつもりのないボタンを押させてしまうことがある。
申し込みの画面や、削除のボタンの近くで起きたら、目も当てられない。
以前リンクの下線を消して誰も押さなくなった話を書いたけれど、あれと根は同じだった。
こちらの都合で、読む人の手元を難しくしている。

画像の大きさを書くのは、作法でも飾りでもない。
これから来るものの席を、先に取っておくということだ。
数字を二つ足すだけで、読んでいる人が行を見失わずに済む。
こんなに安く済む親切も、そうそうない。