圖片尺寸技巧| 網頁設計小錦囊，調整圖片不失真 - Shutterstock

JPEG – 適用於照片、螢幕截圖和大部分其他圖片。

JPEG 圖片使用破壞性壓縮（lossy compression），這種壓縮方式會犧牲圖片資料以縮小檔案大小。

您可以透過 ... Home›訣竅與教學›圖片尺寸技巧|網頁設計小錦囊，調整圖片不失真 Sharethis:TwitterFacebook 將圖片調整到最適合的狀態，可讓您的網站跑得更順，使用起來更輕鬆。

深入了解如何調整網頁圖片以及探索操作所需工具。

圖片對於網站至關重要，不可或缺。

圖片不僅可以拉近使用者，更能讓網站、部落格貼文、橫幅廣告或電子郵件看起來十分專業。

然而，同樣的圖片也可能造成網站不穩。

像是花太多時間載入，這會帶給使用者不好的經驗，也會影響網站在搜尋引擎上的排名。

若要改善，您需要了解如何調整網頁圖片。

檔案大小主要組成條件 大檔案拉長載入時間，小檔案品質卻不夠好。

圖片來源：ussr。

為什麼圖檔會影響載入時間？主要原因就是檔案大小，檔案越大，網站處理的時間就越長。

以下為影響整個圖檔大小的三種因素： 像素尺寸—圖片長寬大小，在於像素多寡所組成。

尺寸越大，圖片水準就越高，但檔案也會相對變大。

舉例來說，2000X1500高像素的圖片，呈現起來會更完美，但也會佔去不少空間。

檔案類型—不同類型的檔案會佔用更多空間，取決於使用方式、內含的資訊量以及圖片本身呈現方式（點陣圖或向量圖）。

若想了解如何為網站選用最適合的圖片格式，例如：JPEG、PNG、SVG或GIF，請參閱我們的推薦文章。

圖片品質—若要保留圖片原始畫質，檔案想必不小。

透過壓縮圖片則可藉由降低畫質或移除圖片中的隱藏元素，進而限制檔案大小。

請參閱我們的圖片解析度貼文，以深入了解影響圖片呈現的關鍵。

同樣地，調整這些要素才能讓您的網頁速度保持一定水準。

什麼是網頁速度？ 我們藉由網站載入時間，或是瀏覽器完整呈現網頁的時間，來測量網頁速度。

瀏覽網頁時，瀏覽器會以位元組（Byte）為單位下載資訊（例如：千位元組、百萬位元組）。

網站上的所有元素，無論是圖片和文字、動畫和導覽選單，都以位元組來衡量，佔有一定的空間。

因此，網頁佔用越多位元組，就會花更多時間載入。

如何改善網頁速度 重新調整圖片大小即可改善網頁速度。

圖片來源：jossnat。

改善網頁速度最簡單又快速的方法就是降低圖片檔案大小，這道程序稱為圖片壓縮。

人人均可使用我們的線上照片編輯器來縮小圖片，不需具備設計或程式基礎。

圖片壓縮的過程可減少檔案大小，釋放更多空間。

也有人稱這個過程為「調整圖片大小」或「圖片最佳化」。

為有效提升網頁速度，調整圖片大小可說是重要關鍵。

圖片是網站上最佔空間的元素，因圖片佔去許多位元空間，造成瀏覽器下載時間更長。

若重新調整網頁圖片大小，即可減少圖片的位元組，載入就會更快。

若想更深入調整網頁速度機制，可試著減少重新導向功能、使用網頁字型以及減少不必要的語法，例如：留言功能或過多的空間。

但這些效果都沒有圖片壓縮來的顯著。

為什麼網頁速度對搜尋引擎如此重要？ 網頁速度之所這麼重要，有兩個主要原因： 更快的網頁速度=更好的使用者體驗 每個人都有過等待網頁載入等到天荒地老的經驗。

這不僅會令人發怒，還會導致網站還沒載入完成，使用者就離開了。

如果網頁沒有在三秒鐘內開啟，53%的手機使用者會馬上關閉離開。

相對地，網站快速載入可讓使用者輕鬆瀏覽內容。

使用者感受越好，停留在網站並瀏覽內容的時間就越多，甚至下訂購買商品。

