图像优化
图像优化是什么，它如何影响网页性能，以及需要避免的错误。
图像优化是在保持用途所需画质的前提下，减少传输图像所需的字节数。它包含多个步骤：选择合适的格式、缩放到实际显示尺寸、压缩、移除不需要的元数据，以及只在需要时加载图像。
在网页上，优化还包括图像的分发方式。响应式图像标记（srcset 和 sizes 属性）让浏览器挑选适合屏幕的文件。延迟加载会推迟加载屏幕外的图像，CDN 则从就近的节点提供文件。
优化效果通过文件大小和页面速度指标衡量，例如 Google Core Web Vitals 之一的 Largest Contentful Paint。
转换图像格式
更换格式通常能节省最多空间。Image Converter 可以在浏览器中转换 PNG、JPG 和 WebP。
为什么优化很重要
图像往往是网页中体积最大的部分。过大的图像会拖慢移动网络下的加载速度，消耗访问者的流量，还可能拉低页面速度评分。较小的文件也让文档仓库、邮件附件和 PDF 导出更易于处理。
优化技巧
- 缩放到最大显示尺寸，例如高像素密度屏幕使用 CSS 宽度的 2×。
- 按内容选择格式：扁平 UI 用 PNG，照片用 JPG 或 WebP。
- 有损质量设为 75-85 左右，并放大局部进行对比。
- 移除不需要的元数据，但在颜色重要时保留颜色描述文件。
- 对首屏以下的图像使用延迟加载。
截图的优化
宽 1440 像素窗口的 Retina 截图宽度为 2880 像素。如果文档页面以 720 CSS 像素显示它，1440 像素的文件就足以覆盖 2× 屏幕，像素数只有原来的四分之一。
在 Temposhot 中，分享时选择 JPG Export (Adjustable Quality)，质量可设为 1 到 100（默认 85）；母版则保留 PNG Export (Lossless)。Website Capture 可直接保存为 JPEG、PNG 或 WebP。
常见错误
- 为小缩略图上传完整的 Retina 截图。
- 对文字截图压缩过度，导致字母模糊。
- 不考虑内容，把所有图像都转换为同一种格式。
- 直接优化唯一的副本，丢失原始文件。
现在就有图像需要处理？
使用 Image Compressor 减小文件大小，并先用 Screenshot Resolution Checker 检查像素尺寸。
常见问题
网站上的截图应该使用 WebP 吗？
在画质相近时，WebP 文件通常比 PNG 或 JPG 更小，并且受到当前主流浏览器的支持。
文档截图应该多大？
大约为显示 CSS 宽度的两倍，既能覆盖高像素密度屏幕，又不浪费字节。
参考资料
相关资源
总是重复截取相同的截图吗？
Temposhot 可定时截取屏幕、窗口或指定区域，并将结果导出为 PDF、图片、ZIP 或 MP4。免费的网页工具只能处理单张图片。