Kraken.io 網頁圖片優化工具

 

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

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

再舉個例子

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

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

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

1. 免費!!

2. 操作簡單

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

底下就來教大家如何操作

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

然後點擊紅框處 Try Free Web Interface

Karkenio1 (2)  

接著進入轉換的畫面

 Karkenio2 (2)  

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

 Karkenio3 (2)  

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

 Karkenio4 (2)  

Step 3:把圖片拉進來

 Karkenio8  

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

 Karkenio5

轉換完成

Karkenio6    

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

 Karkenio7  

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

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

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

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

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

 

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

 

網頁效能優化相關文章:

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

GTmetrix 效能分析  

arrow
arrow

    newaurora 發表在 痞客邦 留言(0) 人氣()