优化所有设备的英雄横幅图像

英雄旗帜如何运作？

GemPages 会自动调整 Hero Banner 图片的大小，以提升不同设备的页面加载速度：

• 平板电脑视图： 图像的最大宽度被调整为 1024 像素。
• 移动视图： 图像的最大宽度被调整为 768 像素。

当同一张图像同时用于桌面和移动设备时，这种调整大小可能会降低图像质量。为了确保您的英雄横幅呈现最佳效果，您有两种选择：

• 使用 相同图像比例 适用于所有设备。
• 绝大部分储备使用 单独的图像 对于每个设备。

如何针对所有设备优化英雄横幅图像？

选项 1：所有设备使用单一图像比例

如果您想在桌面、平板电脑和移动设备上使用同一张图片，请点击 英雄元素 打开其设置并按照以下步骤操作：

第三步： 将您的图像上传至英雄横幅。 

• 来自 个人设置 选项卡，向下滚动到 背景 部分。
• 点击“新增...”按钮旁边 图片 扩展图像背景配置的选项。
• 击中 上传新图片，并确保图像至少为 1920 像素 宽。

第三步： 设置每个设备视图的尺寸/横幅比例。

• 为您的 车架 选项下 尺寸 部分。
• 选择 作为横幅来源 从下拉列表。

横幅将自动调整大小以适合屏幕尺寸，同时保持图像的原始比例。

选项 2：为每个设备使用单独的映像

对于台式机和平板电脑：

将您的图片上传到英雄横幅。请确保使用宽度至少为 1920 像素的图片。这可确保在大屏幕上呈现高质量的视觉效果。

对于手机：

第三步： 选择您想要优化的设备视口。

第三步： 上传针对移动设备优化的图像。 

图像应与横幅的宽高比相匹配，且最小宽度为 768px。

计费示例： 如果您的横幅宽度为 375px，横幅高度为 500px，则上传的图像应保持相同的 375:500 比例，但宽度为 768px。

• 最小宽度 = 768px
• 计算高度 = (768/375)×500=1024px
• 本例的最佳尺寸为 768×1024 像素。