メモログ

Primitive Image についてもう一度

最近まで使っていたPrimitiveを使って画像を変換するとかPrimitiveの変換をまとめて行うの実装を見直しつつ、WebP画像とどちらが良いかなと比較。primitive_bulk_outputの実装も何年かぶりに変更して、リサイズしてからSVGを生成するようにしたり、最後にファイルサイズを最適化して出力するようにしました。

オリジナル画像を単純にリサイズして WebP に変換すると、通常サイズで約 29KB、@2x の高解像度用だと約 66KBになる。WebP は同じ画像サイズでも、内容によってファイルサイズにばらつきがあり、@2x の場合は 50KB〜400KB くらいと幅がある。

以下は、Primitive で n(シェイプの数)= 300 に設定して作成した SVG 画像で、Featured Image として使っているもの。サイズは約 52KB。Primitive の SVG は、画像の内容にも左右されるけど、ファイルサイズに最も影響を与えるのは n の値。n が同じなら、画像内容に関係なくファイルサイズはほぼ一定になる。

n1000の場合は174KB。

n2000の場合。347KB。

ファイルサイズだけで見れば、Primitive で作った SVG の方が安定していて扱いやすい。でも、400KB くらいのサイズなら WebP の方がクオリティと容量のバランスが良いかもしれない。

n = 300 の Primitive SVG の、ディテールが少し削がれてる感じもわりと好き。ただ、Primitive は生成に時間がかかるし、m(モード)によって印象も大きく変わる。単に画像を切り取るだけとは違って、それなりに手間もある。

オリジナル画像をそのまま使うのはどうかな…という迷いもあるけど、やっぱり映えるのはオリジナル画像かもしれない。

というメモ。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。