在 Page Speed Insight 上正確調整圖像大小

Question

當檢查核心 web vitals 性能時，已標記頁面頂部的圖像 - https://www.onlia.ca/car-insurance需要適當調整大小。 但是，圖像的大小小於 100KB，這應該不會影響移動用戶的頁面加載和 LCP 分數。 有誰知道從“頁面速度洞察”中修復它的其他可能因素是什么？

Answer 1

問題之一可能是文件格式。 建議使用“.webp”格式的圖像，這有助於減小文件大小並隨后加載得更快。 （很抱歉沒有發送評論，但我沒有足夠的聲譽。

Answer 2

這告訴您圖像的分辨率不適合屏幕尺寸。

因此，如果您的圖像為 800 像素 x 1200 像素，但在手機上顯示為 400 像素 x 600 像素（實際尺寸），則您的圖像比需要的大 4 倍（寬度加倍，高度加倍）。

解決此問題的最快方法是使用<picture>元素，並為不同的屏幕分辨率提供多個版本的圖像（因此小的用於移動設備，大的用於桌面）。

至於 100kb，這對於移動連接來說實際上是相當大的（相對而言），您可以將它作為jpg降低到大約 30kb，甚至作為webP甚至更小（您也可以使用<picture>元素。）。 然而，這只是一般建議，而不是問題的根本原因（我之前提到的圖像尺寸是原因）。

Answer 3

正如格雷厄姆里奇回答的那樣，文件重量與文件大小不同。

准備圖像大小的一個很好的起點是了解移動用戶通常報告的屏幕分辨率。

假設我們將在 X 軸上為移動用戶使用 360 像素的圖像。 以及一些用於更大屏幕的增量尺寸。

然后，根據用戶“適當調整大小”的設備，您有幾個基本選項來提供不同的圖像

• 圖片資源
• 圖片標簽
• SVG 圖片
• 以圖像為背景的媒體查詢

最終大小也會受到寬度屬性的影響，例如，如果您有兩列，則圖像甚至可能比整個瀏覽器寬度小 50%。