圖片尺寸修改
網站圖片尺寸限制？圖片尺寸怎麼修改？｜天矽科技客製化網頁設計
網站圖片尺寸限制
在一個優秀的網站中，除了豐富的資訊以外，還會加入大量的圖片來讓網站畫面更加充裕，使網站能更好的傳達想表達的意涵與企業理念，若為購物或產品服務類型的網站，還會再加入產品示意圖，讓使用者更好的了解該產品的真實樣貌。
若網站有提供 CMS 網站後台管理系統，讓網站管理者可以自行上架、編輯、修改或刪除資料，那麼網站的 Banner、產品圖或各種需要經常被修改的圖片通常都可以自行調整。為了保持網站的整體美觀性與一致性，後台管理系統若有開放給管理者調整圖片，網頁設計公司通常會提供規定與建議的上架尺寸，希望管理者能夠遵循上架，以避免圖片在畫面中出現過大或過小的情況。
▲後台圖片建議尺寸提示
圖片尺寸怎麼修改？
網站在上架圖片之前，無論是 Banner、產品圖還是任何需在前台顯示的圖片，我們天矽科技網頁設計公司都會在後台上傳圖片處備註建議尺寸，以避免前台出現跑版或圖片大小不符合版面的問題，那麼要怎麼確認、怎麼修改圖片的尺寸呢？
一般管理者都會使用 Adobe 的 Ai 或 Ps 修改尺寸，會使用這兩項軟體的管理者通常都會自行調整，因此這裡就不再教學 Ai 與 Ps 的修改尺寸方式，這裡就使用微軟電腦的內建附屬應用程式「小畫家」與「網頁免費版的 Photopea」 來裁切圖片！
目錄：
➤使用小畫家調整圖片尺寸 ➤使用Photopea調整圖片尺寸
※ 建議的尺寸單位都會以像素(px)為主
※ DPI 設定為 72dpi 即可
※ 色彩模式，CMYK 為印刷色，為提供電腦顯示請使用 RGB
DPI調整設定教學請參考：dpi是什麼？網站圖片該用多少dpi才不會載入過慢？
使用小畫家調整圖片尺寸
小畫家是各個微軟電腦都會有的應用程式，因此對於不會使用影像處理軟體的管理者來說，使用小畫家來裁切尺寸是最方便的。(以下為Windows10版本小畫家)
➤ Step1：開啟小畫家
點選微軟的「開始」程式集→ 選擇「附屬應用程式」→ 開啟「小畫家」
➤ Step2：開啟舊檔
點選右上角的「檔案」→ 開啟舊檔→ 選擇要修改的圖片開啟
※ 或者也可以直接將圖片拖曳進小畫家，同樣可以開啟檔案
➤ Step3：調整大小
選擇「常用」→ 調整大小→ 選擇像素→ 勾選「維持外觀比例」→ 為了維持圖片的美觀與比例，這裡先修改水平或垂直其中一個尺寸即可
➤ Step4：裁切
- 第一種方式：
使用拖拉邊角的方式調整尺寸裁切，拖拉的調整中的尺寸可參考下方像素尺寸。
- 第二種方式：
選擇常用中的「選取」→ 矩形選取→ 拖拉區域(這裡也可參考下方調整中的尺寸)→ 按下裁切
▲第一種方式
▲第二種方式
➤ Step5：另存新檔
完成後就可以選擇檔案→ 另存新檔→ 選擇 JPG 或 PNG 格式儲存
※ 若圖片大於 72dpi 或 96dpi，那麼會建議將圖片的dpi降低再上傳到網站會比較好。
※ 由於小畫家無法修改 dpi 解析度，若圖片dpi較高，會建議採取下個(Photopea)的做法，或者可查看此篇教學：dpi是什麼？網站圖片該用多少dpi才不會載入過慢？
使用Photopea調整圖片尺寸
如果你的電腦沒有小畫家怎麼辦？這時你可以使用網頁版的Ps來調整圖片尺寸！
➤ Step1：開啟舊檔
選擇 File→ Open…→ 選擇檔案開啟
※ 或者也可以直接將圖片拖曳進網站中，同樣可以開啟檔案
➤ Step2：調整圖片尺寸
選擇 Image→ Image Size…→ Image Size中，為了維持圖片的美觀與比例，這裡調整 Width(寬) 或 Height(高) 其中一個尺寸即可
※ 記得單位要選擇 Pixels
※ DPI 若不是 72 或 96dpi (有可能是300dpi)，那麼也請在這裡修改 DPI 為 72 即可，單位一樣要選擇 Pixels/Inch
➤ Step3：選擇裁切
調整完圖片尺寸後，由於比例是按照原本圖片的比例進行縮放，因此這裡還要再進行裁切的動作。
- 選擇右側的裁切圖示
- 下拉選擇 Original Ratio (預設為 Free 會無法修改，選擇此選項後才可修改，修改後此選項會變動，可以不用管他)
- 修改 W(寬) 和 H(高)
- 右邊打勾即可完成
➤ Step4：另存新檔
完成後選擇 File→ Export as→ 選擇 PNG 或 JPG→ Save完成儲存
➤ 色彩模式如何調整？
選擇 Image→ 選擇 Modw→ 出現 RGB 與 CMYK→ 請勾選 RGB色彩模式
