准备在真实页面布局中工作的英雄图像

英雄图像经常出现在主标题的旁边或后面。 在选择导出之前，检查主题、文本和控件位于不同宽度的位置。 桌面全景边缘附近的一张脸可能会在高大的电话裁剪区域中消失。 较大的文件不会解决该框架问题。 使用您的设计或照片编辑器时，在布局需要时制作单独的合成。

此工具可以适合或裁剪提供的照片，但不能扩展背景、移除对象或创建空白空间进行复印。 不要依赖锐化来使繁忙的背景适合文本。 该网站仍然需要足够的对比度和保持信息可读性的布局。 保留源主机，这样您就可以创建不同的手机裁剪，而无需重复编辑已经压缩的桌面交付文件。

起始设置适合 1920 x 1920 像素，并使用光锐化导出 WebP。 那个盒子是一个说明性的界限，不是每个英雄的要求。 衡量图像的实际布局角色，并通过您的网站提供合适的候选人。 Fit inside 保留了源组成，而确切的大小提供了您应该仔细查看的特定裁剪区域。

检查面、建筑边缘、渐变和对页面很重要的任何细节。 将 WebP 与 JPEG 的等效维度进行比较，而不是假设特定的扩展总是获胜。 在需要时保留 PNG 透明图形，因为当前的 WebP 导出在这里使用白色背景。 避免扩大小库存预览：使用许可的全分辨率来源。 一个字节帽可以强制质量或像素减少，因此一起判断导出的尺寸和可见结果。

该文件只是英雄表演的一部分。 您的网站必须尽早要求正确的来源，保留其空间，并避免延迟无关工作的可见英雄。 折叠式英雄通常是主要的视觉元素，因此请检查其实际加载行为，而不是自动应用延迟加载。 转换器无法更改您的页面标记、内容系统或托管配置。

将候选人放在真正的草稿中并测试手机和桌面布局。 在要求 LCP 改进之前，在浏览器工具中检查选定的文件并在现实条件下测量页面。 验证标题是否保持可读，并且英雄在出现时不会移动布局。 如果图片传达信息，则保留有用的替代文本，如果没有，则保留有用的替代文本。 仅将导出选项应用于相关页面横幅。 图像处理本身保留在您的设备上。

第一个有用的测试是完整的打开屏幕，其实际航向、按钮和导航到位。 检查最宽的桌面裁剪区域和最窄的支持电话裁剪区域。 查找主体消失、跨越繁忙区域的文本以及落后于控件的重要内容。 如果照片仅在删除标题时有效，请在进一步压缩之前重新访问布局或源组合。 当实现支持一个并且主题需要它时，保留单独的电话裁剪。 最终文件应该支持页面的消息以及它的加载预算，而不是简单地看起来很好。