じわじわと更新進めてます！！
今回は画像サムネイルについてお話します。
ギャラリーページにはたくさんの画像が並んでますが、 これらは画像サイズを小さくしているものになります。
ギャラリーについて
画像をクリックするとライトボックスという絵の詳細画面が開かれますが、 そのときもまずはサムネイルを表示させて、 元の絵を後で表示する方式にしています。
これによりギャラリー一覧はすばやく、詳細はくっきり表示できて良い感じなのです。
ただ、専門的な問題点として、 画像の拡張子が現状ではpngやjpegとかにしかできないのです。
このサイトを作るために動かしているプログラムはDenoというもので、 これはNode.jsを使いやすくした新しめなものであり、 Nodeで使えたプログラムが一部しか互換がないことで技術的な限界に到達してる状態になっているのです。
現代ウェブサイトでサムネイル作りに適した拡張子は「webp」というもので、 pngと同様な可逆圧縮（元通りにできるやつ）にすることができて、 jpegのような非可逆圧縮（元通りにできない代償の代わりに軽くなる）よりも ファイルサイズが軽い上に透過もできるというものすごいものがあるのです。
ただ、新しく出たばかりのものであり、まだ汎用的なものではないのです。 かの有名なPhotoShopやClipStudioではサポートされていないのです。
なので、現状は変換ツールなりで生成するしかないものなのです。
webpは保存してもスマホでは使える用途が限られていたりするので、 そういう意味ではサムネイル表示としてwebpは有効だと考えています。
そんなwebpに変換するための手段がDenoには今のところないのです…
あともう一つ、縮小するときの形式は複数あるのですが、 このサイトのサムネイルで使われているのはバイリニア方式のものです。
バイリニア方式は直線補完で、グラデーションを描くように拡大縮小するイメージなのです。 拡大するとぼかし状態になるのがバイリニア方式なのです。
それとは対照的に拡大するとドット絵のような状態になるのがニアレストネイバー方式です。
この二つはデジタルおえかきツールで知ってる人も結構いるかもしれない…
それが何が問題かというと、Denoでバイリニア方式のリサイズを使う手段が限られているのです。
ニアレストネイバー方式だとサムネイル画像から元の画像に切り替えるとき、左上のピクセルが基準になっている影響で元の画像に切り替わる際に画像全体が右下にずれるような現象が起こっていたのです。
これでは適さないと思ったうえで調べて、たどり着いたのがjimpというライブラリでした。
jimpは画像を編集することができるNode.jsのプログラムであり、 数少ないDenoで使えるプログラムの一つなのです。
ただ、上記の通りwebpに変換することができず、 ツールの仕様による影響なのか一定以上の処理をするとエラーを出さずに強制終了する良くない状態だったことが判明しているのです。
どっちの影響かも不明で、現状は一定以上の処理をはさまないように色々工夫しています。 その最たるものがキャッシュシステムなのです。
ファイルの保存日時を取得し、管理ファイルと比較して変更があったデータのみリサイズ処理を分割実行することで、なんとか運用ができています。
それでもjpegの粗さがやっぱ目立つなあと思っているので、 Denoの更新でNode.jsのライブラリーの使える量が増えてほしいなあと思いました！！ （そもそもNodeのプログラムが使えるようになったこと自体も最近のことなので、これからの楽しみともいえます）
pngからjpegに変えるだけでアートギャラリーの一覧表示は24MBから4.3MBに圧縮できてるので、そういう観点からpngサムネイルは使わない方針のままです。 ただ、やはりwebpという文明の利器は欲しい…！！
それが最近のサイト作りで感じていたことなのです。
お絵描き的な要素も色々追加してたりするので、 次はそのあたりをお話ししたいです！！
読んでくれてありがとめぇ💻🐏
