把網站圖片轉成 Primitive Pictures 吧

身為一個懶人,很久沒寫文章也是一件很正常的事情。

身為一個懶人,用一堆圖片來充當文章的內容也是一件很正常的事情。

但是會不會網站圖片放太多,開個網頁變得很笨重啊?

來看看以前的文《屍體派對:血之覆蓋 Chapter 2 食完心得 – 破「繭」而出的屍塊》,稍微看了一下文件目錄下的圖片容量,竟然高達 100mb!只是看一篇小文章耗費這麼多流量好像不合道理。

身為一個懶人,實在懶得對網站的圖片優化,很想全部丟 Image optimized CDN,但仔細想想口袋好像不夠支持我這麼做。

反正整個 Blog 文章數目也不多,不如自己全轉成 WebP 格式上傳到圖床好了。後來發現,載入網頁不做 Lazy Loading 好像還是太笨重了些,尤其部分文章的圖片來源是相機,一張檔案大小很是可觀,於是又做了一些優化,這部分以後再說吧。 :)

以上都不是今天的重點,在做 Lazy Loading 的時候,我就在想怎樣的呈現方式會讓讀者有比教好一點的感受。

Primitive Pictures

身為一個攻城獅,常常打開 Medium 看看廢文也是一件很正常的事情。

我觀察到 Medium 的作法是先 loading 一個模糊版圖片,這個圖片檔案相對於原圖來說很小,所以在 Render HTML 的階段可以立即載入完成,對瀏覽的體驗影響不大。

於是乎我就如法炮製了,但是我發現一個問題!在原圖檔案容量偏大的情況下(幾mbs),即使做了高比率的模糊處理,檔案容量仍舊佔用了幾百 kbs。

在東逛逛西逛逛的時候,我發現了 Primitive 這專案。

source: https://github.com/fogleman/primitive

這類型的圖片,以各種三角形或圓形等等去拼裝成你輸入的原圖,聽起來很像蒙太奇對吧!

這個開源專案是以 Golang 寫成的,不過以使用來說其實你也不太需要懂 Golang。( ͡° ͜ʖ ͡°)

用法也很簡單,直接在 Commend Line 下指令就可以:

primitive -i input.png -o output.png -n 100

剩下的自己跑去 Github 看囉。

他支援輸出向量 svg 格式,在沒有 iterations 太多的情況下,檔案容量可以很輕鬆控制在 100kbs 內。

Summary

我做了什麼?

  • 把網站圖片做了一份 Primitive Pictures 版,效果請見網站內各文章

Pros:

  • 做 Lazy Loading 的預覽圖有較好的體驗。

Cons:

  • 手工處理,懶人不適合。

Other options?