我在 WP Adminify' 上發布的最大單次性能勝利;行銷網站是'是一個快取插件或 CDN 調整。它正在刪除一張圖片。我們的老英雄是一張 2,400px PNG 螢幕截圖 I'd 匯出為 "全品質"因為我固執地相信 PNG 意味著清晰。那個檔案是 1.4 MB。在 4G 以上的中階 Android 上,它是最大的 Contentful Paint 元素 - 並且它將 LCP 拖到大約 4.1 秒。我把它換成了 84 KB 網路P 當天下午,實際顯示寬度和 LCP 降至 1.9 秒以下。沒有代碼。只是一張較小的圖片。
That'圖像 SEO 令人沮喪的事情。它'不是異國情調。圖像通常是頁面上最重的東西 - 通常接近總位元組的一半 - 但我們大多數人都將其視為事後的想法。我們將原廠相機放入 CMS 中,鍵入 "螢幕截圖;進入替代欄位,然後繼續。然後我們想知道為什麼 核心網路生命徵象 搜尋控制台中的報告在手機上呈現紅色。
本指南是我實際上在 toolz。dev 和客戶端網站上運行的清單,是從發布這些內容的人的角度編寫的。 I'將誠實地了解免費工具的作用以及同樣重要的作用't。每個圖像工具 工具。dev 完全在瀏覽器中運行 <canvas>,所以你加入的任何內容都不會上傳到任何地方。這對你的工作流程有真正的影響,有些好,有些煩人。我們'會同時得到兩者。
TL;DR: 首先將影像調整為真實顯示寬度,然後壓縮,然後提供現代格式。實際上,'三遍: 圖像調整大小 為了切割像素尺寸, 圖像壓縮 壓縮字節,並且 格式轉換器 取得 WebP。添加
width/height停止佈局轉換、編寫人類會大聲說出的替代文本以及懶惰地加載折疊以下任何內容的屬性。這樣做以及您的 LCP 和 CLS 都會得到改進 - Google 實際上排名的兩個圖像驅動的核心 Web 生命體徵。
為什麼影像對 SEO 如此重要?
三個核心網路生命體徵中的兩個是偽裝的圖像問題。在大多數內容頁面上,最大的內容繪畫是英雄圖像完成下載。累積佈局轉換通常是圖像加載較晚並將文字推到一行。兩者都是已確認的排名輸入,並且都是您透過更好地處理圖像而不是編寫更多內容來解決的問題。
There'這是人們忘記的第二個交通管道:Google圖片。對於許多電子商務、食譜、旅行和設計網站來說,圖像搜尋是有機訪問的有意義的一部分,有時是其中的五分之一。這種流量完全取決於爬蟲可以閱讀的內容 - 檔案名稱、替代文字、周圍的副本以及圖像是否足夠小以及時建立索引。
然後是#39;這是無聊但真實的一個:頻寬需要金錢和耐心。一個包含 3 MB 影像的頁面會在行動用戶看到標題之前透過計費連線進行反彈。更快的頁面可以讓人們留在周圍,並且參與度,無論谷歌如何衡量,都不會'不受傷害。
您應該實際使用什麼影像格式?
格式選擇是大部分儲蓄所在的地方,規則比格式戰爭聽起來更簡單。
JPEG 適用於照片 - 任何具有平滑梯度和數千種顏色的東西。它'有損,這正是您想要的照片。在 75 × 85 品質下,壓縮對於普通檢視者來說是不可見的,並且檔案是原始檔案的一小部分。 Don'將其用於任何具有硬邊、文字或透明度的內容。
巴布亞紐幾內亞 是無損的。將其用於螢幕截圖、徽標、圖表以及任何具有平面顏色區域或透明度的內容。捕獲:對於照片,與 JPEG 相比,PNG 會產生一個滑稽的大文件。我的 1.4 MB 英雄錯誤正是這個 - 一張被迫進入巴布亞新幾內亞的攝影式螢幕截圖。
網路P 是 2026 年的實際預設值。它既有損又無損,支援透明度和動畫,並且在匹配品質下通常比 JPEG 小 25-34%。瀏覽器支援現在是通用的。這是我幾乎所有內容都轉換到的格式。
阿維夫 壓縮得更難 - 通常比 WebP 小得多 - 因為它'基於 AV1 視訊編解碼器建構。它'格式很棒。但我必須直接同意你的觀點,因為很多指南(包括本文替換的草稿)告訴你"只需轉換為 AVIF"使用線上工具,即'不是瀏覽器畫布編碼的工作原理。
SVG 適用於向量:圖示、標誌、簡單插圖。它的比例無限大且很小。它'對於照片來說毫無用處。
AVIF 警告無人提及
這裡'是誠實的位。 Toolz.dev's 格式轉換器 出口 PNG、JPEG 或 WebP- 而且只有這三個。它可以't輸出AVIF,大多數瀏覽器內轉換器也不能。原因是技術性的:該工具將您的圖像繪製到a上 <canvas> 並打電話 canvas.toBlob('image/webp', quality). 瀏覽器's canvas 編碼器附帶 JPEG、PNG 和 WebP;它不附帶 AVIF 編碼器。因此,無法將 AVIF 從畫布中擠出,句號。
你仍然可以 餵 瀏覽器中的 AVIF 檔案透過以下方式愉快地解碼 AVIF new Image(),所以 AVIF 插入可以渲染到畫布上。你只需可以't 拿出一個即可。 It'是一種解碼、編碼、不對稱,它會不斷讓人絆倒。
所以我的現實建議是:使用格式轉換器進行 WebP 步驟,該步驟涵蓋了 95% 的勝利。如果您想要 AVIF 在上面,請在建置管道中產生它 sharp, avifenc,或 Squoosh's 離線編碼器 - that's 無論如何都屬於 AVIF,因為它的編碼很慢,而且你不'不想為每個圖像手動執行此操作。
| 格式 | 最好 | 有損? | toolz。dev轉換器可以輸出嗎? |
|---|---|---|---|
| JPEG | 照片 | 是的 | 是的 |
| 巴布亞紐幾內亞 | 螢幕截圖、標誌、透明度 | 不 | 是的 |
| 網路P | 幾乎所有內容都在網路上 | 兩者 | 是的 |
| 阿維夫 | 重影像的最大壓縮 | 是的 | 不 - 使用建置工具 |
| SVG | 圖標、標誌、向量藝術 | 不適用 | 否(向量,不是畫布) |
如何在不破壞品質的情況下壓縮影像?
我看到的錯誤是最錯誤的順序壓縮錯誤的東西。壓縮以 800px 顯示的 4000px 影像就像真空密封您永遠不需要包裝的手提箱。首先調整大小,然後壓縮。總是。
所以工作流程是:開放 圖像調整大小,將寬度設定為影像實際渲染的最大尺寸(檢查您的佈局 - 部落格正文影像通常為 720 contracts800px,而不是 1920)。調整器適合您的目標框,並且不會拉伸或裁切,因此縱橫比是安全的。然後將該輸出放入 圖像壓縮 並降低質量,直到你幾乎無法分辨 - 通常照片為 78 commend82。提交前以全變焦預覽;工件隱藏在漸層和膚色中,而不是縮圖中。
一個要錨定的數字是:對於攝影內容,品質 80 是無聊、可靠的答案。 I've A/B'd 80 對 90 在真實的產品照片上,並且在良好的顯示器上 100% 變焦時,大多數人可以't 呼叫它。但 80 通常小 40%。在大約 60 下面,您開始在光滑區域看到塊狀文物,因此 '地板上的任何東西都只有一個小縮圖。
兩個瀏覽器陷阱會讓您感到困惑
這兩者都花費了我真正的調試時間,所以免費學習它們。
透明 PNG → JPEG 將背景變成黑色,而不是白色。 我曾經將透明標誌轉換為 JPEG,透明區域呈現純黑色。我假設該工具壞了,花了二十分鐘盯著它看。它'不是錯誤 - it'是 HTML 規格。當您將畫布序列化為沒有 alpha 通道 (JPEG) 的格式時,透明像素會合成到純黑色上。如果您需要透明度,請保留 PNG 或使用支援 alpha 的 WebP。如果您特別想要白色背景,請先放下一層白色。
每次重新編碼都會剝離 EXIF 和 GPS 元資料。 由於這些工具將影像重新繪製到新的畫布上,因此輸出沒有 EXIF、沒有相機資訊、沒有嵌入的 GPS 座標。 That'真正的隱私勝利 - 你'不會意外地將手機印在照片中的緯度/經度發布。但是它'如果您依賴嵌入的顏色設定檔或版權元數據,那麼這也是一個陷阱;那些也去。對於 SEO,它並不重要'沒關係,但知道它'正在發生。
響應式影像和 srcset 如何運作?
手機渲染的圖像寬度可能為 390px。運送 1920px 檔案會浪費您剛剛仔細壓縮的大部分位元組。 srcset 透過向瀏覽器提供大小選單並讓其選擇來解決此問題。
<img
src="product-800.webp"
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Matte-black wireless headphones on a walnut desk"
width="800" height="600" loading="lazy" />
要製作這三個文件,請運行相同的來源 圖像調整大小 在 400、800 和 1200px 下,然後將每個轉換為 WebP。這 sizes 屬性是人們跳過的部分,跳過它會悄悄地破壞整個事情 - 如果沒有它,瀏覽器會假設圖像填滿視口並抓住最大的候選者。告訴它圖像真正渲染了多寬,然後下載了正確的圖像。
如何編寫真正有幫助的替代文字?
Alt 文字是圖像 SEO 的另一半,它'一半的開發人員都趕緊了。它同時完成三項工作:它'螢幕閱讀器向盲人用戶大聲朗讀的內容,它'爬蟲如何理解圖像顯示的內容,它'如果圖像無法加載,則後備文字。正確的主要是像一個人一樣寫作,而不是關鍵字機器人。
我使用的規則:以你的方式描述圖像'd 在電話中向某人描述它。特定的、自然的、短的-大約125個字符以下,所以螢幕閱讀器會笨拙地截斷它。跳過&引用;圖像&引用;或&引用;照片的&引用;因為螢幕閱讀器已經宣布它'圖像;引導這些浪費了聽眾's時間。如果您的目標關鍵字確實適合圖片,請自然地包含一次。如果它不'不合適,就把它放在一邊-鍵盤的照片不'不需要&引用;購買便宜的無線耳機和引用;卡在它的替代位置。
真實評論 I'的一些之前/之後已完成:
alt="image"→alt="Matte-black wireless headphones on a walnut desk"alt="chart"→alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"alt="best cheap headphones buy now free shipping sale"(關鍵字填充)→alt="Over-ear headphones with the carrying case open beside them"
人們犯了一個細微差別:純粹的裝飾性圖像--分隔符號、背景華麗--應該有一個 空的 alt="",不是描述。空的 alt 告訴螢幕閱讀器完全跳過它,這正是您想要的裝飾。為攜帶訊息的圖像保留真實的 alt 文字。
當你'同時,也描述性地命名文件。 wireless-headphones-matte-black.webp 節拍 IMG_4532.jpg 因為搜尋引擎將檔案名稱讀取為訊號,而連字符(不是下劃線)是 Google 解析為斷詞的分隔符號。
這實際上對核心網路生命徵象改變了多少?
LCP(最大的內容塗料): 你的英雄通常是LCP元素。在 WebP 中以正確的尺寸、品質 ~80 服務,並且 - 至關重要的是 - 執行 不是 懶惰加載它。懶惰加載的折疊上方英雄是經典的自有英雄;它延遲了 LCP 正在測量的確切元素。如果它'是英雄, <link rel="preload" as="image"> 相反。
CLS(累積佈局轉換): 總是放 width 和 height 在 <img>. 這兩個屬性讓瀏覽器在圖像到達之前保留空間,因此文字在載入時不會跳轉。這是最便宜的 CLS 修復程序,我仍然會發現缺少它的網站。
INP(與下一個畫面的互動): 圖片 don't 直接驅動 INP,但頁面被 3 MB 未優化的圖片窒息,導致主執行緒和網路缺乏 JavaScript 回應所需的容量。更輕的圖像,更快速的互動,間接。
有幾件事 I'已經學會了這種煩人的方式
優化前進行審核。透過 PageSpeed Insights 運行頁面並首先修復最重的檔案 - 1.2 MB 的違規者比從圖示上剃掉 4 KB 更重要。像人一樣命名檔案: wireless-headphones-matte-black.webp 節拍 IMG_4532.jpg 在圖像搜尋中,因為爬蟲將檔案名稱讀取為內容訊號。寫替代文字 you'd 實際上是在電話中向某人描述照片 - 具體的、自然的、關鍵字 -包括 只有在適合的地方,切勿填充關鍵字。然後不要'別忘了你的 打開圖 分享圖像;您製作的尺寸正確的 1200×630 圖像調整大小 是社交預覽中顯示的內容,有時是搜尋中顯示的內容。
常見問題
影像優化真的會影響 SEO 排名嗎?
是的,透過核心網路生命體。 LCP 和 CLS 已確認 Google 排名訊號,並且兩者都是高度影像驅動的。優化的圖像通常會顯著提高行動頁面速度分數,並且在行動裝置上可以轉化為排名移動。它還解鎖 Google 圖像作為單獨的流量來源。
我可以使用免費的線上工具將圖像轉換為 AVIF 嗎?
通常不會,Toolz.dev's 格式轉換器可以't。瀏覽器內轉換器繪製到 a <canvas>,以及瀏覽器' s canvas 編碼器僅輸出 JPEG、PNG 和 WebP - there'沒有可用的 AVIF 編碼器。大部分獲勝時間都會在線上轉換為 WebP,並在需要時使用 Sharp 或 avifenc 等工具在建置管道中產生 AVIF。
2026 年我應該使用 WebP 還是 AVIF?
WebP 是安全的預設值,也是我首先要達到的目標 - 通用支援、大額節省,您可以在瀏覽器中實現它。 AVIF 的壓縮更加困難,對於大型英雄和畫廊圖像來說值得添加,但在建置時生成它並透過它提供服務 <picture> 具有 WebP 後備功能。
我應該將 JPEG 和 WebP 壓縮到什麼品質設定?
Quality 80 是照片的可靠答案。它'在正常觀看時,它通常與原始版本沒有區別,同時又要小得多。提交前以 100% 變焦預覽,因為偽影會以漸變和膚色顯示。低於 60,壓縮變得可見。
為什麼我的透明 PNG 在轉換為 JPEG 後會變黑?
因為 JPEG 沒有 alpha 通道。 HTML 畫布規格顯示,當您序列化為非 alpha 格式時,透明像素會合成到純黑色上。它'預期行為,而不是錯誤。將圖像保留為 PNG 或 WebP 以保持透明度,或者如果您想要白色,請先將其合成到白色背景上。
這些工具會將我的圖像上傳到伺服器嗎?
不。toolz。dev 上的圖像工具在瀏覽器的畫布上本地處理所有內容 - 該檔案永遠不會離開您的裝置。一個值得了解的副作用:每次重新編碼都會刪除 EXIF 和 GPS 元數據,這有利於隱私,但意味著嵌入的相機數據和顏色設定檔也會被刪除。
什麼'是網頁影像的理想檔案大小?
作為一個粗略的目標:英雄圖像低於 ~200 KB,內容圖像低於 ~100 KB,縮圖低於 ~30 KB。一旦您調整到真實顯示寬度並服務於 WebP,這些都是非常可以實現的。確切的數字比調整大小然後壓縮然後轉換的習慣更重要。
相關閱讀和工具:
- 圖像壓縮- 調整大小後剪下檔案大小
- 圖像調整大小- 製作響應式尺寸和社交圖像
- 格式轉換器- 匯出 PNG、JPEG 或 WebP
- 開發商's 圖像工具指南
- 影像壓縮解釋
