tiny-site圖片優(yōu)化管理系統(tǒng)
tiny-您的圖片實時優(yōu)化專家
現(xiàn)今的各類應(yīng)用中，圖片的使用越來越多，而且移動設(shè)備的各類高清屏，圖片質(zhì)量的要求也越來越高，在網(wǎng)站上圖片類的使用帶寬已基本達到60%，如果能減少圖片的帶寬占用，能更好的提升用戶體驗以及節(jié)約成本。
隨著接入終端的種類繁多，以往一張圖片所有終端使用的暴力做法已跟不上潮流，我更傾向于不同的終端選擇更適合的圖片（尺寸、質(zhì)量甚至于更優(yōu)的圖片格式），Tiny主要用于對圖片做壓縮或尺寸調(diào)整以及格式轉(zhuǎn)換，以及圖片區(qū)域剪輯，更簡單的方式適配更多的場景。下面是我日常是遇到比較多的場景：
圖片自適應(yīng)等比縮放
超長宣傳banner，高度固定從中間截取圖片展示
針對不同的終端使用不同的圖片格式、圖片質(zhì)量
以往為了適應(yīng)這些場景，基本都是生成了幾種尺寸的圖片，終端在使用時根據(jù)需要選擇，此種方式需要預(yù)生成圖片，也很難覆蓋所有終端。大部分場景都是圖片達不到要求或者使用了較大分辨率的圖片浪費帶寬。而我更希望的是：
在終端中實時根據(jù)顯示區(qū)域，自定義圖片的尺寸
根據(jù)當(dāng)前網(wǎng)絡(luò)接入類型，選擇不同的圖片質(zhì)量
根據(jù)各終端對圖片格式的支持，選擇更優(yōu)的圖片格式（如webp）
圖片的各參數(shù)可以隨意調(diào)整，實時生成，性能也不能太差
為了能更好適應(yīng)上述的場景，希望得到的就是一個能自定義高度、寬度、圖片質(zhì)量、圖片格式以及可以自定義剪輯圖片區(qū)域的工具，實時生成但不可性能太差的圖片服務(wù)。
tiny數(shù)據(jù)壓縮
tiny是使用golang編寫的數(shù)據(jù)壓縮與圖片轉(zhuǎn)換工具，提供HTTP與GRPC的調(diào)用方式。對于文本內(nèi)容，支持gzip與br兩種壓縮格式。對于圖片，支持png, jpeg(guetzli)以及webp三種格式轉(zhuǎn)換。一般不建議使用HTTP的服務(wù)，HTTP服務(wù)僅用于平時測試使用，GRPC的性能更好一些。
對于gzip與br兩種文本壓縮，我主要用于網(wǎng)站靜態(tài)文件的打包，對于靜態(tài)文件生成.js.gzip以及.js.br兩份文件，在nginx中根據(jù)Accept-Encoding來添加后綴指定使用相應(yīng)的壓縮格式。過程雖然有點繞，不過只要配置好構(gòu)建腳本，后續(xù)的所有工作也都不需要再做額度的工作，總體來說也不算太麻煩（也可以把nginx中的br的壓縮模塊編譯進去，直接使用）。
相對于文本壓縮，圖片的選擇就更多了，不同的格式，不同的尺寸，是否做區(qū)域剪輯，各類場景的組合，相比于文本的預(yù)生成，圖片大部分都是需要使用實時生成的形式。在這要先提一下guetzli這種圖片處理，它生成的jpeg文件更小但需要的時間很長，如果需要使用它建議還是做預(yù)處理的方式。
根據(jù)我自己的日常使用，在圖格式與質(zhì)量的選擇，按以下兩種情況：
有透明度的圖片（如圖標(biāo)），優(yōu)先使用webp(0)，再使用png(90)
廣告類等色彩鮮明的圖片，對于質(zhì)量要求不是太高的場景，可以優(yōu)先使用webp(70)
webp的質(zhì)量選擇0是表示Lossless，圖片質(zhì)量按實際需要自己調(diào)整則可。相關(guān)代碼在tiny，png的處理直接使用了pngquant，而guetzli則是guetzli。
tiny-site圖片管理后臺
tiny提供的圖片轉(zhuǎn)換服務(wù)只是針對開發(fā)者，完全是無法滿足現(xiàn)實中的需要，必須的搭配它的好伙伴tiny-site才是咖啡與伴侶，它主要提三個功能：
圖片上傳管理
用戶在上傳原圖之后，選擇分類（或自定義一個新類別），選擇上傳圖片類型。緩存時間為HTTP頭的Cache-Control: max-age，圖片都是可長期緩存的，建議配置一年，在配置完成之后，點擊保存則將圖片保存至數(shù)據(jù)庫，可在列表中查找自己上傳的圖片。
HTTP的圖片服務(wù)
在上傳圖片之后，可以在圖片列表中選擇所上傳的圖片，有三個功能可選擇：
圖片預(yù)覽，查看上傳的圖片
圖片剪輯，按一半寬度、一半高度居中截取圖片，生成圖片地址并復(fù)制至粘貼板
圖片預(yù)覽，按質(zhì)量選擇為90，生成圖片地址并復(fù)制至粘貼板
下面看看復(fù)制的兩組圖片地址：
/center/01CQPFKV5WYG8VD4QTVN5PYYJW-90-480-300.jpeg/v1/01CQPFKV5WYG8VD4QTVN5PYYJW-90-0-0.jpeg
其中center表示居中剪切，總共支持三種：center, lt, tc，其中l(wèi)t表示從左上角開始剪輯，tc表示中頂部中間開始剪輯。而后面文件名部分則由如下參數(shù)組合，文件ID-圖片質(zhì)量-圖片寬度-圖片高度.圖片類型，參數(shù)如下：
文件ID，是在上傳圖片時生成的唯一ID
圖片質(zhì)量，根據(jù)需要選擇合適的值，需要注意的是，對于webp，設(shè)置0為無損，一般用于圖標(biāo)
圖片寬度，根據(jù)需求選擇合適的寬度，0為原始寬度
圖片高度，根據(jù)需求選擇合適的高度，0為原始高度
圖片類型，根據(jù)終端支持的圖片格式選擇，可選為webp，png，jpeg
在我實際使用過程中，圖片質(zhì)量一般是根據(jù)終端的當(dāng)前網(wǎng)絡(luò)類型選擇，非wifi一般使用60，wifi環(huán)境下則是80-90。寬度與高度則根據(jù)顯示區(qū)域匹配，盡可能不做1px的拉伸縮小處理。圖片類型就根據(jù)終端支持的圖片格式選擇則好，建議優(yōu)先選擇webp。
基于Token認證的文件上傳
在實際使用中，有部分文件上傳是程序自動處理，如果這部分還需要登錄認證則比較麻煩，因此需要一個基于token校驗的內(nèi)部接口：
curl -XPOST -d '{
"token": "內(nèi)部token，不可泄露",
"category": "此文件的分類",
"fileType": "文件類型",
"maxAge": "文件max-age",
"data": "base64后的圖片數(shù)據(jù)"
}' 'http://tiny.aslant.site/api/files/v1/token'
結(jié)語
經(jīng)過調(diào)整后，CDN中圖片類的流量減少了20%左右，雖然CDN的文件存儲增長了10倍（因為不同分辨率，支持不同格式的終端不一），總體來說還是費用減少了好多，性能也有所提升。 我自建了一個測試環(huán)境，大家可以隨便試用，如果有疑問可以直接在github上提問，感恩不言謝~ 測試地址：http://tiny.aslant.site/#/