BiND9では大きな画像をそのまま貼るのは気をつけましょう

BiND7まではブロックに配置した画像を使いたいサイズ（表示サイズ）で調整すると、そのサイズの画像としてBiNDが素材を作りながらアップロードしてくれていました。そのためかどうかは定かではありませんが、アップロードが遅かったですよね。認識としてはアップロードボタンをクリックすると、アップロードするためのデータをBiNDが一生懸命作りながらアップロードしているという感じでした。だから元画像のデータサイズはあまり気にせずに使ってもそれほど問題だとは思っていませんでした。

Photoshopでリサイズしてjpgとして書き出した画像のほうが小さくはなるのですが、例えばMB単位の画像データでもバインドで使うサイズが仮に600×400だとすると、サーバーにアップロードされるデータは600×400の画像でした。アップロードに時間はかかるけどphotoshopなどは持っていないであろうBiNDのユーザーを考えれば「いいね！」と思っていました。

ところが、BiND8以降画像の取り扱いが変わっています。

レスポンシブのため画像サイズをデバイス（パソコン、タブレット、スマホなど）に合わせて拡大・縮小することになります。そのため特定のサイズでサイズ指定をしないで配置する方法が一般的になります。画像を配置するとデフォルト（初期設定）ではサイズは自動調整になっていて、「大きい時は配置したブロック幅に合わせて縮小されます。ブロック幅より画像が小さい時は拡大はされない。」という設定だと思います。BiNDでは幅が640pxより小さくなるとスマホレイアウトに切り替わるということになるため、パソコンレイアウトでは３分割しているから１画像のサイズ380pxあれば足りるとしても、600ピクセルのタブレットや大きなスマホでは１カラムレイアウトで画像が380pxでは足りなくなることが想定されます。パソコンでは３カラムや４カラムレイアウトにしていても、スマホでは１カラムレイアウトにしているということはよくあると思います。その時画面の幅いっぱいに画像を表示したいとすると幅は640pxなどのサイズが必要ということになります。

そのような仕様の変更があったことは特にアナウンスされていないと思います。何も気にせず素材サイトから大きい画像をダウンロードしてそのまま配置したり、自慢の最新iPhoneで撮影した綺麗な写真をそのままバインドで使っている方は多いと思います。今のバインドではブロックで配置した画像をそのまま（小さくしたりしません。）使います。ブラウザで見た時にはレイアウトに合わせて小さく見えている画像も実は縮小表示されているだけです。MB単位の大きな画像はそのままアップロードされます。そして、そのページを見るためにアクセスした人に対して、そのMB単位の大きな画像を読み込ませるのです。今の回線は早いので特に気になることでもないのですが、スマホではいわゆる７ギガの壁と言われる「月の通信料が7GBを超えたら通信速度が極端に遅くなる。」という制限に影響を及ぼすことになります。最近勢力を拡大してきているいわゆる格安スマホなどではその制限の数値がもっと低く設定されていることも多いです。

自分のサイトを見にきてくれた人に意味もなく大きな画像を読み込ませて、結果として通信に制限を与えることになってはもうしわけない。「あのサイトは画像が大きいから気をつけたほうがいいよ」なんて噂になってしまったら困ったことになります。

上の画像は写真acからダウンロードしたLサイズの画像です。その画像を元にphotoshopでリサイズ・圧縮した場合と、photoshopなどを持っていない環境の方のためにβtoolsというサイトでリサイズ・圧縮できるので試した画像を配置した場合で、比較してみましたのでご覧ください。

https://bindism.com/tips/pictsize.html

BiNDで作るホームページ制作　バインドイズム – BiNDism
https://bindism.com