Windows 网页图片优化

在 Windows 上通过先调整尺寸的流程、格式对比、响应式变体、视觉检查和实测交付，优化网页图片。

从网络请求开始，而非设计导出文件。一张 3000 像素的产品照片在 640 像素的卡片中可能看起来正常，因为 CSS 将其缩小了，但浏览器仍会传输大尺寸源文件。下面的 Windows 流程可找出这种不匹配，创建合理的变体，并在部署后检查页面。

找出成本最高的图片

在 Microsoft Edge 中打开页面，按 F12，选择 Network（网络），重新加载，并按 Img 筛选。按传输大小排序。记录每个高成本请求的三项信息：

文件的像素尺寸。
在 Elements（元素）面板中的渲染宽度。
是否位于首屏或稍后加载。

首屏渲染宽度为 1200 像素的图片，可能需要 1920 或 2400 像素的源文件以适应高密度显示屏。它通常不需要原始 6000 像素的相机导出文件。渲染宽度为 360 像素的卡片不应请求与首屏图片相同的文件。

在 Paint 中调整单张图片尺寸

Paint 足以修正单个过大的源文件：

打开图片并选择 Resize and skew（调整大小和倾斜）。
保持 Maintain aspect ratio（保持纵横比）启用。
输入所需的像素宽度，而非根据文件大小猜测的百分比。
使用 Save as（另存为），以便主文件保持原样。

对于 640 像素的卡片，创建一个 800 像素的标准候选文件和一个 1280 像素的高密度显示屏候选文件。调整尺寸后检查小文本和细产品边缘。如果源文件包含透明度，请勿将其保存为 JPEG。

使用 PowerToys 批量调整尺寸

Microsoft PowerToys 包含 Image Resizer ，它向文件资源管理器添加了调整尺寸命令。定义与网站实际断点匹配的宽度，例如 480、960 和 1600 像素，然后创建副本而非替换原始文件。

PowerToys 适用于尺寸调整，但并非完整的交付流水线。文件命名、格式转换、响应式标记和视觉审查仍然重要。将生成的候选文件放入单独的文件夹，以免与源艺术作品混淆。

选择 JPEG、PNG、WebP 或 AVIF

素材	合理的交付格式	仔细检查
产品或编辑照片	WebP、AVIF 或 JPEG	纹理、渐变、肤色
包含小文本的截图	PNG 或高质量 WebP	字形边缘和细线
徽标或图标	源文件为矢量时选择 SVG	正确的 viewBox 和可访问标签
带有柔和阴影的透明度	WebP 或 PNG	亮色和暗色背景上的光晕

不要将所有 PNG 转换为 JPEG。这可能会移除透明度并在文本周围产生振铃效应。也不要将 JPEG 照片转换为 PNG；这通常会使文件变大，而不会恢复丢失的细节。有关底层权衡，请参阅有损和无损压缩。

正确交付响应式图片

仅压缩并不能使图片响应式。提供宽度候选文件，让浏览器选择一个：

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

Google 在其图片 SEO 指南中推荐标准图片元素、有用的 alt 文本、响应式候选文件和回退 src。width 和 height 预留布局空间。alt 文本应描述图片的用途，而非重复关键词列表。

在 Edge 中验证结果

在桌面和移动宽度下禁用缓存重新加载。确认浏览器选择了预期的 srcset 候选文件，首屏图片未导致布局偏移，且文本保持可读。然后使用 PageSpeed Insights 或现场数据确定图片更改是否改善了实际页面。Google 将核心网页指标视为页面体验的一部分，而非有用内容的替代品。

对于未发布的产品图片，在发布前保持转换在本地进行。在将受 embargo 的素材发送给第三方服务之前，请参阅 Windows 在线压缩器隐私风险。

GetCompress 何时适合网页素材准备

Paint 和 PowerToys 足以应对偶尔的尺寸调整。当 Windows 团队反复接收需要一致尺寸、格式变体和视觉审查的混合 PNG、JPEG、HEIC、TIFF 和其他源文件时，GetCompress 是更好的选择。保存的预设和批量队列可在文件进入仓库或 CMS 之前准备本地交付副本。

响应式标记、CDN 配置、缓存和性能测量仍然必不可少。测试部署后的页面，并将母版源文件与生成的网页资源分开保存。