動画の再生：中央の再生ボタンをクリックした後、右下の全画面ボタンをクリックして大きな動画で御覧ください。再生終了後は、右下の「全画面表示を終了」をクリックすると元に戻ります。
画像をBulk Resizeで処理してみました
6.8MB（4959×3306px）の画像をバルクリサイズで処理してみました。
幅を800px、画質を85に設定して処理してみたところ、69.7KBになりました。およそ100分の1です。
画像の最適化に使うサイトでは、TinyPNGやTinyJPGが有名かもしれませんが、寸法を指定して処理できるのがバルクリサイズのメリットで、一番使いやすいと思います。
| Bulk Resize | |
|---|---|
| TinyPNG | |
| TinyJPG |
0:40 音声なし
事前に処理した画像を使うとどのように変わるか
バルクリサイズで事前に処理した70KBの画像を使用した時、webp 45KB / jpg 70KB となりました。webpは自動的に変換（作成）してくれていますが、jpgについては特に軽量化処理されないまま配置されているようです。
元画像の6.8MBを配置した時がwebp 352KB / jpg 946KB に処理されていましたが、極端に大きなサイズの画像などはそこそこに処理してくれるのでありがたい機能ですが、やはり適切なサイズ（px）にして画質の処理などもした画像を使うほうが圧倒的に画像サイズは抑えることができました。
１枚の画像が352KBでも問題はないかもしれませんが、このような画像が１ページにもし10枚配置されていれば、画像だけで3MBを超えることになってきます。
0:48 音声なし
表示されるサイズを考えた画像を使いましょう
同じ6.8MBの元画像をバルクリサイズでサイズ1440px・画質85にして処理してみると167.2KBでした。800pxに処理した画像が70KBだったことから比べると、寸法を大きくした分容量が倍以上になりました。
それでは、1440pxの画像のほうが倍きれいなのかと言えば、サイズこそ違いますが画像の鮮明さは変わらないように感じます。800pxに処理した画像を1440pxに拡大して表示すればもちろん粗くなりますが、800pxで表示する画像であれば1440pxの画像と比べても変わらないと思います。
要は、レイアウト的に必要なサイズに画像を処理してあげることが一番効率的です。レスポンシブでは1440pxの画像を配置しても、レイアウトの関係で800pxで表示される場合には縮小されるので寸法を厳密に意識していないこともあるかもしれませんが、800pxで表示するブロックに1440pxの画像を配置しても縮小されるだけで見た目はほとんど変わらない。ということになります。
ブロックを３分割して横に画像が３枚並ぶような時にはブロックの横幅などから計算すると600pxもあれば十分ということが多いと思います。ただ、BiNDupは画面の幅が640pxよりも小さいときにスマホモードでの表示になりますので、スマホでは１枚ずつ縦に並ぶレイアウトになるのであれば、640pxのサイズは確保しておいたほうがいいことになります。
0:29 音声なし
BiNDupのデータ容量に差が出てきます
元画像6.8MBを使った時と、バルクリサイズで事前に処理した70KBの画像を使った時で比較してきました。6.8MBの画像を使った時でもwebp 352KB / jpg 946KBに軽量化した画像になっていたので、サイトを見る人の立場からすると違いとしては数百KB程度だと思ってしまいます。サイトで表示される画像という点ではそうなんですが、BiNDupのデータとして見た時、この２つの違いは大きくなってきます。
6.83MBと2.21MB、その差は4MB以上です。配置され表示される画像としての差は数百KBだったはずなのに、BiNDupのデータとしてはそんなもんでは納まりません。
今のBiNDupは、１枚の画像をブロックに配置した時、表示するためのwebpとjpgを処理・作成して/_srcフォルダ内に任意の番号をフォルダを作って格納します。
そのフォルダが仮に987だった時、988というフォルダも作られ、そこにも画像がwebpとjpgで格納されます。この１番上の番号に自動的に保存される画像が元画像のサイズ・容量の影響を受けて大きくなってきます。事前処理をした画像であればこっちのフォルダに入る画像も小さいことになり、結果としてBiNDupのデータ容量としての違いになってきます。
BiNDupのデータが大きくなったら何がいけないの？と思われるかもしれませんが、たった１枚の画像でこの差です。サイトを１つ作った時には画像はかなりの枚数になってきます。仮に50枚使ったとして何も処理しないままの画像だったらBiNDupのデータサイズとしては相当大きくなってくることが想像されます。
極端に大きくなったデータは、BiNDupで開くときや保存する時、エクスポートする時などに時間がかかるようになったり、動きが重く感じるようになってきます。BiNDupのデータサイズって、侮れないと思っています。
0:59 音声なし
COMMENT
RELATED POSTS
| [%category%] | [%title%] [%article_date_notime_dot%] |
|---|---|
