[POST] Dominant Colors for Lazy-Loading Images

[Rplus]

Dominant Colors for Lazy-Loading Images
by Manuel Wieser 2016-03-09
https://manu.ninja/dominant-colors-for-lazy-loading-images

主要在講 lazy-loading 的視覺回饋的處理

這是篇關於處理 lazy-loading 背景圖樣的文章
作者以多圖類型的網站為例
舉出常見的調整方式

• 圖片主色
• 低解析模糊圖

這邊他列了兩個後端的作法
一個是 nodejs 的 gm package
另一是 php 的 Imagick

他這邊不論是單色圖或是模糊圖
選用的方式都是轉成 data-uri 的處理方式
而文中其中一個重點就是怎麼把這個 base64 字串減到最少

背景主題色

但我其實比較喜歡用單色背景色的作法
如果是需要撐出寬高的佔位圖
可以選用 inline-svg 的 data-uri
這樣可以直接在字串上處理各式的寬高需求
又或者是直接用 background-image 處理也不錯 ( 有寬高就直接用 padding 處理是最方便了 )

拿取單色的 script 可比參考下列
( 感謝 po-ying 一起討論~ ❤️

// nodejs
console.log('ready~');

var gm = require('gm');

function rgbToHex (r, g, b) {
  return (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
}

gm('f.png')
.resize(50)
.colors(1)
.toBuffer('RGB', function (error, buffer) {
  var rgb = [].slice.call(buffer.slice(0, 3));
  var hexColorStr = rgbToHex.apply(null, rgb);
  console.log(`background-color: #${hexColorStr};`);
});

至於縮減 gif 大小的段落，
他則是介紹了哪些東西是選用的、可剔除的
而這篩除的方式，在製作模糊圖就是項蠻有幫助的技巧

縮圖極限也可以參考 facebook 去年分享的成果 (它只介紹沒寫作法 O_Q )
The technology behind preview photos
https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/
ref: https://www.facebook.com/rplus.tw/posts/966077636793353

低解析的模糊圖

通常這種作法，在處理上都會稍微再麻煩一點
首先要理解的是圖源都會是張很小的圖，
然後強制將它放大到與原圖大小一致，使得有一部份的顏色 & 輪廓，
比起只有背景主色，會更貼近原圖帶來的視覺效果、更有漸變的感覺

小圖的處理可以看這次文章裡的程式範例
基本上他已經有處理過，將 data-uri 上不必要的資訊濾除

但小圖放大後的鋸齒效果是各瀏覽器都不太一樣的
細節可以參考 image-rendering @ MDN
https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

而模糊效果實作上也有分蠻多種的
Medium 採用的是使用 canvas 來處理 blur effect
我個人是習慣用 svg filter 處理
也有部份人喜歡用 CSS filter: blur() 直接刷
或參考以前的分享文

Textured Gradients in pure css
by Oliver Küderle 2016-03-14
http://rentafounder.com/textured-gradients-in-pure-css/

ref: https://www.facebook.com/rplus.tw/posts/1078378772229905

---

tw: https://twitter.com/RplusTW/status/715189685845274624
fb: https://www.facebook.com/rplus.tw/posts/1090054521062330

[Rplus]

related:

• The “Blur Up” Technique for Loading Background Images
  by Emil Björklund 2015-12-07
  https://css-tricks.com/the-blur-up-technique-for-loading-background-images

  SVG filter in CSS

• How Medium does progressive image loading
  by José Manuel Pérez 2015-10-19
  https://jmperezperez.com/medium-image-progressive-loading-placeholder/

  這篇有介紹 filter 的使用

• Lazy-load your images with Coloor
  by Krasimir Tsonev 20160-04-04
  http://krasimirtsonev.com/blog/article/lazy-load-your-images-with-coloor

  他自己寫了 JS 來處理前後端的行為
  https://github.com/krasimir/coloor