用AVIF格式緩解網頁圖片流量過大的問題

將圖床轉換成純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頻寬變更難了。

如果本網站文章對您有幫助,歡迎贊助我。