如何減小 JPEG 和其他圖像文件的大小

已發表: 2021-01-20

您在網站上使用的圖像是最重要的元素之一。 您不僅希望擁有視覺上引人注目的圖像,而且您也不希望這些圖像過大以致減慢您網站的加載時間。 站點滯後的主要原因之一是其中包含的圖像尚未調整大小以實現最佳站點性能。

在本文中,我們將探索在 Photoshop 中縮小圖像大小的手動方法,包括使用“為 Web 保存”功能更改文件類型、調整大小和壓縮文件。 如果那些尋找更自動化的東西,我們也會看看一些插件和基於網絡的選項。

訂閱我們的 YouTube 頻道

更改文件類型

圖像文件的“文件大小”是指每英寸的像素數。 通常,每英寸像素越多,文件包含的信息越多,因此其大小就越大。

兩種最常見的圖像文件類型是 JPG 和 PNG。

  • PNG – 便攜式網絡圖形 – 這種文件類型主要用於圖形文件,如徽標、圖標、插圖和文本。 在像 Photoshop 這樣的照片編輯應用程序中進行編輯時,這些文件在您操作或壓縮它們時不會丟失太多數據。 因此,它們被稱為“無損”。 出於這個原因,這些文件的大小往往更大。
  • JPEG – 聯合圖像專家組這是 Internet 上大多數圖像最常見的文件類型。 這種文件類型可以管理數百萬種顏色,可以在保持質量的同時進行高度壓縮。 這些被稱為“有損”,因為壓縮它們的過程會從圖像中刪除像素。

任何一種文件類型都可以工作。 您選擇哪一個實際上取決於您的站點、您選擇使用的照片數量和類型。

這是一張示例照片。 其原始格式為 JPG 文件。

我在Photoshop中使用了文件>另存為命令,選擇了PNG格式,完成了保存功能。

當我更改文件類型時,文件大小從 646 MB 變為 1.3 KB。 如上所述,PNG 文件通常更大,因此對於這種具有大量顏色和細節的圖片,最好使用 JPEG 版本以確保更快的加載時間。 如果您知道您的圖像需要能夠在不降低分辨率的情況下放大,請使用 PNG 版本。

請注意,還有許多其他文件格式可用。 我專注於 JPEG 和 PNG,因為它們是最受歡迎的。

在 Photoshop 中手動調整大小

在 Photoshop 中,您可以使用圖像>圖像大小功能手動調整圖像大小。 該工具如下所示:

在Photoshop中減小文件大小

您可以在工具頂部看到當前的圖像大小和像素尺寸。 您在此處所做的任何調整都會改變大小。

適合是一個具有預設大小和像素設置的下拉列表。

在Photoshop中調整圖像文件大小

如果我選擇該列表中的第一個選項來調整每英寸 (ppi) 的尺寸和像素,我可以看到文件大小將如何變化。

在Photoshop中調整圖像文件大小

您可以嘗試使用這些設置來確定下拉菜單中的標準尺寸是否有效,或者您是否需要手動更改寬度、高度或分辨率選項以獲得您需要的尺寸。

保存為 Web 功能

Save for Web 與 Save As 的不同之處在於,Web 選項會在保存之前從文件中刪除元數據(有關圖像類型和來源的詳細信息)。 此功能專門用於將在 Internet 上顯示的圖像,因此它可以是一種在保持質量的同時調整大小的非常快速的方法。

通過導航到“文件”>“導出”>“為 Web 保存”找到“為 Web 保存”選項:

在Photoshop中調整圖像大小

當 Save for Web 窗口打開時,您會注意到此功能的另一個好處。 如果您選擇頂部的 2-up 選項卡,您可以看到原始圖像與更改後的圖像並排的比較。

在Photoshop中調整圖像大小

從這裡,使用右上角的預設選擇 JPG 格式並根據需要調整質量。 進行更改後,您可以通過圖像預覽查看新文件是否符合您的質量標準,並且您可以通過查看每個圖像下的數據來驗證文件大小的更改:

請注意,您還可以使用右下角的寬度和高度字段更改大小。 由於本文專門針對調整大小,因此我們不會介紹“另存為 Web”屏幕中顯示的其他選項,但您可以閱讀此處了解更多詳細信息。

WordPress 圖片優化工具

如果您想自己轉動刻度盤以自己減小圖像文件大小,Photoshop 是一個不錯的選擇。 如果您正在尋找更自動化的東西來幫助調整圖像大小,那麼有很多 WordPress 插件選項可以提供幫助。 以下是一些流行選項的列表及其優點的簡要說明:

Imagify – 一次性優化所有圖像,輕鬆調整大小並在需要時將照片恢復到原始版本。 它也很實惠。 此插件可免費下載,包含 20 MB 的文件空間。 其他選項是 500MB 每月 5 美元,無限空間每月 10 美元。

ShortPixel – 沒有文件大小限制和多個站點的一個 API 密鑰,可以充分利用此插件。 他們還提供一次性和月度計劃以實現預算靈活性。

Optimole – 對於面向數據的用戶,Optimole 提供了一個儀表板,您可以在其中查看優化統計數據。 他們的免費計劃允許每月 5,000 名訪問者和無限帶寬。

有關這些選項和其他一些選項的更完整比較,請參閱本文。

用於圖像優化的 Web 資源

如果您時間和/或金錢緊張,有很多免費的在線圖像優化工具。

Compressjpg 允許您上傳多個文件並一次調整它們的大小。 它還具有將 iPhone HEIC 格式照片轉換為 JPEG 的功能。 其他類似的網站有 Tinypng 和 Image Compressor。

Canva Pro 是另一個受歡迎的網站,它不僅可以調整大小,還可以讓您設計和製作圖像動畫,以及將它們格式化以供網絡或社交媒體使用。 它的佈局直觀且易於使用。

包起來

不要低估優化圖像的重要性。 慢速網站不僅會關閉瀏覽器,而且它們也不會在 Google 搜索中受到關注。 快速加載、清晰的圖像可以提供一些額外的東西,使您的網站與眾不同。 優化的網站將使訪問者返回更多。

您是否使用這些方法中的任何一種來調整圖像大小? 如果沒有,您認為您會先嘗試哪個? 在評論中告訴我們!

精選圖片來自 Prihanto Edi/shutterstock.com