TinyPNG 線上網頁圖片壓縮 – 照片壓縮不失真 – png壓縮工具

內容目錄

Toggle

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – Tinypng 線上網頁圖片壓縮 – 照片壓縮不失真 – png壓縮 工具，在寫部落格或建置網站時常常都會使用大量的圖片，來豐富網站內容，但是對於圖片檔案大小的處理，卻是很多人都會遺忘的一部分。網站中圖檔大小所影響到的就是網站載入速度，如果說圖檔太大，就會讓網站主機需要花費更多的時間與運算資源來使讀取圖片，而如果圖檔太小，卻又容易讓圖片內容失真，給予使用者不好的網站體驗。
因此在這一篇教學中就是要介紹可以線上針對 png 、 jpg 這兩種最常見的圖片檔名做檔案壓縮的網站工具—TinyPNG，可以在TinyPNG網站中直接上傳圖片為圖片檔案做壓縮，而且不會導致圖片有模糊及失真的狀態，操作方式非常簡單，如果說想要在 WordPress 建置的網站直接對圖片壓縮，可以參考這一篇文章：WordPress 圖片縮小外掛，批次圖檔壓縮 – 網頁加速必學技能。那麼接下來跟著鵠學院的腳步，讓我們開始學習吧！
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統做步驟示範！)

WordPress 圖片縮小外掛，批次圖檔壓縮 – 網頁加速必學技能
https://www.design-hu.com.tw/wordpress/wordpress-plugin/compress-jpeg-png.html

TinyPNG線上圖片壓縮網址
https://tinyjpg.com/
TinyPNG電腦端圖片壓縮(MAC)下載網址
https://github.com/kyleduo/TinyPNG4Mac
Google PageSpeed Insights 網站測試速度
https://developers.google.com/speed/pagespeed/insights/

如何在TinyPNG網站中對 png 、 jpg進行圖片壓縮

第一步：透過上方網址進入到TinyPNG網站中，可以看到如下圖中紅色方框標示處，直接將想要壓縮的圖片使用拖曳的方式放入到虛線方框的位置，或者點擊中間下載圖示也可以從電腦中選取檔案目錄中的圖片來做壓縮。

第二步：放入圖片後就會開始縮小圖檔，在完成壓縮後進度條會轉為綠色並顯示 finish 的文字，點選圖三中右邊 download 的按鈕就可以下載單一圖檔。

第三步：下載來的檔案名稱會是 tinified.zip ，如圖一所示。可以看到本步驟的圖二，筆者示範的圖片在壓縮檔案大小前後的比較，完全看不出差別，但實際上圖檔的大小(不是解析度)已經縮小了許多，各位同學也可以自行試驗。

第四步：TinyPNG也可以批次對圖片進行檔案壓縮，但最高上限是一次 20 張，且圖片檔案大小不能超過 5MB ，下圖中就是筆者示範批次壓縮圖片的流程，在圖三中如果超過 20 張圖片多餘的就會顯示為紅色警示無法壓縮。

第五步：TinyPNG也有適用於 Photoshop 的外掛，根據官方介紹這個外掛是可以在使用 Photoshop 編輯完圖片後，存檔時可以為圖片壓縮檔案大小，對於網站視覺設計人員來說相當方便，其版本目前支持 MAC 以及 Windows 兩種作業系統，但必須要付費購買，如果說各位同學有需求可以自行參酌官方介紹文件。

在MAC上使用 TinyPNG4Mac-master 壓縮圖片教學

第一步：如果說有大量的圖片需要縮小檔案，而透過TinyPNG網站壓縮圖檔有 20 張限制覺得非常麻煩，鵠學苑也提供另外一個在本機電腦中壓縮圖片的解決方法( MAC 專屬)，首先進入到https://github.com/kyleduo/TinyPNG4Mac 這個網站，如下圖所示點選右方綠色按鈕 Clone or download，在下拉選單中點選 Download ZIP ，就可以下載 TinyPNG4Mac-master 這個軟體。

第二步：將下載的檔案移入應用程式目錄中，如果說無法執行請到 MAC 的安全性設定中將 TinyPNG4Mac-master 設定為信任的來源，就可以看到如下圖的畫面，會要求輸入TinyPNG帳號的 API Key 。

第三步：回到 TinyPNG 的網站，在上方選單列中點選 DEVELOPER API ，分別輸入使用者明及電子信箱，再點選 Get your API Key，就會在註冊的電子信箱中找到到驗證信件以及連結，如圖二所示。

第四步：點擊驗證連結後會開啟下圖中的網頁，找到 WordPress & API的頁籤就可以找屬於你帳號的API Key，將其複製貼上到剛剛 TinyPNG4Mac-master 開啟畫面中 API Key 的欄位，就完成註冊程序了。

第五步：可以看到下圖中的畫面，一樣使用拖曳圖片的方式就可以開始壓縮圖片。跑完壓縮過程後會自動在電腦桌面上建立 tinypng_output 的資料夾，裡面就是已經讓完成圖片壓縮的檔案，可以直接使用了。

結語：

最後跟大家說明圖片壓縮實際的應用，如果說已經有一個網站，而網站載入速度隨者內容的增加越來越慢，不妨參考這一篇教學文章對網站做速度測試：Google Page Speed Insight 網站速度測試，在測試結果中如果有圖片建議壓縮的問題，就可以使用今天的教學方法對圖片進行壓縮後，重新上傳到網站中，相信能夠對改善網站速度會有所提升。今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來鵠學院就對了！我們下次的教學見～