將圖片調整到最適合的狀態,可讓您的網站跑得更順,使用起來更輕鬆。深入了解如何調整網頁圖片以及探索操作所需工具。

圖片對於網站至關重要,不可或缺。圖片不僅可以拉近使用者,更能讓網站、部落格貼文、橫幅廣告或電子郵件看起來十分專業。然而,同樣的圖片也可能造成網站不穩。像是花太多時間載入,這會帶給使用者不好的經驗,也會影響網站在搜尋引擎上的排名。若要改善,您需要了解如何調整網頁圖片。


檔案大小主要組成條件

大檔案拉長載入時間,小檔案品質卻不夠好。圖片來源:ussr

為什麼圖檔會影響載入時間?主要原因就是檔案大小,檔案越大,網站處理的時間就越長。以下為影響整個圖檔大小的三種因素:

  • 像素尺寸 — 圖片長寬大小,在於像素多寡所組成。尺寸越大,圖片水準就越高,但檔案也會相對變大。舉例來說,2000 X 1500 高像素的圖片,呈現起來會更完美,但也會佔去不少空間。
  • 檔案類型 — 不同類型的檔案會佔用更多空間,取決於使用方式、內含的資訊量以及圖片本身呈現方式(點陣圖或向量圖)。若想了解如何為網站選用最適合的圖片格式,例如: JPEG、PNG、 SVG 或 GIF,請參閱我們的推薦文章
  • 圖片品質 — 若要保留圖片原始畫質,檔案想必不小。透過壓縮圖片則可藉由降低畫質或移除圖片中的隱藏元素,進而限制檔案大小。請參閱我們的圖片解析度貼文,以深入了解影響圖片呈現的關鍵。

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


什麼是網頁速度?

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

瀏覽網頁時,瀏覽器會以位元組(Byte)為單位下載資訊(例如:千位元組、百萬位元組)。網站上的所有元素,無論是圖片和文字、動畫和導覽選單,都以位元組來衡量,佔有一定的空間。因此,網頁佔用越多位元組,就會花更多時間載入。


如何改善網頁速度

重新調整圖片大小即可改善網頁速度。圖片來源:jossnat

改善網頁速度最簡單又快速的方法就是降低圖片檔案大小,這道程序稱為圖片壓縮。人人均可使用我們的線上照片編輯器來縮小圖片,不需具備設計或程式基礎。

圖片壓縮的過程可減少檔案大小,釋放更多空間。也有人稱這個過程為「調整圖片大小」或「圖片最佳化」。為有效提升網頁速度,調整圖片大小可說是重要關鍵。

圖片是網站上最佔空間的元素,因圖片佔去許多位元空間,造成瀏覽器下載時間更長。若重新調整網頁圖片大小,即可減少圖片的位元組,載入就會更快。

若想更深入調整網頁速度機制,可試著減少重新導向功能、使用網頁字型以及減少不必要的語法,例如:留言功能或過多的空間。但這些效果都沒有圖片壓縮來的顯著。


為什麼網頁速度對搜尋引擎如此重要?

網頁速度之所這麼重要,有兩個主要原因:

  1. 更快的網頁速度 = 更好的使用者體驗
    每個人都有過等待網頁載入等到天荒地老的經驗。這不僅會令人發怒,還會導致網站還沒載入完成,使用者就離開了。如果網頁沒有在三秒鐘內開啟,53% 的手機使用者會馬上關閉離開。
    相對地,網站快速載入可讓使用者輕鬆瀏覽內容。使用者感受越好,停留在網站並瀏覽內容的時間就越多,甚至下訂購買商品。
  2. 更快的速度 = 更前面的 Google 排名
    Google 搜尋引擎在排名網頁時,是以網頁速度為演算法依據。如果想要出現在搜尋結果最前面(誰不想呢?),趕快檢測您的網頁速度。

如何調整網頁圖片大小

1. 挑選適當的檔案格式

開始調整網頁圖片大小之前,先確認圖片檔案格式是否恰當。以下為三種普遍接受的網頁檔案格式。

為網頁選擇正確的檔案類型對於平衡大小和畫質大有幫助。圖片來源:Razvan Ionut Dragomirescu
  • JPEG – 適用於照片、螢幕截圖和大部分其他圖片。JPEG 圖片使用破壞性壓縮(lossy compression),這種壓縮方式會犧牲圖片資料以縮小檔案大小。您可以透過調整圖片畫質設定達到與檔案大小相比的最佳品質。
  • PNG – 適用於輪廓鮮明的幾何圖形,PNG 圖片比 JPEG 圖片呈現弧度及線條的效果更好。PNG 圖片使用非破壞性壓縮方式,會保留所有圖片資料,因此檔案大小也比其他格式還要大得多。
  • GIF – 適用於製作動畫。但請避免製作靜態圖片,因為圖片所呈現出來的顏色將會受限。

請參閱我們的深入指南以了解挑選正確檔案格式的更多資訊。您也可以試試看我們的免費圖片大小調整工具,此工具可在您忙得不可開支時,快速幫助您調整圖片和照片大小。

2. 減少像素

調整圖片大小以達到剛好或大一點的顯示尺寸。圖片來源:Olinda

