Description
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