Tag: thumbnail

用 DALL·E 2 的圖當作網誌文章的圖片

在 Hacker News 上看到「I replaced all our blog thumbnails using DALL·E 2 (deephaven.io)」這個點子，原文在「I replaced all our blog thumbnails using DALL·E 2 for $45: here’s what I learned」這邊。

網誌文章如果包含好的圖片時，曝光度與互動都會比較多。所以作者就想到用 OpenAI 的 DALL·E 2 來搞事了：給個描述，請 DALL·E 2 生成圖片。

文章裡面有很多產生出來的圖都蠻有趣的，像是「a cute blue colored gopher with blue fur programming on multiple monitors displaying many spreadsheets, digital art」這個描述生出來的圖：

不過不算便宜，他花了 US$45 生成大約一百篇文章的圖：

I spent the weekend and $45 in OpenAi credits generating new thumbnails that better represent the content of all 100+ posts from our blog.

如果用先前「玩玩文字轉圖片的 min(DALL·E)」這邊提到的方法自己搞不知道可不可行？

產生模糊縮圖的 BlurHash

先從一張圖片算出大約 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 就會動了...