好用的縮圖與快取服務(images.weserv.nl)

在查找 imgproxy 專案時, 找到的一個圖片快取、調整大小的一個服務:

https://images.weserv.nl/

在網站應用上, 這種使用情境是很常見的需求, 當然, 自己寫或是用已有的專案都能解決, 如前面提到的 imgproxy 專案:

https://github.com/DarthSim/imgproxy
https://github.com/willnorris/imageproxy

不過像是 weserv 這樣的, 可以直接使用的服務就更方便了. 接下來來測試一下效果. 以這張圖為例:

https://www.flickr.com/photos/okilyt/35120121534/sizes/l

在 flickr 上會生成許多尺寸, 如下(連原始圖共12種類):

Original (4512 x 3008)
Large 2048 (2048 x 1365)
Large 1600 (1600 x 1067)
Large 1024 (1024 x 683)
Medium 800 (800 x 534)
Medium 640 (640 x 427)
Medium 500 (500 x 333)
Small 320 (320 x 213)
Small 240 (240 x 160)
Thumbnail (100 x 67)
Square 150 (150 x 150)
Square 75 (75 x 75)

利用 image.weserv.nl 來進行對應操作, 會使用到的參數就是 url, w, h, t (基本的參數), 先來介紹一下簡單用法, url 為必要參數, 因為是快取圖片來源的基礎, 不需要給 protocol, 從 host 開始即可, 如

http://sample.diary.tw/imgs/001.jpg 只需要給 sample.diary.tw/imgs/001.jpg (需要 url encode)

接下來是 w 寬度參數, 預設會成比例縮小, 若是 w, h 同時給, 則以較小的為約束邊, 進行縮小, 若是再給定 t=square 則用來限制縮小的圖為方形縮圖, 要了解更多就參考網站上的說明:

https://images.weserv.nl/#quick-reference

相信很快就能上手.

再來對應上面 flickr size 分別產出結果如下(都使用原始圖來生成):

https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=2048
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=1600
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=1024
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=800
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=640
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=500
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=320
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=240
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=100
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=150&h=150&t=square
https://images.weserv.nl/?url=c1.staticflickr.com/5/4314/35120121534_ca9200089c_o.jpg&w=75&h=75&t=square

其中就 w=800 這個有一點比例問題, 在 flickr 為 800×534, 不過在 weserv 則為 800×533, (原始尺寸為 4512×3008, 依比例上算, 是 flickr 問題, 應為 800×533 才對)

接下來要比較就是品質的差異, 參考 codepen 上的結果:

https://codepen.io/timhuang/full/dVJPQx/

的確 flickr 比較好, weserv 的畫質偏軟, 少了一些細節, 即使使用了 q=100 的參數(預設為 85)也是改善不了太多.

另外對於快取的結構, 簡單測試如下:

1. 原始圖若已被快取, 則將原始圖刪除後, 該 weserv 的網址仍能服務(時間長度不明).
2. 原始圖若已被快取, 則將原始圖刪除後, 則使用不同尺寸的 weserv 網址(如w=300)仍不能服務(404), 得知它仍回原始圖來取內容操作縮圖.
3. 續2. 若將原圖放回去, 使用 w=300 仍回覆404, 但若改用 w=200 則可正常服務, 得知應為走 url 為基礎的物件快取方式.

結論是 weserv 是個好用方便的快取縮圖線上服務.

其他類似服務:
https://rsz.io/