BiND Press2での画像の扱いを検証してみました

仕組みが大きく変わり「大型ページへの対応と高速化を実現」と公式サイトでもアピールされているBiND Press2ですが、画像の扱いについて検証してみました。

ここ数ヶ月の間、BiNDのデータが大きすぎる、ページのサイズが大きすぎて表示に時間がかかるという類のご相談がいくつもありました。BiNDについてよくわからないままご自身でいろいろやってきた方もいれば、外注で依頼して作ってもらったのに何らの解決への提案もない。という方もいたりといろいろでした。

BiNDupの公式サイトには詳細についてはなんら書かれていないので、このようなときには自分で検証してみるしかありません。ということで試してみました。

画像はそのまま使われる！

BlockDesignのPress2のフォーマットを利用して、わざと大きな画像で投稿をすることで画像がどのように処理されて表示されるのかを確認してみました。

一番大きな画像は12MBという画像をわざと使って投稿しました。結果としてはそのままの画像を使って投稿ページは作られているようです。

以下のURLから確認用の実際のページをご確認いただけます
https://bindism.com/picttest/press2/

一覧表示のサムネイル画像はサムネイルの設定サイズで画像が作られているようで、さらに個々の投稿ページで表示する「画像」で指定された表示はやはり画像の設定サイズで作成した画像で表示されているようです。
このケースでは、一覧のサムネイルは600px、投稿ページの画像は1200pxです。

ただ、投稿の本文中に配置した画像は元画像のままのようです。

画像はBiND Cloudのサーバーに保存し、そこから読み込むようなhtmlに変わっているBiND Press2ですが、画像を軽量化したりというような処理は特に行われていないようです。投稿本文中の画像は12MB超え＆5000px超えでもそのままでした。

BiNDデータに元画像は含まれるようです

サイトフォルダを確認してみると、blogフォルダの中に画像があります。元画像のまま存在していることが確認できます。

BiNDデータのサイズを確認してみると

意図的に大きな画像を使っているとは言え、わずか４つの投稿でこのデータサイズになっているというのは重要です。12MBの画像は大げさと思われるかもしれませんが、10MB前後の画像をBiNDで使っている方は普通にいます。大きさを気にしたことがない人もいれば、BiNDが最適に調整してくれると思っている方もいます。環境設定画面で『画像の最適化』にチェックをしているから問題ないと思っていたという声も聞きます。

ブログだと思って使っている方は投稿はどんどん増えて行く前提です。４つの投稿で終わりだったらそもそもPressを使う意味もありません。そうするとこのように大きな画像をどんどん使って投稿していったとき、BiNDのデータが膨大なサイズになっていくことは容易に想像できます。そうなってからでは遅いので、最初からBiNDでの画像の扱いを知っていたほうがいいと思って、検証しています。

BiNDismはなぜ画像サイズにうるさいのか

BiNDismでは何度も画像サイズや画像の取扱について検証して投稿しています。BiNDismはなんでこんな画像サイズについてうるさいのか？と思われている方もいるかもしれません。

光回線が普通になり、外にいてもwifiでつながる環境があちこちにあり、スマホでも4G回線で動画さえも見れてしまう環境になり、画像の大きさを気にしないでホームページを作っている人が多くなっています。NiCEサイトのページを見て大きな画像を使ったレイアウトのサイトを見てみると、その殆どが表示に時間がかかり、ページサイズを調べてみると10MB超えというのはいくつもあります。

SEO的にも軽量化（表示速度）は大切ですが、サイズを気にしていない方が多いと思います。特にBiNDは初心者の方が対象のソフトですので、その情報をBiNDの公式サイトやマニュアルで与えてあげないとそもそも画像サイズなんて気にしたこともないとなってしまいます。

また、お客様からよく聞く声の一つとして、「バインドって画像を最適な大きさで自動的に調整してくれているんでしょ」というのがあります。本当に多いです。どこでこのような情報を得ているのかは定かではありませんが、最適になるように処理を自動的にしてくれていないということは間違いないです。

だから、画像の大きさ（ピクセル数の大きさと、KB・MBといったデータサイズ）について注意する必要があることを伝えるため、一つのきっかけに慣ればと思ってしつこく書いています。

バインドでの作成を依頼するときには、画像についての確認をしてみてください。「バインドは自動的に最適にしてくれるから大丈夫ですよ」とか、「画像の最適化にチェックを入れておけば大丈夫です」のように言われる方だったら再考したほうがいいと思います。

大きすぎる画像にメリットはありません。例えばダイヤモンドの指輪の商品で、ディテールまできれいに見せるための写真だとしたら拡大してもきれいに見えるようにそれなりのサイズと画像品質（圧縮などの設定）が必要と言えるでしょう。そうであればせめて１つのページに何枚も載せないで商品別にページを別けてつくり、その個別のページで大きな写真は見せるというようにしてあげるなどの工夫が必要でしょう。

BiNDで作るホームページ制作　バインドイズム – BiNDism
https://bindism.com
※公式サイトもリニューアルしたので見てみてください。