產生模糊縮圖的 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 就會動了...

用 OpenCV 與類神經網路放大圖片

在「Deep Learning based Super Resolution with OpenCV」這邊看到 OpenCV 支援這些類神經網路的演算法了,而且有預先訓練好的模型資料可以下載來用。

傳統放大的方法包括 bicubic 與 nearest neighbor,速度很快但是效果就普普通通,而 NN 類的方法的效果遠超過傳統方式,不過速度慢不少。

文章裡面有提到可以指定不同的 NN 模型:

The first parameter is the name of the model. You can choose between: “edsr”, “fsrcnn”, “lapsrn”, “espcn”. It is very important that this model is the correct one for the model you specified in ‘sr.readModel()’. See the Model section on the bottom of the page for the specifications of each model.

拿這些模型名字搜了一下資料,在「Super-resolution benchmarking」這邊可以看到比較,主要是在講 EDSR 很棒,然後 ESPCN 很快?


Automattic (WordPress.com 的公司) 買下 Tumblr

Verizon 一直在把 Yahoo! 手上比較有價值的資產賣掉,總算是輪到 Tumblr 了,這次是賣給了 Automattic,也就是 WordPress.com 營運的公司。

Verizon 已經發新聞稿了:「Verizon Media announces sale of Tumblr to Automattic」,Tumblr 的 staff blog 上也發表了:「Hello Tumblr ? Today, Tumblr’s owner, Verizon...」,但 Automattic 這邊還沒看到:「Features, news, and more: See what’s been going on in Automattic’s world.」。

金額不確定多少,但感覺應該算是好事?不知道之前的 porn content 會不會回流...

Twitter 對 2x 與 3x 的圖片的研究...

所以發現很多時候用 2x 的圖片就夠了?:「Capping image fidelity on ultra-high resolution devices」。


The most modern screens are OLED. These screens boast some really great features like pure blacks, and are marketed as 3x scale. However, nearly no "3x scale" OLED actually has perfect 3x3 pixels per dot on their screen.

因為螢幕不是真的到 3x 的要求,丟 2x 的圖片出去就好,省頻寬又省下載時間:

This means that most OLED screens that say they are 3x resolution, are actually 3x in the green color, but only 1.5x in the red and blue colors. Showing a 3x resolution image in the app vs a 2x resolution image will be visually the same, though the 3x image takes significantly more data. Even true 3x resolution screens are wasteful as the human eye cannot see that level of detail without something like a magnifying glass.

省下 38% 的資料量,32% 的時間:

There's no difference that the human eye can see, but will save 38% on data and 32% on latency on the capped image load for this particular example which is reflective of most images that load on Twitter.

這也另外帶出了其他的想法,如果沒有太多時間研究的話,可以考慮先提供 2x 的就好,不需要特地做 3x 的版本...

幫你的 iPhone 電話簿找到對應的頭像

前幾天看到的:「Announcing Vignette」,透過 social network 的資料,把本來電話簿裡面的 icon 更新:

透過 app store 的搜尋找不太到,我一開始用了「Vignette」搜不到,但用「Vignette Update」就可以。或者你可以透過他提供的連結直接開 app store:「Vignette – Update Contact Pics」。

這是一個 IAP 類的付費服務,搜尋是免費的,但如果要把資料更新回通訊錄,需要付 USD$4.99 (一次性),台灣帳號是付 TWD$170,應該是因為最近的稅務調整:

Vignette allows you to scan your contacts and see what it can find for free. If you wish to actually save these updates to your contact list, you must pay for a one-time in-app purchase. That purchase costs $4.99, is not a subscription, and is the only in-app purchase.

搜尋的範圍包括了 GravatarTwitterFacebookInstagram

Email is used for Gravatar
A custom network called Instagram

另外作者有提到這個 app 不傳資料到伺服器上,都是在自己的裝置上連到上面提到的 social network 尋找:

Privacy is paramount
All the processing is done on-device; this isn’t the sort of app where your contacts are uploaded en masse to some server, and out of your control.


把 Blog 上的 PNG 圖片換成 WebP 格式

