快轉到主要內容

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

資訊科技 Hugo網站架設 Netlify AOMedia Video 1
🗓️ 民國112年 癸卯年
✍ 切換正體/簡體字

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

相關文章

如何給Hugo + Netlify的網站加上Gitalk留言板
資訊科技 Hugo網站架設 Github Netlify
為何應該用Markdown寫網誌文章?
資訊科技 Hugo網站架設 Hugo
在Hugo生成的靜態網頁內嵌入PDF
資訊科技 Hugo網站架設 Hugo

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。