サイトの画像をほぼwebpにしてみた

サイトの画像をほぼほぼwebpにした。基本的には何ら変わりないですが、管理は楽になりました。むしろ管理は楽にするついでにwebpにもできたという感じ。

参考:

• The world’s fastest framework for building websites | Hugo
• Image Processing | Hugo
• Page Bundles | Hugo

目的

HUGOの機能を利用して自動でwebpへの変換と、サイズ変換の仕組みを取り入れてみました。

以前、この機能はいらないかなと、考えていたんですが、別の大きい目のサイトを制作したことで色々鍛えられたこともあり、有効な機能だと再認識した。

サイトのパフォーマンス向上はもちろんですが、そもそものサイト管理や運営をもっと便利にしたいので今回再調整してみた。

• サムネイル画像のリサイズ
• webp変換
• 自動化
• shortcodeでも導入し記事中の画像も変換
• ソースファイルの管理をシンプルに

特別webpにしたいとかではなく、色々自動化や使いやすくする過程でついでにwebpにできるし、やっとこうか。という感じです。

運用状況

ページバンドルで管理している。

あとは、非対応ブラウザ対策が必要になりますが、webpはもう大丈夫だと判断し、その他は捨ててます。

今回のまとめ

現状、不具合はなさそうに思うが少し注意深くチェックしていこうと思う。

しかし、サーバーで立ち上げた場合に、表示できない不具合がある。

小さいサムネイルと、記事中の1枚目の大きめサイズがあるが、大きめは全て正しく表示されている。サムネイルは全体の半分程度が表示できていない。正しく表示できている画像もある。

この辺りはよくわからない。そして、本番用にビルドして公開すると全て正しく表示される。よくわからん。考えられそうなのはサーバーの立ち上げ方、オプション辺りだろうか。きっと何かが抜けている、もしくは余計なことをしているんじゃないかと思う。

いちよう公開したサイトが正しく動いているのでOK。ということにしておきます。

変換後のサイズは、画質や容量を比較しながら少しずつ調整していこうかなと思います。

参考:

• The world’s fastest framework for building websites | Hugo
• Image Processing | Hugo
• Page Bundles | Hugo

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