網站圖片要多少dpi

dpi是什麼?怎麼降低圖片dpi?網站圖片用多少dpi才不會載入過慢?|天矽網頁設計

dpi是什麼?怎麼降低圖片dpi?網站圖片用多少dpi才不會載入過慢?|天矽網頁設計

 

dpi是「在印刷品上,一英寸(Inch)裡面有多少個墨點」,網站圖片一般使用72dpi或96dpi就可以了,通常圖片在網站前台開啟或載入速度過慢,都是因為圖片的dpi過高,很多管理者會將要印刷的300dpi圖片直接上傳,進而導致載入速度過慢的情況發生,因此將圖片上傳到網站前,請使用Ps將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

 

網站圖片該用多少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轉存圖片即可

用PS改DPI

▲Photoshop修改dpi解析度

 

免費網頁版Ps:Photopea降低dpi

 如果沒有Photoshop這個軟體可以使用,那麼我們也可以使用免費網頁版的Ps:Photopea來降低dpi,步驟如下:

將圖片在Photopea中開啟→ 選擇「Image」→ 選擇「Image Size…」→ 在Image Size中修改「DPI(Pixels/Inch)」→ 將其修改為72dpi→ 轉存圖片即可

Photopea修改dpi解析度

▲Photopea修改dpi解析度

 

修改後dpi解析度的改變

▲修改後dpi解析度的改變

 

你能分辨出哪個是高dpi的圖片嗎?

▲修改前後,你能分辨出哪個是高dpi的圖片嗎?

 

如果不會使用Photoshop修改圖片dpi怎麼辦?

 如果不會使用 Photoshop 修改圖片,但是檔案又很大、沒辦法上傳或是前台開起速度過慢,怎麼辦?

 那麼我們就會建議客人直接用「圖片壓縮」的方式來降低圖片檔案大小,不過圖片壓縮的方式只能降低圖片的檔案大小,無法降低dpi解析度,因此這類方式比較屬於替代方案,我們還是會建議直接從源頭修改比較好!但如果真的沒辦法、那使用替代方式來壓縮圖片也可以。

※ 小畫家沒有辦法修改 DPI

以下為免費壓縮圖片大小的幾個網站,提供給各位參考:

延伸閱讀:【電腦裝置解析度建議】RWD響應式設計與螢幕解析度的密切關係

參考資料:Shutterstock|圖片大小調整訣竅 | 從英寸轉換成像素:如何調整大小而不犧牲圖像品質

 

share FB LINE
看天矽作品集 回上一頁
ID:@323foylw