更快的速度=更前面的Google排名 Google搜尋引擎在排名網頁時，是以網頁速度為演算法依據。

如果想要出現在搜尋結果最前面（誰不想呢？），趕快檢測您的網頁速度。

如何調整網頁圖片大小 1.挑選適當的檔案格式 開始調整網頁圖片大小之前，先確認圖片檔案格式是否恰當。

以下為三種普遍接受的網頁檔案格式。

為網頁選擇正確的檔案類型對於平衡大小和畫質大有幫助。

圖片來源：RazvanIonutDragomirescu。

JPEG–適用於照片、螢幕截圖和大部分其他圖片。

JPEG圖片使用破壞性壓縮（lossycompression），這種壓縮方式會犧牲圖片資料以縮小檔案大小。

您可以透過調整圖片畫質設定達到與檔案大小相比的最佳品質。

PNG–適用於輪廓鮮明的幾何圖形，PNG圖片比JPEG圖片呈現弧度及線條的效果更好。

PNG圖片使用非破壞性壓縮方式，會保留所有圖片資料，因此檔案大小也比其他格式還要大得多。

GIF–適用於製作動畫。

但請避免製作靜態圖片，因為圖片所呈現出來的顏色將會受限。

請參閱我們的深入指南以了解挑選正確檔案格式的更多資訊。

您也可以試試看我們的免費圖片大小調整工具，此工具可在您忙得不可開支時，快速幫助您調整圖片和照片大小。

2.減少像素 調整圖片大小以達到剛好或大一點的顯示尺寸。

圖片來源：Olinda。

圖片中每個像素都由相當數量的位元組編碼而成，像素越小，圖片大小也越小。

但這不代表要將所有圖片都縮小到100x100像素，若這樣做，圖片一上傳到網站便會撐大並且明顯失真。

不過您可以依照網站的顯示大小要求來調整圖片。

上傳圖片到網站上前，先確認需要顯示的大小為何，然後再調整圖片到與顯示大小一樣或再大一點點。

調整大小不僅可以去除不必要的像素，更能明顯減少檔案大小。

深入了解常見的網站圖片大小。

3.降低畫質設定 使用圖片處理程式儲存圖片時，通常會有個可以滑動控制畫質的滑桿，並且大多會有1到100的比例可調整（100為最高畫質原始圖片），可以控制圖片的破壞性壓縮結果。

換句話說，可透過滑桿選擇需要犧牲多少圖片資料以縮小檔案。

在處理JPEG檔時，你會發現可以很輕鬆地調整滑桿。

無論畫質是100%、60%甚至低到30%，都不會有太明顯的差別。

高像素系列圖片，需要非常仔細檢查才會看出解析度有降低，這在白色背景當中最為顯著。

但是低像素系列圖片，線條則會非常清晰可見。

兩者情況下，中等解析度圖片會是高畫質且檔案相對小的最佳選擇。

到達頁面或網站首頁適合使用清晰俐落的高畫質圖片；部落格貼文則可使用畫質較低的圖片。

理想網頁圖片大小 雖然沒有最完美的圖片大小，但有些指南可供參考。

圖片來源：Rawpixel 圖片大小該調到多少才準確？是否有黃金比例？完美的圖片大小其實會根據內容有所變動。

滿版圖片—這種圖片會由左到右佔據整個畫面。

最佳像素比例請保持在2400x1600。

內容圖片—常出現於輪播相簿、行動呼籲（Call-toaction）按鈕或部落格當中。

橫向圖片最大寬度應為1500像素；垂直圖片像素務必維持在1000或更低。

當然，像素尺寸並未與檔案大小直接相關。

那麼，圖片檔案到底該多大才好呢？黃金法則就是圖片檔案大小不要超過500KB，但這是指主要橫幅或類似用途所使用的大小。

如果您的部落格中含有圖片，每一張都會佔用網頁總空間。

網頁空間應該多大才適合？近幾年，網頁平均大小穩定攀升中，目前網頁平均大小為2MB，有些部落格甚至更大。

建議您維持在2MB以內。

Google建議的作法是將網頁保持在500KB以下，因此您需要盡可能壓縮圖片且保存畫質。

