Usted está aquí:
Dynamic Imaging Service
Dynamic Imaging Service de B2C Commerce elimina la necesidad de cargar imágenes de diferentes tamaños para cumplir con los requisitos de su storefront. Después de cargar una imagen de origen de alta resolución, Dynamic Imaging da formato al tamaño correcto para cada aplicación de imagen: la página del producto, la página del catálogo, los productos recomendados, los resultados de búsqueda, etc. Aplique parámetros para controlar el tamaño de la imagen, el recorte, la superposición, el formato, el color de fondo y la configuración de calidad.
¿Qué producto de Salesforce Commerce tengo?
Por ejemplo, tiene un storefront con un catálogo de productos de 100.000 artículos. Su diseño web admite imágenes de hasta 150 x 150 píxeles y muestra cuatro imágenes por fila de los resultados de búsqueda de un cliente. Su diseñador web crea un diseño diferente y ahora una búsqueda de producto muestra solo tres imágenes con un tamaño de 250 x 250 píxeles por fila. En lugar de cargar las imágenes redimensionadas, Dynamic Imaging Service cambia el tamaño de las existentes.
Creación de URL de transformación de imágenes
Las clases URLUtils y MediaFile generan dinámicamente varios recursos de imagen a partir de una única imagen de alta resolución. Una URL de transformación de imagen identifica el recurso almacenable en caché y especifica cómo transformarlo.
Use estas clases porque la API valida los parámetros de transformación y lo protege de futuros cambios en el patrón de URL básico. Si codifica la URL, puede dejar de funcionar si cambia un patrón.
El literal de objeto de JavaScript contiene parámetros de transformación. Cada método devuelve una dirección URL derivada de los parámetros de transformación. Si no pasa parámetros a Dynamic Imaging Service, la imagen pasa a través de su configuración original.
Ejemplo: El parámetro de URL cy reemplaza al parámetro de transformación cropY.
La clase URLUtils incluye estos métodos para generar direcciones URL de transformación de imágenes.
URL pública imageURL( Ruta de la cadena, Transformación del objeto );
URL pública imageURL( Contexto de cadena, Cadena contextID, Cadena relPath, Transformación de objeto );
URL pública absImage( Ruta de la cadena, Transformación del objeto );
URL pública absImage( Contexto de cadena, Cadena contextID, Cadena relPath, Transformación de objeto );
URL pública httpImage( Ruta de cadena, Transformación de objeto );
URL pública httpImage( Contexto de cadena, Cadena contextID, Cadena relPath, Transformación de objeto );
URL pública httpsImage( Ruta de la cadena, Transformación del objeto );
URL pública httpsImage( String context, String contextID, String relPath, Object transform );
La clase MediaFile incluye estos métodos para generar direcciones URL de transformación de imágenes.
URL pública getURL( Transformación del objeto );
URL pública getAbsURL( Transformación del objeto );
URL pública getHttpURL( Transformación del objeto );
URL pública getHttpsURL( Transformación del objeto );
Transformaciones admitidas
| Tipo | Transformar parámetros de objeto (parámetros de URL entre paréntesis) | Descripción |
|---|---|---|
| Escala |
scaleWidth (sw), scaleHeight (sh), scaleMode (sm)
|
Los parámetros Use El parámetro predeterminado para scaleMode es Si establece |
| Superposición |
imageX (ox), imageY (oy), imageURI (oimg)
|
Los parámetros Los formatos admitidos son GIF, PNG, JPG, JP2. Debido a que un GIF animado puede causar artefactos de fotogramas, mantenga la relación de aspecto de un GIF animado. Establezca el parámetro La ruta de acceso debe admitir parámetros de cadena de consulta que admitan el servicio. Utilice una imagen transformada para la imagen superpuesta. Si la imagen superpuesta se extiende más allá de los límites de la imagen principal, la Imagen dinámica recorta la imagen superpuesta para que coincida con las dimensiones de la imagen principal. El valor de superposición ( |
| Recortar |
cropX (cx), cropY (cy), cropWidth (cw), cropHeight (ch)
|
Los parámetros Los valores de El valor de |
| Formato |
Formato (
|
El parámetro de transformación de formato especifica el formato de destino de la imagen. Los formatos de destino admitidos son AVIF, gif, jp2, jpg, jpeg, jxr, png y WebP. La ruta de acceso de la URL generada utiliza la extensión de archivo del formato de destino. Si no especifica un formato de destino, no se realiza la conversión. El parámetro Proporcione el formato de origen en el parámetro |
| Calidad |
Calidad (Q)
|
El parámetro de calidad especifica una configuración de calidad para las imágenes JPG y JP2 y el nivel de compresión para las imágenes PNG. Para las imágenes JPG y JP2, establezca los valores de 1 a 100 para obtener la máxima calidad. El valor predeterminado es 80. Omita el valor para mantener el valor predeterminado. En el caso de las imágenes PNG, la configuración de calidad no tiene ningún efecto en la apariencia del PNG, ya que la compresión siempre es sin pérdidas. En su lugar, use la configuración de calidad para establecer el nivel de compresión zlib y el tipo de filtro como un número de dos dígitos. El primer dígito establece el nivel de compresión zlib (1-9). El segundo dígito establece el tipo de filtro. Si no se proporciona la configuración PNG o se establece en 0, el valor predeterminado es 75. Si esta configuración se establece en 100 (un número de tres dígitos), en realidad es igual a la configuración de calidad 90. |
| Metadatos |
Tira
|
El parámetro strip especifica si se deben eliminar los metadatos, como EXIF y perfiles de color, de la imagen durante la transformación. Los valores válidos son |
| Antecedentes |
bgcolor
|
El parámetro Por ejemplo, FF0000 = Rojo; FF000077 = Rojo con 50% de transparencia. Si se omite el valor alfa, el color resultante es opaco. Si se pasa explícitamente 00 como valor alfa, se obtiene el mismo resultado. Los valores alfa solo son válidos cuando el formato de salida de la imagen es PNG. |
Llamadas de muestra
Esta llamada a URLUtils.imageURL( String path, Object transform ):
URLUtils.imageURL( '/<static image path>/image.png', { scaleWidth: 100, format: 'jpg' } );Devuelve la URL de transformación de imagen.
http://< nombre de host> del servidor de imágenes/dw/image/v2/.../on/demandware.static/.../<static image path>/image.jpg?sw=100&sfrm=pngEsta llamada a MediaFile.getAbsImageURL( Object transform ):
product.image.getAbsImageURL( { scaleWidth: 100 } );Devuelve la URL de transformación de imagen.
http://< nombre> de host del servidor de imágenes/dw/image/v2/.../on/demandware.static/.../<ruta de acceso a la imagen> del producto/FG45SDAF.jpg?sw=100Directrices de imagen
- Tamaño del archivo: Las imágenes de más de 6 MB no se transforman y se sirven en su configuración original. La primera solicitud de una imagen de gran tamaño devuelve un error, pero las solicitudes posteriores devuelven las imágenes en su configuración original.
- Dimensiones: El tamaño máximo transformable es de 3.000 x 3.000 píxeles.
- Se agotó el tiempo de espera: Si una transformación no se completa en 29 segundos, el servicio devuelve el error 408. Evite transformaciones costosas como aumentar el tamaño de los GIF animados.
- Bloqueo del navegador: En entornos que no son de producción, la protección de rastreo de Firefox bloquea las transformaciones por primera vez en algunas circunstancias. Para evitar este bloqueo, establezca la Protección de rastreo en Nunca durante la prueba.
Almacenamiento en caché de imágenes dinámicas
Dynamic Imaging Service utiliza el almacenamiento en caché para servir imágenes a navegadores y aplicaciones.
- Instancias de Content Delivery Network (CDN): Las imágenes se almacenan en caché hasta que se solicita una invalidación de caché. Los nuevos recursos de imagen reciben un identificador de caché único y no requieren una invalidación de caché explícita.
- Instancias que no son de CDN: Dynamic Imaging Service revalida las imágenes después de 10 minutos.
Consulte también:
Para obtener más ayuda sobre las URL de transformación de imágenes, los formatos modernos, el proyecto de la comunidad y la solución de problemas, consulte Temas relacionados con Dynamic Imaging Service .
