产品图像配置

如果您计划上载大型图像以供在​ Product Details ​页面上查看,则可能需要考虑设置最大像素大小(宽度和高度),并在上载时自动调整文件大小。 为了支持此类产品图像上传,有一个选项可在您上传大型图像文件时自动调整其大小。 对于要添加到目录但尚未显示图像资源的产品,可以配置占位符图像。

产品图像大小调整

上传产品图像时,您可以添加不同大小的大图像,以便在​ Product Details ​页面上提供详细的高质量缩放。 要确保所有图像具有相似的大小和外观,可以使用图像大小调整选项来确保所有图像均匹配特定的像素大小。 此选项使用配置设置自动调整所有产品图像的大小,这有助于提高缩放性能、加快图像加载速度并保持产品图像的统一外观。

NOTE
为获得最佳兼容性,建议使用sRGB颜色配置文件上载所有产品图像。 所有其他颜色配置文件在产品图像上传期间自动转换为sRGB颜色配置文件,这可能导致上传的图像出现颜色不一致。

设置最大像素宽度和高度可将图像大小按像素调整为物理尺寸。 Commerce会根据较高的宽度或高度调整图像大小,同时保持其比例。 降低JPG图像的质量可减小文件大小。

例如,100%的3000 x 2100像素JPG可能是5 mb或更大的图像文件。 调整此图像的大小会将宽度减少到1920像素,并保持比例和质量为80%,以提供小得多的文件大小和较高的质量。

启用图像大小调整

  1. 在​ 管理员 ​侧边栏上,转到​ Stores > Settings>Configuration

  2. 在左侧面板中,展开​ Advanced ​并选择​ System

  3. 展开 扩展选择器 图像上传配置 ​部分。

    要更改默认设置,请根据需要取消选中​ Use system value ​复选框。

    图像上传配置 {width="600" modal="regular"}

    有关这些配置设置的详细列表,请参阅​ 配置引用 ​中的​ 图像上传配置

  4. 要启用,请确保​ Enable Frontend Resize ​设置为Yes

  5. 输入介于1100%之间的​ Quality ​设置。

    为了减小文件大小并提高质量,建议设置80-90%。

  6. 设置图像的​ Maximum Width ​像素。

    调整图像大小时,它不会超过此宽度并保留比例。

  7. 设置图像的​ Maximum Height ​像素。

    在调整图像大小时,它不会超过此高度,并且会保留比例。

  8. 完成后,单击​ Save Config

字段描述

字段
作用域
描述
Quality
全局
确定调整后图像的JPG质量。 较低的质量会减小文件大小。 建议使用80-90%来帮助以高质量减小文件大小。 默认值:80
Enable Frontend Resize
全局
允许Commerce调整您为​ Product Details ​页面上传的大型、超大图像的大小。 上传文件时,Commerce会使用JavaScript调整图像文件的大小。 在调整图像大小时,它将保持精确比例,以符合并且不超过“最大宽度”或“最大高度”的最大尺寸。 默认: Yes
Maximum Width
全局
确定图像的最大像素宽度。 调整图像大小时,它不会超过此宽度。 默认: 1920
Maximum Height
全局
确定图像的最大像素高度。 调整图像大小时,它不会超过此高度。 默认: 1200

图像占位符

Adobe Commerce和Magento Open Source使用临时图像作为占位符,直到永久产品图像可用为止。 可以为每个角色上传不同的占位符。 初始占位符图像是一个示例徽标,您可以将其替换为您选择的图像。

图像占位符

要上载占位符图像:

  1. 在​ 管理员 ​侧边栏上,转到​ Stores > Settings>Configuration

  2. 在左侧面板中,展开​ Catalog ​并在下面选择​ Catalog

  3. 展开​ Product Image Placeholders ​部分的 展开图标

    产品图像占位符 {width="600" modal="regular"}

    有关这些配置设置的详细列表,请参阅​ 配置引用 ​中的​ 产品图像占位符

  4. 对于每个图像角色,单击​ Choose File,在您的计算机上查找该图像,然后上载该文件。

    您可以为全部三个角色使用相同的图像,也可以为每个角色上传不同的占位符图像。

  5. 完成后,单击​ Save

有关图像角色和建议大小的信息,请参阅上传图像

recommendation-more-help
af062d56-f22c-4537-813d-bedf8b92a071