HUGO ImageProcessing 機能を試してみた

ImageProcessing 機能を試してみた。

関連リンク:

*追記:最新の処理済みイメージがあるかどうかをチェックし、再処理の代わりに使用するためのresourcesフォルダがありました。というわけで、懸念していた問題はちゃーんと回避されていました。やっぱすげぇですわ。

HUGO ImageProcessing

Hugo で利用できる ImageProcessing はビルド時に元画像を変換して、指定した画像サイズや、アスペクト比にできる機能です。たくさんイジれるパラメータがあります。

すばらしい機能なので、またぼちぼちいじってみたいなぁーっと思っていました。

そして、今回イジってみた経験を書き残していこうと思います。

サイトで利用したい場面

利用したい場面

• 元データを記事へバンドル
• 記事中の画像
• サムネイルを場面によってサイズを変更
• サイズとアスペクト比の調整

元データをぶちこむだけで、いろいろ自動化できる。レツゴー

いらないかも、、、

ぶっちゃけ必要ないかもしれない。

仕組み自体はめっちゃ好きなんですけど、更新を続けていき、記事数、画像数が増えていくようなサイトで使用するとなると、無視できない問題点が出てきました。

ビルド時に生成される

結局ビルド時に生成するので、変換画像が多くなるのであればビルドが重たくなっていくのは確実と思う。

どれくらいの数を生成すると、どれくらい重くなるのかというのは全然わからないので、想像ではあるが。

しかし、いくらビルドの早い Hugo であっても、さすがに大量に画像処理させてしまうとなると。。。うーむ

今回は大体10個未満の画像を、テストサーバーでビルドしました。その際、普段は感じない、一瞬のもたつきを感じました。

なので、少量の画像では大きく変わらないだろうが、ブログのような記事を更新し続ける性質のサイトでは、処理する画像がどんどんと蓄積していくことになるので、処理が重たくなるのは容易に想像できる。

私の想定する使い方においては不要

私の想定する使い方においては不要。

ということは、事前にする変換作業の効率や自動化を勧めていく方がいい。

という結論に達した。なので ImageProcessing を使う理由は無くなってしまった。

一回吐き出してくれた画像を、せっかくだからそのまま利用したいんだけどなぁ。

毎回吐き出されるのはちょっと….

使える場面、状況

あえて使い所を探すとするならば、

• 特定少数の画像変換
• netlify などの自動ビルドしてくれるサイト
• バナーみたいなパーツ
• 更新頻度の少ないホームページ
• 画像をよく置き換える部分

だろうか。

これらのそういった箇所で、素材の加工をイメージプロセッサーに落とし込んでいれば、素の素材をぶち込むだけで完成するというのが理想。

イメージプロセッサーに落とし込んでいれば、サイズ変更、クオリティの変更、をhugo側から調整するだけで、過去の分までビルド時に反映してくれることになる。

という使い方に落ち着くのかなと、いじっていて思いました。

netlify 上でビルドするので、重かろうが関係ないのかなと思ったが、なにか制限に引っかからないか、ちゃんとみないといけないですね。ま、その辺、使わないのでわからんですが。

今回の私の利用にはマッチしなかったけども、思ったよりも結構幅広く利用できる機能ですね。

というわけで、結局このサイトでは利用シーンが見当たらないけれど、いい勉強になった。

関連リンク:

最後まで閲覧有難うございました。他の記事もよろしくお願い致します。