为高密度显示器选择有用的图像尺寸

以 800 css 像素显示的卡片可以使用 1600 图像像素宽的图像候选图像作为 2x 示例。 当网站提供响应图像标记时，浏览器可以根据布局、设备密度和其他条件选择适当的来源。 1600 像素文件并不意味着该卡在页面上占据 1600 个 CSS 像素。

在导出之前测量实际布局。 文章专栏、全宽横幅和小产品卡很少需要相同的来源大小。 还要检查手机布局，其中图像可能占据不同的宽度或使用不同的裁剪。 使每个文件成为最大桌面视口宽度的两倍可能会浪费字节。 将更高密度的导出视为真正响应实现的候选者，而不是每个设备都必须下载的单个超大文件。

此页面以 1600 x 1600 像素的 WebP 适合框开始。 它是一个说明性的界限，因此将其替换为基于您测量的显示大小的值。 适合保持比例，不会扩大较小的来源。 例如，宽幅原稿可能会达到 1600 像素，而肖像则改为适合高度。 检查实际输出尺寸。

如果源只有 700 像素宽，则写入 1600 像素的导出不会创建较大原件的细节。 使用更好的来源或接受较小的候选人。 在调整大小后比较光锐化和关闭大小，并检查预期显示尺寸的精细纹理。 对于透明图形，请改用 PNG，因为这里当前的 WebP 导出是不透明的。 保留原始设计或照片，以便您以后可以创建不同的候选人。

转换器生成一个文件； 您的网站仍然需要正确选择和呈现它。 在实现中提供合适的源候选、准确的尺寸提示和保留的图像尺寸。 手机不应该仅仅因为它存在就收到最大的图像。 在评估最后一页时，请在浏览器开发者工具中检查下载的图像，因为内容管理系统可能会再次对其进行转换。

在普通和高密度屏幕设置中查看页面，并将细节与传输大小进行比较。 对于小型装饰卡片，更高分辨率的图像不会自动成为最佳折衷方案。 同样，在大型产品视图中，一张过小的图像可能看起来很差。 测试有意义的内容，例如面孔和标签，而不是仅判断模糊的背景。 保持适合图像位置的优先级，并在声称提高速度或核心 Web 生命体征之前测量真实页面。

假设您最宽的卡是 400 css 像素，并且该宽度的插图保持清晰。 当源支持时，800 像素候选是一种可能的 2x 导出。 还要在更窄的布局中检查卡片，因为跨越整个手机屏幕的图像可能与桌面卡有不同的显示宽度。 从原始文件中导出每个所需的候选者，而不是扩大最小的候选者。 确认浏览器在实际页面中选择的文件。 最终选择检查是将本地维度计算与访问者真正收到的图像字节连接的方式。