WebP 格式的大小比起 JPEG 或是 PNG 都小不少,支援度也都還行,但 Safari 不支援是個大問題,因為在行動裝置裡面 iOS 還是大宗...

目前想到的方法是只對 Imgur 的圖片使用 WebP (.webp),當遇到不支援的 WebP 的平台時透過 JavaScript 改用 PNG (.png)。

這邊有判斷有沒有支援 WebP 的程式碼出自「Detect WEBP Support with JavaScript」,用 createImageBitmap() 建看看有沒有成功:

(() => {
  let supportsWebP = async () => {
    if (!self.createImageBitmap) return false;
    const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
    const blob = await fetch(webpData).then(r => r.blob());
    return createImageBitmap(blob).then(() => true, () => false);

  (async () => {
    if (!await supportsWebP()) {
      document.addEventListener('DOMContentLoaded', () => {
        for (let el of document.getElementsByTagName('img')) {
          let src = el.getAttribute('src');
          if (src.match(/\.webp/)) {
            el.setAttribute('src', src.replace(/\.webp/, '.png'));

這邊比較有趣的是網路上的文件 (MDNCanIuse) 都說 Safari 不支援 createImageBitmap(),但實際上好像沒問題 :o

然後再用 WordPress 的延伸套件「Search Regex」把所有文章理出現 /https:\/\/i\.imgur\.com/(\w+)\.png/ 的字串換成 https://i.imgur.com/$1.webp,接下來就可以拿 Safari 測試了,這樣有點 hack 但看起來還行...

Tumblr 對 Yahoo! 流量的影響

也是在 Twitter 上看到的,Yahoo! (Oath) 決定對 Tumblr 上的 NSFW 類圖片下手後對流量的影響:

這張圖應該是出自「Traffic Analysis for port 36:"(36) Yahoo (AS 10310)"」這邊的資料,可以看到頗明顯的下降... 不過九月那個掉下來的部份又是什麼啊 :o

Flickr 限縮免費帳號的容量

Flickr 在今年四月的時候放出消息被 SmugMug 收購後 (參考先前的文章「SmugMug 買下 Flickr」),過了半年總算是有新的動作了,跟 SmugMug 完全走使用者付費的想法類似,這次將免費帳號的容量大幅限縮,從本來的 1TB 空間變成 1000 張照片,在 2019/01/08 將會生效:「Why we’re changing Flickr free accounts」。

Beginning January 8, 2019, Free accounts will be limited to 1,000 photos and videos. If you need unlimited storage, you’ll need to upgrade to Flickr Pro.

現在點進去看 Flickr Pro 的費用是 USD$35/year。我在 2005 年以 USD$59.95/year 買過當時的 Flickr Pro... 特別有印象是因為剛好是宣佈被 Yahoo! 收購的前幾天買的訂閱,在被收購後 Flickr 宣佈降價,而先前買的人直接多一年。


We are currently offering an introductory Pro Account special -- Buy yourself (or a friend) an annual Pro Account for US$41.77 and save yourself around 30% from the anticipated annual price of $59.95. That's less than $3.50 a month!

不過現在好像也用不到這個平台了... 反正都公開的資料,也許資料拉一拉丟到其他地方吧,或是想看看要怎麼放。

SmugMug 買下 Flickr

SmugMug 買下 Flickr,這應該算是好消息 (吧):「Exclusive: Flickr bought by SmugMug, which vows to revitalize the photo service」。

雙方的新聞稿是:「SmugMug acquires Flickr: Two passionate communities together at last.」與「Together is where photographers belong!」。

時代的眼淚啊... 還在交大的時候買了 Pro,後來被併進 Y! 後沒續約了。丟著直到 Instagram 可以同步上去時又有更新,然後 Instagram 停止分享到 Flickr 的功能後又改找 IFTTT 同步。

而本來做 Flickr 的那群人後來跑去做 Slack... (包括 Stewart ButterfieldCal Henderson XD)

來看看後續會有什麼改變... 第一波應該是帳號系統的轉移?然後再來是 pricing model 的改變?