圖片壓縮最佳工具 現在您已經知道調整網頁圖片的方法了，接下來是選擇工具來幫助您實際操作。

有些重量級製圖工具，例如AdobePhotoshop，只是Photoshop還包含許多進階設計工具，如果您只想剪裁、調整和匯出圖片，這些工具可能並不那麼需要 相反地，您可以試試以下簡單好上手的圖片壓縮工具。

線上工具 1.Kraken.io 若想要一次壓縮大量圖片，Kraken.io會是您最好的選擇。

Kraken.io的批次圖片壓縮功能可讓您一次調整許多圖片，並且能以Zip檔壓縮打包下載，或是一張張獨立下載。

2.ShutterstockEditor ShutterstockEditor為免費設計工具，配合您各種目的和社交平台所需調整圖片 ShutterstockEditor具有可讓您創造行銷素材、簡報等各種功能，還可以調整和剪裁圖片以縮小檔案大小。

只要上傳圖片或從Shutterstock圖庫當中下載圖片均可使用。

可變更畫面尺寸，並在確定下載圖片時，依所需的DPI選取檔案大小 3.TinyPNG 想要壓縮PNG檔嗎？TinyPNG可以縮小PNG和JPEG檔的大小，可說是圖片壓縮的統一窗口。

提醒您，PNG檔比其他檔案種類要大得許多，選用這種類型的檔案時請多考慮。

輪廓清晰的圖片（例如商標）可選擇存為PNG檔。

桌面版應用程式 4.JPEGmini JPEGmini的預覽工具可幫助您選擇圖片大小。

圖片來源：JPEGmini JPEGmini壓縮工具可快速縮小JPEG檔案大小。

工具畫面上有畫質調整滑桿和預覽功能，可讓您在調整當中看出破壞性壓縮的效果。

5.PNGGauntlet PNGGauntlet透過OptiPNG、PNGOUT、和DeflOpt相關技術將PNG圖片縮到最小卻不失畫質，因此這個Windows工具想當然地受到使用者喜愛。

行動應用程式 6.BulkImageCompressor 對於Android使用者來說，沒有甚麼比BulkImageCompressor更好用的了。

使用者可以在忙碌中壓縮一整批照片，方便又有效率。

7.PhotoCompress–ShrinkPics iPhone和iPad使用者可利用PhotoCompress–ShrinkPics放心縮小圖片，空出更多空間安裝其他檔案。

還可以有效調整圖片不損畫質，以利分享到Facebook、Instagram和Whatsapp平台上。

圖片調整常見問題 那麼，會出現甚麼問題呢？圖片來源：MikeLaptev。

調整網頁圖片大小的時候，常常會遇到以下問題： 條紋—調整數位照片過頭時，就會出現條紋。

原本應該是柔和色彩梯度的天空變成枯燥的色帶。

只要色調不足調配出完美彩色梯度，條紋就會產生。

預先檢查圖片特徵結構可幫助避免壓縮時產生條紋。

像素化—沒有人會喜歡像素化、有顆粒的圖片。

若要避免這類問題，請勿將圖片像素壓縮到比原本呈現的更小。

例如，某張圖片在網站上原本是500X500像素，請不要壓縮到100X100像素。

從ShutterstockEditor下載圖片時，將圖片設定為72DPI即可。

色彩表現異常—上傳到網站的圖片看起來很奇怪嗎？首先，校正螢幕並設定亮度在90和120cd/m2之間。

然後，確認將檔案（例如JPEG檔）儲存為正確色彩空間，亦即RBG。

若儲存為供列印使用的CMYK，圖片上傳之後色彩表現就會不正常。

封面圖片作者：jossnat。

有興趣增加圖片和照片相關知識嗎？請參閱以下入門文章： 圖像設計訣竅|常用的長寬比、圖像、攝影尺寸大解析！ 社群媒體圖片尺寸|輕鬆修改圖片大小，打造最佳視覺效果 圖庫使用訣竅|如何將Shutterstock圖片素材活用於專案創意 圖片訂購方案|全新推出包年預付，讓您一次付清輕鬆省！ 從英寸轉換成像素：如何調整大小而不犧牲圖像品質 相關貼文 Shutterstock   商業:行銷   設計:靈感