ページの中身が形になってきたところで、写真の扱いに手をつけた。経営者から受け取った写真は、店内の様子と、施術の場面と、使っている道具の三種類、合わせて数枚あった。これを、ページの一部として、そのまま並べたい。ふつうなら、写真はページとは別のファイルとして持ち、ページを開いた側の機械が、写真を後から取りに来る。その取りに来る回数を、できるだけ減らしたかった。
写真ごとに読み込むのを、やめる
ウェブページは、開いた瞬間に、まず本文の骨組みだけが届く。そのあと、機械が「あ、ここに写真が要る」と気づいて、写真の場所へ改めて取りに行く。写真の数だけ、この取りに行く動作が繰り返される。回数が増えれば、そのぶん表示が遅れる。通信が細い場所では、その遅れが目に見えて表れる。写真を三枚も四枚も並べる予定だったので、その分の取りに行く回数を、ばかにできないと思った。だから、写真をページとは別に置くのをやめて、ページ自体の中に写真の中身を書き込むことにした。取りに行く必要が無ければ、遅れも生まれない。届いたページを開いた時点で、写真もそこにある。
画像を文字列に変えて、そのまま埋める
やり方は昔からある方法だった。写真の中身を、文字と数字だけからなる長い長い文字列に変換して、その文字列を、ページの中に貼り付ける。ページを表示する仕組みは、この文字列を写真として解釈して、画面に絵として描いてくれる。人間の目には、単に写真が並んでいるだけに見える。裏では、写真そのものがページの一部として運ばれている。この変換は、一度だけこちらでやっておけば済む。運用に入ってから、経営者が写真を差し替える時にも、同じやり方で変換したものを差し込めばよい。手順は書いて渡した。
大きくなった、ページ
代わりに、ページのファイルはずいぶん大きくなった。もともと数十キロだったはずのページが、六百キロを超える大きさになった。写真の中身が全部ページに入ったのだから当然だった。開いた側から見れば、ページを取りに行くのが一回で済むのは同じ。ただし、その一回で運ぶ荷物が大きくなった。この判断が正しいかどうかは、通信の速さと、取りに行く回数の少なさと、どちらを優先するかで変わる。今回の店は、写真そのものが売り物ではなく、店の雰囲気が伝わればよかった。その割り切りができたから、写真を大きく載せる必要も、たくさん並べる必要も無かった。だから、少数を貼り込むかたちで済んだ。写真がもっと増えるようなら、途中で方針を切り替える必要が出てくる。
分けるべきものは、外に出した
写真をページの中に貼り込む一方で、外に出しておいたほうがよいものもあった。SNSで共有された時に見せる代表画像や、スマートフォンのホーム画面に置かれた時に使う角丸のアイコン。これらは、ページ本体とは別の入口から呼び出されるので、ページの中に埋め込んでも意味がない。逆に、これらを外に出しておくと、共有された先の画面にきちんと出てくる。ページと同じ場所に一緒に置き、それぞれ決まった名前と決まった大きさで用意した。共有される場面を想像しながら、代表画像は横長、角丸のアイコンは正方形、と用途ごとに切り分けた。
何でもかんでもページに詰めれば良いわけではなくて、詰めるものと外に置くものの線引きを、意味のあるところで引くのが仕事だった。運用に入ったあとで、この線引きは変えていない。写真は少数を貼り込み、共有用は外に置く。この二本立てが、この店の身の丈にはちょうど良かった。