减小图片体积,加快你的网站
在多数网站上,图片占了访客下载字节的大头。这让图片优化成为你为页面速度和 Core Web Vitals 所能做的最高回报的事。下面是一份可落地的清单。
1. 压缩每一张图片
发布前把图片过一遍压缩工具。压缩得当的图片可以只有原始体积的一小部分,却看不出差别。CompressEasy 在浏览器中、可批量完成这件事,能融入任何工作流。
2. 使用现代格式
从 JPEG 和 PNG 切换到 WebP 或 AVIF,可以大幅降低图片体积。这是性能优化中最简单、最高杠杆的改动之一。
3. 按显示尺寸调整大小
不要把 4000 像素的图片用来显示 800 像素。让图片尺寸匹配实际显示大小,并以约 2 倍源图兼顾高分屏。
4. 对首屏外图片懒加载
给首屏以下的图片加上 loading="lazy",让浏览器在用户滚动时才下载它们。这能在长页面上大幅加快初始加载。
5. 设置宽高
始终为图片设置 width 和 height 属性(或用 CSS aspect-ratio),让浏览器预留空间。这能避免布局抖动,改善 Cumulative Layout Shift 指标。
先做最大的优化
如果你只做一件事,那就把最大的图片压缩并转换为 WebP 或 AVIF。它既快又免费,通常能削掉最多的页面体积。先把文件拖进压缩工具开始吧。