如何裁切或調整圖片檔案大小？
資源分享 》圖片尺寸太大無法上傳後台？如何裁切或調整圖片檔案大小？｜天矽網頁設計
當網站製作完成，都需上傳各種不同圖片，使網站呈現變得更豐富。從後台上傳圖片時，會有圖片尺寸及圖片檔案大小的上傳限制，若圖片尺寸或圖片檔案太大，會使圖片無法順利上傳，這時候，就需將圖片進行調整。
我們可使用Illustrator、Photoshop，就能將圖片調整至合宜尺寸，在先前文章，已介紹免費版的 Photopea如何調整圖片。本篇文章將與大家介紹，如何使用線上免費調整圖片、Illustrator這兩套工具，希望大家能輕鬆將圖片調整成，適合於網站後台上傳的尺寸。
➤為什麼無法將圖片上傳後台？
當我們需要替網站新增圖片時，需從網站後台上傳，天矽製作的網站，後台會顯示圖片上傳的建議尺寸；若上傳的圖片尺寸不符，或檔案太大，會使圖片無法順利上傳，造成網頁無法順利運作，如下圖所示。
▲後台圖片尺寸上傳建議
▲上傳的圖片尺寸過大，使網頁無法正常運作
常見圖片尺寸有長方形、正方形，以天矽網站後台為例，圖片建議上傳尺寸為600x400px，當圖片尺寸太大時，應如何調整？我們以iLoveIMG、Illustrator(以Adobe2024版本為例)這兩種工具做教學。
➤如何調整圖片尺寸？
iLoveIMG
(1)等比例調整 ：iLoveIMG是免費線上調整圖片工具，若對Illustrator不熟悉，可透過此網站快速調整圖片，下圖為iLoveIMG等比例調整圖片方式。
▲iLoveIMG圖片等比例調整
(2)尺寸縮小調整：在”調整尺寸的選項”，點擊「按像素」，設定需調整的圖片尺寸，最後，按下「調整多個圖片的大小」即可。
▲iLoveIMG圖片縮小調整
Illustrator
(1)等比例調整 ：將960*960px圖片，調整為500*500px，就是等比例調整，詳細步驟請參照以下範例圖。
▲等比例調整 : 步驟1 ~ 步驟2
▲等比例調整 : 步驟3 ~ 步驟5
▲等比例調整 : 步驟6-1
▲等比例調整 : 步驟6-2
▲被置入的圖片，尺寸太大 ( 960x960px )
▲等比例調整 : 步驟7
▲圖片調整完成 ( 調整為500x500px )
(2)尺寸縮小調整：如果原始圖片尺寸為1920 x 1280 px，圖片上傳限制只有1000 x 500px，這時需將圖片縮小，調整方式與(1)相同，但因不是等比例，圖片縮小時，會有部分區域被裁切到，在"如何裁切圖片"這個小節中，將會做說明。
➤如何裁切圖片？
iLoveIMG
iLoveIMG裁切圖片，詳細步驟請參照以下範例圖。
▲iLoveIMG裁切圖片方式
Illustrator
Illustrator裁切圖片方式，請參照以下步驟圖。
▲裁切圖片 : 步驟1
▲裁切圖片 : 步驟2
▲裁切圖片 : 步驟3 ~ 步驟4
▲裁切圖片 : 步驟5
➤如何壓縮圖片檔案大小？
當從後台上傳圖片時，即使尺寸已經符合規範，若檔案大小超過限制，也無法順利上傳，該如何調整圖片檔案大小呢？
iLoveIMG
在iLoveIMG網頁中，選擇「壓縮圖片文檔」，即可調整圖片檔案大小，詳細步驟請參照以下範例圖。
▲iLoveIMG壓縮圖片檔案大小方式
Illustrator
當用Illustrator調整好圖片尺寸，點擊->檔案->轉存->轉存為，會顯示下圖畫面，點選「轉存」後，畫面會顯示有RGB選擇的小視窗，在這邊，可以設定檔案大小，如果只是螢幕顯示，不需印刷，可以選擇「螢幕72ppi」，然後按下確定。
▲壓縮圖片 : 先點擊檔案->轉存->轉存為
▲壓縮圖片 : 選擇要儲存的照片範圍，按「轉存」
▲壓縮圖片 : 色彩模式選「RGB」、解析度「螢幕(72ppi)」
▲壓縮圖片 : 調整後的圖片檔案大小為248KB
➤圖片於網頁呈現的色彩模式
在網站中上傳的圖片，色彩模式為RGB「網頁用」即可；因CMYK為「印刷用」，若在網站中置入CMYK的圖片，由於色彩未經RGB轉換，圖片有可能無法顯示在網站。以下一起提供網頁用與印刷用，分別會使用哪些不同的格式檔。
| 名稱 | 網頁用 | 印刷用 |
| 解析度 |
螢幕(72ppi) |
高 (300ppi) |
| 色彩模式 | RGB |
CMYK |
| 檔案格式 |
JPG、GIF、PNG |
AI、PS、EPS、PDF |
