幹壞事是進步最大的原動力
在 Hacker News 上看到「Blur Radius Comparison (bjango.com)」，原文在「Blur radius comparison」。
重點在這張：
前面九個分成三種效果在三個不同的瀏覽器呈現的結果，然後是 Figma、Illustrator、Photoshop 與 Sketch 的效果。
可以看出來在瀏覽器上的部分，大家的 rendering 沒有差太多。
而 Figma 所有 blur 類的效果，在瀏覽器上比較接近的只有 box-shadow，其他三套則是有不同的變化...
先從一張圖片算出大約 20～30 bytes 的字串，就可以在 API response 時快速產生出一個很模糊但是有有代表性的縮圖 (或是在 HTML 裡面放，用 javascript 產生)：「BlurHash」。
從官方給的範例比較快理解：
以及：
另外也提供了展現在 app 上的效果：
有支援一些程式語言，不過看起來行動平台上的支援都是比較新的語言 (Swift & Kotlin)，如果不是用這些語言而想用 BlurHash 的話就得自己整了...
另外在 Hacker News 上有翻到先前的討論：「BlurHash: Algorithm to generate compact representation of an image placeholder」，開頭就看到其他軟體的作法：
For comparison, Instagram sends ~200 byte base64 thumbnails in its API responses. It's a low-res JPEG with a fixed header to save a bit more space. This is also used to blur sensitive images. You can get even better results with webp.
這個方法就避開另外再弄一包 library 進去，用現成的 library 就會動了...
Lyst 的「Image Background Removal」這篇在講圖片去背的方法。
Lyst 是把這個演算法用在上架自動分類的一環：圖片先去背，然後再用 classifier 綜合其他的 metadata 判斷要分到那一類。
這邊去背的演算法很簡單：
其實 Lyst 這篇是在說「要怎麼打組合拳」：利用現有最簡單的技術去堆積木，想辦法找出一套合理的解。而不是像學術上的那樣要求做到極致。所以也有像這樣不是處理的很好的：
這種組合拳反倒還蠻適合在學校裡教？
裝了 Blur Facebook (for Google Chrome)，在 Facebook 頁面要抓 screenshot 前先用右鍵選擇要處理，處理後效果這樣：
作者有把原始程式碼丟上 GitHub，在 sowbug/blur-facebook。