網站圖片要多少dpi
dpi是什麼?怎麼降低圖片dpi?網站圖片用多少dpi才不會載入過慢?|天矽網頁設計
目錄
➤ dpi是什麼
➤ 網站圖片該用多少dpi
➤ 如何降低圖片dpi
dpi是什麼
dpi (Dots per Inch)每英吋點數,它是印刷的專業術語,意思是說「在印刷品上,一英寸(Inch)裡面有多少個墨點」,而墨點愈密也就代表該印刷會愈清晰細緻。在圖片印刷上,為了獲得較高品質與效果的輸出成品,通常都會使用較高的dpi進行印刷,但是如果只是要上傳到網站、顯示到螢幕中,那麼使用較小的像素與 dpi 仍可以擁有良好的檢視效果。
有些網站管理者在後端管理系統上傳圖片時,都會忽略該圖片的 dpi 大小並進行上傳,等管理者回到前台查看後,才發現為什麼網站前台的圖片載入速度這麼慢?是不是網站出了什麼問題?
其實會發生這個狀況,通常都是管理者上傳了 300dpi 的圖片,而 300dpi 的檔案通常都很大,才會造成前台載入過慢的問題,一般用於網站上的圖片,只需要 72 dpi或 96dpi 就可以了。
※ 除了 DPI 不需要過高以外,色彩模式也應選擇為電腦顯示使用的 RGB 模式,而非印刷使用的 CMYK 哦!
如何查看圖片dpi
那麼網站管理者要如何知道自己的圖片 dpi 是多少?你只要…
【 在圖片上點選右鍵→ 點選「內容」→ 選擇「詳細資料」→ 下拉找到「影像」→ 找到dpi 】
網站圖片該用多少dpi
網站中加入的圖片,檔案與解析度通常不需要太大,只須設定為 72dpi 或 96dpi 就可以了,因為 dpi 愈高、圖片檔案大小就愈大、網站下載圖片與開啟速度就會愈慢!
網站管理者在後台上傳圖片後,回到前台查看發現圖片開啟與下載速度非常慢或者甚至無法顯示,通常經過我們了解後發現,大多都是上傳了 300dpi 這種過高解析度所導致;因此建議在圖片品質能夠兼顧的情況下,圖片的檔案大小與 dpi最好是愈小愈好,以避免使用者開啟網站的等待時間過長(圖片下載速度過慢),最終跳離網站喔!
※ 為圖片命名時,檔案名稱也請使用小寫英文+數字、不可大寫、不可其他語言、不可過長、不可空白字元與特殊符號
※ 圖片副檔名以 jpg、gif 與 png 檔為主
延伸閱讀:【網站管理者必知】編輯器圖片上傳規則,請勿使用中文命名圖檔
如何降低圖片dpi
要如何降低圖片dpi?
目錄
➤Photoshop降低dpi
➤免費網頁版Ps:Photopea降低dpi
➤如果不會使用Photoshop修改圖片dpi怎麼辦?
Photoshop降低dpi
降低圖片 dpi 的方式就是使用 Adobe 的 Photoshop 處理,步驟如下:
【 將圖片在Ps中開啟→ 選擇「影像」→ 選擇「影像尺寸」→ 在文件尺寸中修改「解析度(像素/英寸)」→ 將其修改為72dpi→ 轉存圖片即可 】
▲Photoshop修改dpi解析度
免費網頁版Ps:Photopea降低dpi
如果沒有Photoshop這個軟體可以使用,那麼我們也可以使用免費網頁版的Ps:Photopea來降低dpi,步驟如下:
【 將圖片在Photopea中開啟→ 選擇「Image」→ 選擇「Image Size…」→ 在Image Size中修改「DPI(Pixels/Inch)」→ 將其修改為72dpi→ 轉存圖片即可 】
▲Photopea修改dpi解析度
▲修改後dpi解析度的改變
▲修改前後,你能分辨出哪個是高dpi的圖片嗎?
如果不會使用Photoshop修改圖片dpi怎麼辦?
如果不會使用 Photoshop 修改圖片,但是檔案又很大、沒辦法上傳或是前台開起速度過慢,怎麼辦?
那麼我們就會建議客人直接用「圖片壓縮」的方式來降低圖片檔案大小,不過圖片壓縮的方式只能降低圖片的檔案大小,無法降低dpi解析度,因此這類方式比較屬於替代方案,我們還是會建議直接從源頭修改比較好!但如果真的沒辦法、那使用替代方式來壓縮圖片也可以。
※ 小畫家沒有辦法修改 DPI
以下為免費壓縮圖片大小的幾個網站,提供給各位參考:
延伸閱讀:【電腦裝置解析度建議】RWD響應式設計與螢幕解析度的密切關係
參考資料:Shutterstock|圖片大小調整訣竅 | 從英寸轉換成像素:如何調整大小而不犧牲圖像品質