將圖床轉換成純AVIF後的好處是確實省了一筆流量。
ImageKit.io是唯一支援AVIF格式的圖床(image host)
原本想說很多圖片的網頁就都放AVIF格式降低你我的流量負擔,又能維持圖片品質
並且參照Google Lighthouse分數用lazyload等手段優化過載入速度
結果還是因為 這個NSFW網頁太多人看
不到半個月就快超過ImageKit免費分配的20GB頻寬
沒想到即使用AVIF圖片,太多人看也會害網站圖床流量過大。
ImageKit的後台顯示,這個月流量統計還真恐怖
促使我出手解決這件事情。
那就是把放在ImageKt的圖片換回Netlify,起碼Netlify給的免費頻寬有100GB。
主要會失去的是ImageKit提供的自動圖片轉檔功能。如果圖片純放avif的情況下,Google圖片搜尋應該是找不到這個網頁的。ImageKit會將圖片適時轉成WebP等通用格式以讓Google搜尋找到該網頁,也讓舊版瀏覽器能正常查看圖片。
但是我不care,現不支援AVIF的只有iOS 16以下裝置,因為我很少用蘋果裝置所以(ry
圖片放在ImageKit,會在網頁載入AVIF時轉成jpg,導致頁面流量高達23MB。
但這個網頁內一百多張avif圖片的實際容量不到10MB!
根據 Netlify的頻寬計算公式:
Bandwidth requirement = [(avg. daily pageviews x page size) + (avg. downloads per day x avg. file size)] x 30 x 1.5
假設極限狀況下每天100人看,並且全部轉到底載入所有圖片:
100 * 10MB * 30 * 1.5= 100GB
,這篇文章的頻寬月需求約為100GB
好啦大不了買Netlify的付費會員,但我不想額外為主機以外的空間付錢。
轉移圖片的方法就是將ImageKit圖片打包下載
將圖片檔統一放到Hugo網站的static目錄,自建放圖片的目錄。
再將文章的連結統一替換。用文字取代功能將https://imagekit.io/.../
的網址,全部替換成/images/....aivf
的相對路徑這樣。
在那之後,直接載入AVIF圖片,流量減低了許多,要超過Nelify給的100GB頻寬變更難了。