BiND9での画像ファイルの取り扱い
BiND9ではブロックエディタで配置した画像が基本的にはそのまま使われ、サーバーにアップロードされるデータも配置したデータをそのままアップロードされます。
以下の３つは、素材サイトの大きめの画像データをそのまま使った場合と、PhotoShopで調整した場合、そして、Photoshopがない場合を想定し「βtools」というサイトで画像を調整したデータを使った場合で比較しています。
このページを開いた時に、１の画像だけ表示に時間がかかっているように感じる人もいるかもしれません。高速の光回線の人には気にもならない事でしょうが、レスポンシブの場合はスマホの方もこのページを読み込みます。4G回線は早いので表示にはそれほど遅さは感じないかもしれませんが、 いわゆる7GBの壁といいますか、大きい画像を読み込ませるということは通信料を増やしてしまうことになり、結果としてはユーザーに迷惑をかけてしまうことになってしまいます 。
下の３つは同じサイズで表示されていると思います。ただ、それは左右２分割したブロックの左の幅に合わせて自動縮小されているだけで、読み込んでいる画像はそれぞれ違うものになります。
１. 元画像
左が元の画像です。写真ACのLサイズのデータです。RGBのjpgファイルですから厳密には印刷向けではないのでしょうが、解像度的には3507px × 2657pxとかなりのサイズです。
元データ（original.jpg） 5.4MB / 3507px × 2657px
アップロード後にソースからデータを確認すると、
<img src="../_src/10994/original.jpg" alt="original" id="imgsrc10994_1">
となっています。BiND9のデータフォルダを開き、_src/10994/original.jpgを見てみると、
5.2MB / 3507px × 2657px となっています。BiND9では基本的に配置された画像をそのままサーバーにアップロードします。元の画像をそのまま読み込む事になりますので、素材集などの大きい画像や、スマホなどで撮影したままの画像などは気をつけてください。
２. Photoshopで圧縮
Photoshopで元画像を開き、画像サイズを1280px × 970pxに変更して「web及びデバイス用に保存」から、jpg標準（中画質、画質30）で書き出した画像です。
Photoshopで調整（photoshop.jpg） 99KB / 1280px × 970px
アップロード後にソースからデータを確認すると、
<img src="../_src/10998/photoshop.jpg" alt="photoshop" id="imgsrc10998_1">
となっています。BiND9のデータフォルダを開き、_src/10998/photoshop.jpgを見てみると、
111KB / 1280px × 970px となっています。photshopでリサイズしたデータより若干大きくなっているようですが、元データをそのまま配置した時と比べたらその差は明らかです。
３. βtoolsで圧縮
Photoshopがない環境の場合を想定して、βtoolsでリサイズ・圧縮をしてみました。
βtoolsで調整（Btools30jpg） ９1KB / 1280px × 970px
アップロード後にソースからデータを確認すると、
<img src="../_src/11002/btools30.jpg" alt="Btools30" id="imgsrc11002_1">
となっています。BiND9のデータフォルダを開き、_src/11002/btools30.jpgを見てみると、
７９KB / 1280px × 970px となっています。こちらはアップロードしたデータより若干小さくなっているようです。
βtools 画像サイズ変更ツール(JPEG用）
http://neutralx0.net/tool/img.html
※無料で簡単に使えるのでご紹介するために使ってみました。Flashを使っているようなのでこの機能がいつまで使えるのかはわかりません。またご利用のブラウザなどの環境によっては動作しない可能性もあります。βtoosについての質問はご遠慮ください。