如何為 Web 調整圖像大小

這篇文章解釋瞭如何調整網絡圖像的大小。 首先以像素為單位，以便圖像正確地適合網頁。 然後以千字節為單位減少文件大小而不會過多地降低圖像質量。

為什麼我們要為 Web 調整圖像大小？

我們想讓圖像在屏幕上看起來很好，並為網站訪問者快速下載。

圖片加載速度快的網站在搜索引擎上的排名會更高。

因為搜索引擎更喜歡將用戶發送到提供良好體驗的網站。

快速加載圖像有兩個步驟：

• 第一步是以像素為單位調整圖像大小- 應該首先進行。
  那就是寬度和高度。 它需要正好適合它在網站上的位置。
  自從引入響應式網站以來，圖像大小有一些奇怪的地方。
  圖像需要適合手機、平板電腦、台式機和電視的大小，稍後將討論。
• 第二步是以千字節為單位減少圖像的大小——稱為壓縮。
  壓縮會減少或組合圖像中的顏色，從而減少以千字節為單位的大小。 可以在不損失太多質量的情況下做到這一點。

執行這兩項任務——調整大小和壓縮——被稱為優化網絡圖像。

我將向您展示調整圖像大小的最佳實踐以及如何進行。

響應式圖像的並發症

讓我們從響應式圖像開始——那些調整大小以在不同屏幕尺寸上看起來不錯的圖像。

我們首先為移動設計，所以我將首先參考網站的移動版本。

在移動網站上，圖像通常跨越屏幕的整個寬度。 圖像堆疊在文本之上，用戶非常習慣於快速向下滾動長且適合移動設備的網頁。

對於移動設備，圖像的最佳寬度為 640 像素。 高度可以是任何你想要的。

但是圖像大小調整併不止於此。 一種尺寸並不適合所有人。

不同設備上的圖像

讓我們考慮在超大顯示器或電視屏幕上顯示相同的圖像——是的，現在可以通過智能電視訪問網站。

圖像可能位於文本左側的列中。

它可能會像在移動版本上一樣跨越屏幕的寬度。 我們稱這些為英雄形象。

想像一下現在需要多大的圖像？

對於電視，像素完美的圖像寬度為 1920 像素或更多。

如果您已經為移動設備將圖像縮小了 640 像素，如果您嘗試將其放大到 1920 像素，它看起來會很糟糕。 你會拉伸它超過 400%。

放大圖像看起來不太好 - 像素拉伸並且圖像顯得模糊。

將圖像保持在 1920 像素也不能解決問題。 這些下載速度很慢，尤其是在互聯網連接速度較慢的情況下。

更複雜的是：圖像應該是頁面上使用的確切像素大小。 搜索引擎喜歡對寬度和高度有一個很好的了解——稱為尺寸。

所以你可以看到 - 沒有標準尺寸，而且一切都變得非常複雜。 我們所能做的就是盡力而為。

用於自適應圖像的 WordPress 插件

有一些 WordPress 插件可以幫助為設備提供正確的圖像大小，稱為自適應圖像。

基本上首先下載一個小圖像——無論是大小還是分辨率。

如果屏幕分辨率很大，插件會提供更大的版本。 這加快了訪客的等待時間。

如果您想使用大英雄圖像但又擔心下載時間，這就是解決方案。

這是我喜歡的兩個自適應圖像插件：

• Nevma 的 WordPress 自適應圖像
  只需將較小版本的圖像發送到移動設備，這是一個非常基本的插件，在激活後保存設置後即可完成工作。
• Shortpixel 自適應圖像由 ShortPixel
  這個插件很聰明。 一旦激活，它將開始為不同的屏幕裁剪和壓縮圖像。 儘管如果需要，您可以有更大的控制權。 ShortPixel 文檔也很全面。 您甚至可以將壓縮前後的圖像與其圖像壓縮測試進行比較。
  

所以，我會做的是使用這些自適應插件，但不要完全依賴它們並將照片直接從相機轉儲到您的 WordPress 網站上。 保持您的媒體庫清潔。

首先調整圖像大小並最小化壓縮以降低 KB。 將其上傳到 WordPress 後，自適應圖像插件將完成剩下的工作。

讓我們開始調整網絡圖像的大小。

調整網絡圖像的大小 - 以像素為單位

考慮到我們討論的所有內容，選擇您的圖像寬度。

• 攝影師需要高質量的圖像。 要在超大顯示器上以全屏寬度顯示它們，它們需要相當大的圖像。 將照片大小至少為 1920 像素。
• 其他人，我建議選擇 1200 像素。 這是一個很好的平衡。 使用超大顯示器的人會在全寬圖像上看到像素化，但這是快速加載圖像的一種權衡。

對於我自己的網站和博客，我使用的圖像最大寬度為 1200 像素，頁面上的大多數圖像寬度為 800。原因如下：

• 我的網站上從未使用過全寬圖像。 我喜歡讓一切都非常快速。
• 我的業務不是特別視覺化，人們不需要以如此高的分辨率查看我的照片。
• 我為 Open Graph 使用單獨的、精確大小的圖像，並且不需要大於 1200 的任何圖像。
• 通過 Google Analytics，我知道訪問我網站的人使用的是手持設備或筆記本電腦。 有用的信息。

我讓你自行決定。

免費的圖像編輯軟件

您可以在線使用大量免費工具以及可以下載的圖像編輯程序。

對於照片堅持 JPEG 文件格式，這就是我們將在這裡介紹的內容。

對於矢量，請選擇 PNG 或 SVG——這是未來的教程。

GIMP 圖像編輯軟件

'GIMP'（GNU 圖像處理程序）是一個完全免費的圖像編輯器。

從網站下載 GIMP 的當前穩定版本。

GIMP 提供了有關更改圖像大小（尺寸）（比例）的教程。

在線圖像編輯器

在 Google 中快速搜索“在線調整圖像大小”將為您提供大量選項，使您能夠上傳、調整大小、壓縮和下載 Jpeg。

我發現的第一個結果是 resizeimage.net。 使用起來非常簡單——它可以裁剪、調整大小和壓縮圖像。

如果您想裁剪圖像，請使用選項 2，但我繞過了它並直接轉到選項 4，在那裡我可以按像素調整其大小。

將 1200 放入寬度字段，高度為 Nan 並勾選保持縱橫比的框。

輸出圖像格式將為 JPG。

選擇一個壓縮選項。

一旦訪問者在頁面上，漸進式壓縮將顯示 JPEG 的像素化版本。 其餘信息將逐步下載以構建最終映像。 我非常喜歡這個選項，因為訪客知道等待。

將圖像質量降低約 75%，同樣取決於您想要的無情程度。

以 KB 為單位調整圖像大小 - 壓縮

壓縮與調整大小非常不同。 即使您使用的是自適應圖像插件，也應在上傳前壓縮所有圖像。

壓縮通過減少像素來減小圖像的文件大小，因此下載速度更快。

在壓縮階段盡量不要過多地降低圖像質量。

嘗試在看起來不錯的圖像和快速下載之間取得平衡。

圖像也可以使用 GIMP 軟件進行壓縮。

關於更改 Jpeg 大小 (FileSize) 的 GIMP 教程。