網頁PNG JPG 選擇？檔案太大時該如壓縮？ - 造九頑五

2 PNG 最容易超過大小，且Photoshop 壓縮選項有限. 2.1 當圖片顏色單一時，PNG 大小會比JPG 來得小; 2.2 但要是圖片顏色複雜，像是照片就不要用PNG ... 從零開始的架設網站教學[起手式]主機架設WordPress網站—————-下面按網站目的選一個教學—————-[部落客]高顏值免費BLOG主題Ashe&Pro[官方網站]企業、個人官網byElementor[官方網站]企業、個人官網byDiviWordPressWordPress教學網站經營策略主機伺服器網站設計須知SEO創業路上創業筆記專業養成雜談讀書與電影Youtube教學頻道首頁>WordPress>嚴選外掛推薦>網頁PNGJPG選擇？檔案太大時該如壓縮？網頁PNGJPG選擇？檔案太大時該如壓縮？By黃裕二2021年01月19日星期二|嚴選外掛推薦好用軟體推薦網站由文字、圖片、影音所組成。

其中圖片通常會佔用最多的網站空間、流量，一個頁面圖片大小、多寡將會對網站讀取速度有直接的影響。

 內容索引1多少檔案大小的圖片適合用在網站上？2PNG最容易超過大小，且Photoshop壓縮選項有限2.1當圖片顏色單一時，PNG大小會比JPG來得小2.2但要是圖片顏色複雜，像是照片就不要用PNG2.3非不得已必須用PNG，檔案又很大的時候：壓縮它吧！2.4使用TinyPNG服務壓縮圖片吧！2.5為什麼不全部壓縮？有一好沒兩好，畫質明顯降低了2.6無須下載安裝：線上使用TinyPNG多少檔案大小的圖片適合用在網站上？以前Google廣告的素材要求在50KB以內，後來因為整體網路速度的提升，將限制提升到150KB，也就是你看到的每個廣告圖片，檔案大小都在150KB之內。

 以此為一個標準，我認為網站上，廣告大小尺寸的圖片、大小應該在150KB以內，最大不要超過200KB。

 而照片或網站的頂部常用的大Banner，因為本身尺寸就較大，色彩也較豐富，要不超過200KB太強人所難，但最好大小也能控制在400KB以內為佳！但有些照片真的太大無法限縮在400KB以內，非不得已時也請控制整頁最多只能有一到兩個超過的特例！ PNG最容易超過大小，且Photoshop壓縮選項有限什麼時候我們會用到PNG？圖片背景需要保持透明圖片色彩明顯單一、或單純由幾種純色組成時圖片品質要求較高、圖中文字希望最大程度不失真時以上幾點是網頁設計中，會放棄JPG而採用PNG的常見狀況，除了第一點是功能性的之外，另外兩點則是經驗的累積、和狀況的判斷來做決定。

當圖片顏色單一時，PNG大小會比JPG來得小PNG有個特性就是當圖片顏色單一、或單純幾個純色組成時⋯⋯不論圖片多大張，儲存的檔案大小都會很小！JPG則會因為圖像大小而增加檔案大小。

但要是圖片顏色複雜，像是照片就不要用PNG記得PNG只有在需要背景透明、或顏色單一時的狀況使用，其他時候一律使用JPG來儲存圖片！如果你用PNG來存相片，它的大小將會是讓你驚訝的大！非不得已必須用PNG，檔案又很大的時候：壓縮它吧！網頁做久一定會遇到，需要背景透明處理只能存成PNG，檔案大小卻超大！PNG又不像JPG一樣有品質的分數可以選，可以隨意壓縮成更小的檔案，這時我們只能依靠線上服務來幫我們壓縮。

使用TinyPNG服務壓縮圖片吧！這時就要拿出我們的壓箱寶，TinyPNG！雖然名稱是TinyPNG但還是不管是PNG、JPG都支援壓縮，我是只拿來壓縮PNG，因為Photoshop就可以自己調整JPG的壓縮品質了，PNG卻沒什麼壓縮選項，原因是因為PNG是採用不失真的壓縮方式，也因此品質較高！缺點是檔案較大。

 PhotoShop可以直接調整JPG存檔品質、預覽檔案大小為什麼不全部壓縮？有一好沒兩好，畫質明顯降低了如果這是無損的壓縮，我們應該把所有PNG都拿來壓縮過一遍，讓網頁整整瘦個一圈！但可惜不是，這是有損的壓縮，且畫質的損失有時候會「很明顯」，因此我不到不得已的地步，通常不會用TinyPNG來壓縮我的PNG圖檔。

無須下載安裝：線上使用TinyPNG點擊文章下方連結到網站，將需要壓縮的圖檔拉進去框框中即可完成壓縮，最後再將壓縮好的檔案下載回電腦上。

將電腦中的圖檔拖曳進去網頁中，就會立刻開始壓縮，就算分批一張一張放也可以！ 每張圖片可壓縮程度不同，有些已經壓縮過的JPG可再壓縮的幅度就不高，而PNG大多可以壓縮50%以上的容量，未高度壓縮過的JPG甚至可以壓縮高達80%以上，最後點擊download來將壓縮好的圖檔下載回電腦！ 最後附上TinyPNG的服務網址：圖片壓縮服務網站連結你可能也有興趣上一篇你該要懂的簡單設計：有了美感、世界開始有了質感下一篇青年創業貸款要付費上課？在家免費上課就好！沒有相關文章訂閱造九電子報造九的宗旨為：「在變幻萬千的資訊時代，提供最實用的知識！」留下電子信箱，訂閱知識與力量！訂閱訂閱成功！WP架站教學WordPress架站全攻略網站從無到有完整教學清單指南知無不言、言無不答！有用知識在這裏！知無不言、言無不答！有用知識在這裏！優惠訊息Divi年終75折特惠中！一次購買終生擁有＋無限網站使用！：傳送門WP近期特惠訊息