CDN 可以用來加速網站的存取速度, 是很重要的工具, 而對於需要加速的內容, 其實大多為影音素材或是圖片素材, 尤其圖片的使用量是相對多的.
圖文並茂的網站的確引人入勝, 但是如何能加速圖片等素材存取, 其實已有許多資料可以參考, 尤其像是著名的 cloudflare CDN服務, 不僅免費, 效能也非常好, 不過需要將 DNS 放在 cloudflare 上進行代管. 若不方便將 DNS 放到 cloudflare, 有什麼其他方式呢? 可以利用其他非 DNS 方式來取得內容的圖片CDN服務囉.
今天要介紹服務, 是類似之前介紹的 images.weserv.nl: https://diary.tw/archives/221 可以進行縮圖與快取外, 還有更多功能, 這個服務是 imgix: https://imgix.com/
除了提供 CDN 外, 還有大量的 API 可供應用, 更重要的也是有免費的版本, 免費版本與付費版本功能可以參考連結如下:
上網速度慢, 最常用工具就是測速, 而有哪些好用的測速工具呢?
SPEED TEST: https://www.speedtest.net/ 這是個老牌的測速工具, 也有 Android 與 iOS 的 APP.
(speedtest)
在查找 imgproxy 專案時, 找到的一個圖片快取、調整大小的一個服務:
在網站應用上, 這種使用情境是很常見的需求, 當然, 自己寫或是用已有的專案都能解決, 如前面提到的 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
相信很快就能上手.
今天在幫一個網站處理加上 SSL 時, 發現有個使用 jQuery 的效果消失了, 經檢查後, 發現其實是因為該網頁使用了 http://code.jquery.com/jquery-latest.min.js 的 jQuery library.
為了解決這個問題, 當然就是再加上 https 就可以了. 不過有沒有更好的方式呢? 答案是有的, 使用 // 雙斜線來處理.
//code.jquery.com/jquery-latest.min.js
這樣的語法, 是告訴瀏覽器, 使用”繼承”的 protocol, 也就是說, 主 url 上使用是 http, 這裡就用 http, 而原本是走 https , 這裡就用 https.
簡單來說, 一種方式就是 library 就都用 https 的方式, (當然原本的 library 網站要有支援 https, 目前絕大部分的 cdn library 都有), 否則使用這種 double forward slash 也是很不錯的方式, 解決開發環境只用 http, 而 production 環境使用 https 的狀況.