如何为网页压缩图像

为什么优化图像可以改善网站

图片通常占页面下载数据的重要部分。大文件会延迟内容显示，消耗更多移动数据，并可能降低访问者体验。优化涉及三个决策：尺寸、格式和压缩等级。

没有适用于所有图片的完美限制。缩略图的体积应远小于占据整屏的照片。目标是在实际空间中提供足够的像素和质量，而不强迫浏览器下载不会使用的信息。

推荐的逐步流程

1. 确定图像在设计中出现的最大宽度。
2. 在压缩前裁剪构图，以避免保留将被删除的区域。
3. 根据内容和透明度需求选择格式。
4. 打开文件 图像压缩器 并尝试中高质量。
5. 比较文件大小，并检查文本、边缘、面部和渐变。
6. 发布结果并在移动和桌面端检查页面。

尺寸：避免上传超过必要的像素

如果一张卡片显示的图片宽度为 600 像素，加载一张 5000 像素的照片通常是浪费。浏览器会在视觉上缩小它，但在此之前必须下载完整的文件。请准备一个接近设计所需最大尺寸的版本。

对于高密度屏幕，提供大约两倍尺寸的版本可能有效，但理想情况是网站使用响应式图像。 SRCSET y 尺寸。这样每个设备下载适合的版本，而不是同一个庞大文件。

选择哪种格式

• JPG： 对没有透明度的照片兼容性好且大小合理。
• WebP： 适用于照片和网页图形；可保持透明度并提供紧凑文件。
• PNG： 适用于透明、带有清晰文本的截图和简单图形；在照片中可能会占用较多空间。
• SVG： 适用于徽标和矢量图标，当文件安全且设计为矢量时最佳。

转换格式并不保证文件更小。总是比较结果，并在原格式已是最有效选项时保留原始格式。请参考 比较 JPG、PNG 和 WebP 如果你不知道选择哪个。

如何选择压缩质量

从优先外观的设置开始，然后逐步降低。照片比界面截图、图表和小字体更能承受压缩。如果出现光晕、块状或模糊边缘，请提高质量或尝试其他格式。

在页面中评估文件，而不仅仅是在放大视图中。一点在300%放大时可见的差异可能在正常大小下并不明显；然而，名片上的不可读文字确实是一个实际问题。

压缩不能替代良好的实现

除了优化文件，还要用属性保留空间 宽度 y 身高 以避免内容跳跃。对于位于首屏外的图像使用延迟加载，但如果是理解页面所必需的主要图像，请不要延迟。

还应为带有版本命名的文件定义较长的缓存，并避免通过 CSS 以多种分辨率加载同一张图片。这些决策需要对网站进行修改，但可以补充压缩期间的节省效果。

常见错误

在决定尺寸前先压缩

之后调整大小会导致文件处理两次，可能累积损耗。先决定构图和尺寸，最后压缩。

将截图低质量转换为 JPG

细线和字母可能产生斑点。尝试使用 PNG 或 WebP 更高质量，并比较文件大小。

使用小图片作为页眉

放大不会恢复细节。从足够大的源开始，并从该版本生成较小的变体。

常见问题解答

一张网络图片应该有多重？

取决于其尺寸、重要性和复杂性。使用可保持最终尺寸可接受质量的最小重量作为标准，而不是追求一个通用数值。

我应该将所有图像转换为 WebP 吗？

不一定。WebP 有用，但简单的 PNG 或已优化的文件可能不会改善。先转换样本，测量并保留原件。

压缩图像是否单独提升排名？

有助于体验和性能，但排名也取决于有用内容、爬取、链接、搜索意图以及许多其他信号。压缩是一个准备良好的网站的一部分。