圖片中每個像素都由相當數量的位元組編碼而成,像素越小,圖片大小也越小。但這不代表要將所有圖片都縮小到 100 x 100 像素,若這樣做,圖片一上傳到網站便會撐大並且明顯失真。

不過您可以依照網站的顯示大小要求來調整圖片。上傳圖片到網站上前,先確認需要顯示的大小為何,然後再調整圖片到與顯示大小一樣或再大一點點。調整大小不僅可以去除不必要的像素,更能明顯減少檔案大小。

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

3. 降低畫質設定

使用圖片處理程式儲存圖片時,通常會有個可以滑動控制畫質的滑桿,並且大多會有 1 到 100 的比例可調整(100 為最高畫質原始圖片),可以控制圖片的破壞性壓縮結果。換句話說,可透過滑桿選擇需要犧牲多少圖片資料以縮小檔案。

在處理 JPEG 檔時,你會發現可以很輕鬆地調整滑桿。無論畫質是 100%、60% 甚至低到 30%,都不會有太明顯的差別。高像素系列圖片,需要非常仔細檢查才會看出解析度有降低,這在白色背景當中最為顯著。但是低像素系列圖片,線條則會非常清晰可見。兩者情況下,中等解析度圖片會是高畫質且檔案相對小的最佳選擇。

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


理想網頁圖片大小

雖然沒有最完美的圖片大小,但有些指南可供參考。圖片來源:Rawpixel

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

  • 滿版圖片— 這種圖片會由左到右佔據整個畫面。最佳像素比例請保持在 2400 x 1600。
  • 內容圖片— 常出現於輪播相簿、行動呼籲(Call-to action)按鈕或部落格當中。橫向圖片最大寬度應為 1500 像素;垂直圖片像素務必維持在 1000 或更低。

當然,像素尺寸並未與檔案大小直接相關。那麼,圖片檔案到底該多大才好呢?黃金法則就是圖片檔案大小不要超過 500 KB,但這是指主要橫幅或類似用途所使用的大小。如果您的部落格中含有圖片,每一張都會佔用網頁總空間。

網頁空間應該多大才適合?近幾年,網頁平均大小穩定攀升中,目前網頁平均大小為 2 MB,有些部落格甚至更大。建議您維持在 2 MB 以內。Google 建議的作法是將網頁保持在 500 KB 以下,因此您需要盡可能壓縮圖片且保存畫質。


圖片壓縮最佳工具

現在您已經知道調整網頁圖片的方法了,接下來是選擇工具來幫助您實際操作。有些重量級製圖工具,例如 Adobe Photoshop,只是 Photoshop 還包含許多進階設計工具,如果您只想剪裁、調整和匯出圖片,這些工具可能並不那麼需要

相反地,您可以試試以下簡單好上手的圖片壓縮工具。

線上工具

1. Kraken.io

若想要一次壓縮大量圖片,Kraken.io 會是您最好的選擇。Kraken.io 的批次圖片壓縮功能可讓您一次調整許多圖片,並且能以 Zip 檔壓縮打包下載,或是一張張獨立下載。

2. Shutterstock Editor

Shutterstock Editor 為免費設計工具,配合您各種目的和社交平台所需調整圖片

Shutterstock Editor 具有可讓您創造行銷素材、簡報等各種功能,還可以調整和剪裁圖片以縮小檔案大小。只要上傳圖片或從 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. Bulk Image Compressor

對於 Android 使用者來說,沒有甚麼比 Bulk Image Compressor 更好用的了。使用者可以在忙碌中壓縮一整批照片,方便又有效率。

7. Photo Compress – Shrink Pics

iPhone 和 iPad 使用者可利用 Photo Compress – Shrink Pics 放心縮小圖片,空出更多空間安裝其他檔案。還可以有效調整圖片不損畫質,以利分享到 Facebook、Instagram 和 Whatsapp 平台上。


圖片調整常見問題

那麼,會出現甚麼問題呢?圖片來源:Mike Laptev

調整網頁圖片大小的時候,常常會遇到以下問題:

  • 條紋 — 調整數位照片過頭時,就會出現條紋。原本應該是柔和色彩梯度的天空變成枯燥的色帶。只要色調不足調配出完美彩色梯度,條紋就會產生。預先檢查圖片特徵結構可幫助避免壓縮時產生條紋。
  • 像素化—沒有人會喜歡像素化、有顆粒的圖片。若要避免這類問題,請勿將圖片像素壓縮到比原本呈現的更小。例如,某張圖片在網站上原本是 500X500 像素,請不要壓縮到 100X100 像素。從 Shutterstock Editor 下載圖片時,將圖片設定為 72 DPI 即可。
  • 色彩表現異常 — 上傳到網站的圖片看起來很奇怪嗎?首先,校正螢幕並設定亮度在 90 和 120 cd/m2 之間。然後,確認將檔案(例如 JPEG 檔)儲存為正確色彩空間,亦即 RBG。若儲存為供列印使用的 CMYK,圖片上傳之後色彩表現就會不正常。

封面圖片作者:jossnat

有興趣增加圖片和照片相關知識嗎?請參閱以下入門文章: