問題

觀察許多電子商務網站時，常發現許多圖片大小不一，甚至在上圖時，可能使用者忘了壓縮，而上傳到一張非常大的圖，用戶在較差的網路環境下，為了等待圖片，影響了網頁的載入速度及使用體驗。

圖檔過大解決方案

解決大圖檔一共有幾個解法，像

• 後台上傳前檢查
• 雲端空間圖床api(阿里雲)
• cloudflare image resize api
• webpack 打包時壓縮圖片等
• 手動壓縮圖檔

何謂 Imageflow

今天就來介紹 Imageflow 是我覺得 dotnet 很棒的開源圖片處理專案，擁有像阿里雲的圖片調整api，透過 query string 可以輕易使我達成圖片格式轉換、剪裁及壓縮等功能，且可以由前端決定傳入圖片參數到後端轉換，在由我的後端上傳到我的 Image storage， 或是在圖片取回來時，可以輕易透過 query string ，自動處理成我想要圖片格式及尺寸。

開源專案
連結
query command 指令
連結

使用方式

先將專案跑起來，調整圖片的 query command，就能調整圖片的大小。

<img src="http://localhost:39876/demo_images/u3.jpg?w=300" />

<img src="" srcset="    http://localhost:39876/demo_images/u3.jpg?w=300 300w
                        http://localhost:39876/demo_images/u3.jpg?w=800 800w
                        http://localhost:39876/demo_images/u3.jpg?w=1600 1600w" />

延伸應用

響應式縮圖

1.使用者上圖片到 amazon s3 的 storeage
2.用戶端訪問你的網站
3.瀏覽器依據 img 的 srcset 屬性，去載入適當解析度的圖片

如果你在 Imageflow 網站掛上 cloudflare，就能夠將你的動態查詢圖片做快取。