史丹利愛碎念

Kraken.io 網頁圖片優化工具

這一次要跟大家介紹的是一款非常好用的圖片優化工具，首先來談談為什麼要優化圖片?!

當設計師把所有網頁上用到的圖片做好輸出之後，這時輸出品質一定會是最好的版本，可是放在網頁上的圖片其實品質不一定要這麼好；這時候圖片需要進行優化，把檔案品質稍微往下調，但是檔案就可以變小，使用者打開網頁的速度就會變快

再舉個例子

如果大家有在使用 GTmetrix 工具的話，相信有時候你們的網頁中，一定會出現這樣的狀況(如下圖)

這時候只得靠 GTmetrix 逐一儲存下來，這樣既費工又沒有效率，要反覆的更換圖片，今天介紹的工具是，在網頁圖片製作完成之後，你就可以第一時間先把所有東西放上優化，這樣就可以加速我們的工作

那今天介紹這工具是 Kraken.io ，這工具的優點在於：

1. 免費!!

2. 操作簡單

3. 圖片優化 (碎碎唸：廢話!!不然我用他幹嘛!!)

底下就來教大家如何操作

首先進到 Kraken.io 的首頁https://kraken.io/

然後點擊紅框處 Try Free Web Interface

接著進入轉換的畫面

Step 1：選擇你要上傳的圖片來源；一般而言我會選擇左邊的方式，只要用拖曳的方式拖到下方格子就可以了 (碎碎唸：明明就是懶!!)

Step 2：選擇你要優化的模式 (建議選擇 LOSSLESS)

Step 3：把圖片拉進來

Step 4：拉進來後圖片就會自動轉換，轉換後就可以點擊下載就完成了

轉換完成

最後我們來看一下轉換前後的效果吧

各位看倌，檔案變小了吧!!

檔案一旦變小會讓瀏覽器的下載速度增加，因此這個工具頗為實用

另外，史丹利也曾經把已經優化過的網頁圖片，再使用 GTmetrix 測試，會發現其實圖片在 GTmetrix 底下還是可以繼續優化的

所以這邊還是提醒大家，工具所列的數值是參考用的

使用者的感受才是最直接的 !!

如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦～

網頁效能優化相關文章：

網站開發工具清單 (持續更新中...) 

GTmetrix 效能分析