DocumentaciónCommerceAdministración de catálogos

Configuración de imagen de producto

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Principiante
  • Intermedio
  • Administrador
  • Líder
  • Usuario

Si planea cargar imágenes grandes para verlas en la página Product Details, considere la posibilidad de establecer un tamaño de píxel máximo (ancho y alto) y cambiar automáticamente el tamaño de los archivos al cargarlos. Para admitir este tipo de carga de imagen de producto, existe la opción de habilitar el cambio de tamaño automático de archivos de imagen más grandes a medida que carga. Para el producto que desea añadir al catálogo pero que aún no tiene un recurso de imagen para mostrar, puede configurar una imagen de marcador de posición.

Cambio de tamaño de imagen de producto

Al cargar imágenes de productos, puede agregar imágenes de mayor tamaño y con distintos tamaños para proporcionar ampliaciones detalladas y de alta calidad en la página de Product Details. Para garantizar que todas las imágenes tengan un tamaño y un aspecto similares, existe la opción de cambiar el tamaño de las imágenes para garantizar que todas las imágenes coincidan con un tamaño de píxel específico. Esta opción cambia automáticamente el tamaño de todas las imágenes del producto utilizando los ajustes de configuración, lo que puede ayudar con el rendimiento del zoom, la carga más rápida de imágenes y mantener un aspecto uniforme de las imágenes del producto.

NOTE
Para obtener la mejor compatibilidad, se recomienda cargar todas las imágenes de productos con el perfil de color sRGB. Todos los demás perfiles de color se convierten automáticamente al perfil de color sRGB durante la carga de la imagen del producto, lo que podría causar incoherencia de color en la imagen cargada.

Al establecer una anchura y altura de píxel máximas, se cambia el tamaño de la imagen según las dimensiones físicas en píxeles. Commerce cambia el tamaño de la imagen según la cantidad más alta de anchura o altura, manteniendo las proporciones. JPG Al reducir la cantidad de calidad de las imágenes de la pantalla de mayor calidad, se reduce el tamaño de archivo.

Por ejemplo, un JPG de 3000 x 2100 píxeles al 100% podría ser un archivo de imagen de 5 mb o más. Cambiar el tamaño de esta imagen reduciría la anchura a 1920 píxeles, manteniendo las proporciones y la calidad al 80% para proporcionar un tamaño de archivo mucho más pequeño con alta calidad.

Habilitar cambio de tamaño de imagen

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Advanced y elija System.

  3. Expanda Selector de expansión en la sección Configuración de carga de imágenes.

    Para cambiar la configuración predeterminada, anule la selección de la casilla de verificación Use system value si es necesario.

    Configuración de carga de imagen {width="600" modal="regular"}

    Para obtener una lista detallada de estas opciones de configuración, consulte Configuración de carga de imágenes en la Referencia de configuración.

  4. Para habilitarlo, asegúrese de que Enable Frontend Resize está establecido en Yes.

  5. Escriba un valor de Quality entre 1 y 100%.

    Se recomienda un ajuste entre 80 y 90 % para un tamaño de archivo reducido y alta calidad.

  6. Establezca Maximum Width en píxeles para la imagen.

    Cuando se cambia el tamaño de la imagen, no se supera esta anchura y se conservan las proporciones.

  7. Establezca Maximum Height en píxeles para la imagen.

    Cuando se cambia el tamaño de la imagen, no se supera esta altura y se conservan las proporciones.

  8. Una vez finalizado, haga clic en Save Config.

Descripciones de campos

Campo
Ámbito
Descripción
Quality
Global
JPG Determina la calidad de la imagen que se ha cambiado de tamaño en la que se ha obtenido la. Una calidad menor reduce el tamaño del archivo. Se recomienda el 80-90% para ayudar a reducir el tamaño del archivo con alta calidad. Predeterminado: 80
Enable Frontend Resize
Global
Permite a Commerce cambiar el tamaño de las imágenes grandes y sobredimensionadas que puede cargar para la página Product Details. Commerce cambia el tamaño de los archivos de imagen mediante JavaScript al cargar el archivo. Cuando se cambia el tamaño de la imagen, se conservan las proporciones exactas, para cumplir y no superar el tamaño más grande para la anchura máxima o la altura máxima. Predeterminado: Yes
Maximum Width
Global
Determina la anchura máxima en píxeles de la imagen. Cuando se cambia el tamaño de la imagen, no se supera esta anchura. Predeterminado: 1920
Maximum Height
Global
Determina la altura máxima en píxeles de la imagen. Cuando se cambia el tamaño de la imagen, no se supera esta altura. Predeterminado: 1200

Marcadores de imagen

Adobe Commerce y Magento Open Source utilizan imágenes temporales como marcadores de posición hasta que las imágenes de producto permanentes estén disponibles. Se puede cargar un marcador de posición diferente para cada función. La imagen inicial del marcador de posición es un logotipo de ejemplo, que puede reemplazar por la imagen de su elección.

Marcador de posición de imagen

Para cargar imágenes de marcador de posición:

  1. En la barra lateral Admin, vaya a Stores > Settings>Configuration.

  2. En el panel izquierdo, expanda Catalog y elija Catalog debajo.

  3. Expandir icono de expansión en la sección Product Image Placeholders.

    Marcadores de posición de imagen del producto {width="600" modal="regular"}

    Para obtener una lista detallada de estas opciones de configuración, consulte Marcadores de posición de imagen del producto en la Referencia de configuración.

  4. Para cada rol de imagen, haga clic en Choose File, busque la imagen en su equipo y cargue el archivo.

    Puede utilizar la misma imagen para las tres funciones o cargar una imagen de marcador de posición diferente para cada función.

  5. Una vez finalizado, haga clic en Save.

Para obtener información sobre las funciones de imagen y los tamaños recomendados, consulte Cargar una imagen.

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