[POST] Dominant Colors for Lazy-Loading Images

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 一起討論~ :heart:

// 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 / rplus.github.io

[POST] Dominant Colors for Lazy-Loading Images #28

背景主題色

低解析的模糊圖