DocumentaciónAEMGuía del usuario

[AEM Assets]{class="badge positive" title="(Se aplica a los AEM Assets)."}

Práctica recomendada para optimizar la calidad de las imágenes best-practices-for-optimizing-the-quality-of-your-images

Última actualización: 29 de septiembre de 2026
  • Se aplica a:
  • Experience Manager as a Cloud Service

Creado para:

  • Usuario
TIP
¿Es su primera vez con Dynamic Media? Para obtener información general rápida y profesional sobre Dynamic Media, consulte Trabajar con Dynamic Media.

Adobe Experience Manager proporciona más de 100 comandos de entrega de imágenes de Dynamic Media para ajustar, optimizar y procesar imágenes. Este amplio conjunto de comandos permite controlar casi todos los aspectos del procesamiento y el servicio de una imagen, desde la resolución y la compresión hasta el enfoque y la renderización del color.

La optimización de la calidad de la imagen es un proceso iterativo que a veces requiere mucho tiempo, porque varios factores distintos contribuyen a obtener resultados aceptables, como la resolución, el nivel de compresión, el formato de archivo, el enfoque y la precisión de color. El resultado también es en parte subjetivo, ya que las personas perciben la calidad de la imagen de forma diferente y las condiciones de visualización varían de una pantalla, explorador o dispositivo a otro. Debido a esta variabilidad, la experimentación estructurada es esencial: ajustar metódicamente una variable a la vez y comparar la salida procesada es la ruta más confiable hacia una calidad consistente.

Las siguientes prácticas recomendadas optimizan el proceso y ofrecen resultados de alta calidad de forma eficaz mediante un conjunto de comandos principales y técnicas de eficacia probada. Su aplicación va más allá de la estética: las imágenes optimizadas correctamente reducen el tamaño del archivo y el tiempo de carga, lo que mejora el rendimiento de la página, la experiencia del usuario y la entrega en toda la gama de dispositivos y condiciones de red.

Factores Clave Que Afectan A La Calidad De Imagen

  • Resolución y dimensiones: Haga coincidir las dimensiones en píxeles entregadas con el tamaño de visualización real para evitar artefactos innecesarios de escalado ascendente o descendente.
  • Compresión: equilibra el tamaño del archivo con la pérdida de calidad visible, ya que la compresión agresiva reduce el ancho de banda, pero puede introducir artefactos.
  • Formato de archivo: seleccione el formato que mejor se adapte al contenido de la imagen y al dispositivo de destino para equilibrar la calidad y la eficacia de la entrega.
  • Enfoque: aplique el enfoque para contrarrestar el suavizado que se produce durante el cambio de tamaño y que restaura el detalle percibido.
  • Procesamiento de color: mantenga un color preciso para que las imágenes se muestren coherentes en diferentes pantallas y entornos de visualización.

Enfoque recomendado

  1. Establecer una línea de base. Procese una imagen con la configuración predeterminada para tener un punto de referencia para la comparación.
  2. Ajustar una variable a la vez. Cambie un solo comando o parámetro y, a continuación, evalúe el resultado, ya que el aislamiento de variables deja claro qué ajuste produjo qué efecto.
  3. Comparar visualmente la salida procesada. Como la calidad de la imagen es en parte subjetiva, revise los resultados en paralelo en dispositivos y pantallas representativos.
  4. Equilibrar la calidad con el rendimiento. Confirme que las mejoras de calidad no aumentan el tamaño del archivo hasta el punto de que el tiempo de carga de la página y la entrega se vean afectados.
  5. Estandarizar la configuración correcta. Una vez identificadas las combinaciones de comandos que producen resultados coherentes, vuelva a utilizarlas para optimizar la futura optimización.

Al combinar estos comandos esenciales con la experimentación estructurada, se logra una entrega de imágenes de alta calidad y rendimiento de forma rápida y repetida en todos los recursos de Dynamic Media.

Habilitar imágenes inteligentes en Dynamic Media bp-enable-smart-imaging

Imágenes inteligentes:

  • Si habilita Imágenes inteligentes en Dynamic Media, podrá optimizar automáticamente la imagen formato, tamaño y calidad según las capacidades del explorador del cliente. Imágenes inteligentes realiza esta negociación de formato en cada solicitud, proporcionando la imagen más eficiente que admite un navegador determinado, de modo que las páginas se carguen más rápido y consuman menos ancho de banda.
    Para obtener más información, ve a Imágenes inteligentes.
  • Mejora el rendimiento de la entrega de imágenes al ajustar dinámicamente estos parámetros, ya que el envío del archivo adecuado más pequeño para cada explorador reduce la carga útil transferida y mejora los tiempos de carga de página.
  • Los administradores y desarrolladores pueden evaluar las imágenes inteligentes con la herramienta de autoevaluación Snapshot.

Formatos de imagen:

  • Evite utilizar comandos explícitos fmt=webp (WebP) o fmt=avif (AVIF) en una dirección URL a menos que sea específicamente necesario para un caso de uso. Al codificar un formato en la dirección URL, se anula la negociación automática y se puede evitar que las imágenes inteligentes proporcionen el formato óptimo a los exploradores que admiten una alternativa más eficaz.
  • Imágenes inteligentes selecciona automáticamente el mejor formato para cada solicitud. Esto reduce los bytes transferidos y produce un aumento óptimo del ancho de banda.

Comportamiento predeterminado:

  • Cuando no se especifica ningún comando de formato en la dirección URL y Smart Imaging no está habilitado, el valor predeterminado de la entrega de imágenes de Dynamic Media es el formato JPEG. Como resultado, los formatos de próxima generación como WebP y AVIF no se proporcionan automáticamente hasta que se habilite Smart Imaging.

Al tomar decisiones informadas sobre los formatos de imagen y habilitar Imágenes inteligentes, mejora directamente el rendimiento de entrega y la experiencia del usuario.

Prácticas recomendadas para seleccionar la imagen de origen bp-select-source-image

Consideraciones esenciales para trabajar con imágenes de origen:

  • Formato de imagen Source:

    • Al usar formatos sin pérdida, PNG (Portable Network Graphics), TIFF (Tagged Image File Format) o PSD (Photoshop Document), se mantiene alta la calidad de la imagen y se eliminan los defectos de compresión, las distorsiones visibles que se producen con los formatos con pérdida, como JPEG.
    • Estos formatos conservan todos los datos de píxeles originales. Esto los hace ideales para editar, retocar y volver a guardar de forma repetida, ya que no se pierde calidad cada vez que se procesa el archivo.

  • Tamaño de imagen de Source:

    • Comenzar con una imagen de alta resolución proporciona más detalles y mayor flexibilidad, ya que la ampliación de una imagen pequeña no puede recuperar detalles que nunca se capturaron.
    • Cuando es necesario mostrar las imágenes en diferentes tamaños (por ejemplo, en distintos dispositivos o resoluciones de pantalla), una imagen de origen más grande permite un mejor escalado y resultados más nítidos en cada dimensión de destino.
    • En el caso de las imágenes compatibles con el zoom, como las fotos de productos en las que los clientes inspeccionan los detalles finos, apunte a dimensiones de alrededor de 2.000 píxeles o más en el lado más largo.
    • Los logotipos o banners que no requieran zoom pueden cargarse en el tamaño más grande necesario para el uso previsto.

La toma de estas decisiones en el nivel de origen determina directamente la calidad del contenido visual final, ya que cada paso de redimensionado, recorte y compresión posterior hereda las fortalezas o debilidades del archivo original.

Prácticas recomendadas para el tamaño de imagen best-practices-for-image-size

La reducción dinámica del tamaño de la imagen es una de las tareas más comunes en la entrega de imágenes. Implica especificar las dimensiones de destino y, opcionalmente, seleccionar qué modo de disminución de resolución se utiliza para reducir la escala de la imagen. El patrón de URL de prácticas recomendadas recomendado es &wid=<value>&hei=<value>&resMode=sharp2 (o &hei=<value>&resMode=sharp2 cuando solo se establece la altura), que ofrece la máxima calidad visual para las imágenes cuyo tamaño se ha cambiado.

Parámetros de tamaño

Para cambiar el tamaño de la imagen, use &wid=<value> y &hei=<value>:

  • &wid=<value> establece el ancho de la imagen.
  • &hei=<value> establece el alto de la imagen.
  • Cuando sólo se especifica una dimensión, estos parámetros calculan automáticamente la otra dimensión de acuerdo con la relación de aspecto de la imagen, conservando las proporciones originales y evitando la distorsión.

Modo de disminución de resolución (resMode)

&resMode=<value> controla el algoritmo utilizado para la disminución de resolución: el proceso de reducir las dimensiones en píxeles de una imagen. La elección del algoritmo afecta directamente a la nitidez y calidad de la imagen escalada final.

  • Comenzar con &resMode=sharp2. Este valor proporciona la mejor calidad de imagen porque conserva el detalle del borde y la textura fina al reducir el tamaño de las imágenes, lo que produce resultados nítidos y sin artefactos.
  • &resMode=bilin (bilineal) es más rápido, pero como el promedio de píxeles es más sencillo, produce con frecuencia defectos de solapamiento: bordes irregulares visibles, patrones muaré y pérdida de detalle. Como resultado, bilin intercambia la calidad de la imagen por la velocidad de procesamiento.

A diferencia de bilin, el modo sharp2 da prioridad a la fidelidad visual, lo que lo convierte en la opción preferida para ofrecer imágenes con tamaño redimensionado de alta calidad.

Práctica recomendada

Como práctica recomendada para el tamaño de imagen, use &wid=<value>&hei=<value>&resMode=sharp2 o &hei=<value>&resMode=sharp2. Esta combinación establece las dimensiones de destino, mantiene la relación de aspecto correcta y aplica el algoritmo de disminución de resolución de mayor calidad.

Prácticas recomendadas para el enfoque de imágenes best-practices-for-image-sharpening

El enfoque de imágenes es el aspecto más complejo del control de imágenes en su sitio web y donde se cometen muchos errores. Para obtener más información sobre cómo funcionan el enfoque y la máscara de enfoque en Experience Manager, consulte los siguientes recursos útiles:

En Experience Manager, puede enfocar las imágenes durante la ingesta, la entrega o ambas cosas. Se recomienda enfocar las imágenes con un solo método, no con ambos. El enfoque de imágenes en el envío a través de una dirección URL ofrece los mejores resultados en la mayoría de los flujos de trabajo, ya que le permite ajustar el enfoque al tamaño procesado final en lugar de hornearlo en el recurso ingerido.

Existen dos métodos de enfoque de imagen que puede utilizar:

  • Enfoque simple (&op_sharpen): similar al filtro de enfoque de Adobe Photoshop, aplica un enfoque básico tras el cambio de tamaño dinámico. Este método no se puede configurar por el usuario; evite utilizar &op_sharpen a menos que sea necesario.

  • Máscara de enfoque (&op_USM): la máscara de enfoque es un filtro de enfoque estándar del sector que aumenta el contraste del borde para que una imagen parezca más nítida. La práctica recomendada es enfocar las imágenes con máscara de enfoque siguiendo las directrices que se indican a continuación. El enmascaramiento de enfoque permite controlar los tres parámetros siguientes:

    • &op_sharpen=cantidad,radio,umbral

      • importe (0-5, intensidad del efecto.)
      • radio (0-250, ancho de las “líneas de enfoque” dibujadas alrededor del objeto enfocado, medido en píxeles.)

      Los parámetros radius y amount tienen efectos opuestos: como reducir el radio debilita el efecto, puede compensarlo aumentando la cantidad. El radio permite un control más preciso porque un valor más bajo enfoca sólo los píxeles del borde, mientras que un valor más alto enfoca una banda más ancha de píxeles, produciendo un halo más pronunciado.

      • umbral (0-255, sensibilidad del efecto.)

      Este parámetro determina la diferencia entre los píxeles enfocados y el área circundante antes de que se consideren píxeles de borde y el filtro los enfoque. El parámetro threshold ayuda a evitar áreas de enfoque excesivo con colores similares, como los tonos de piel. Por ejemplo, un valor de umbral de 12 ignora las ligeras variaciones en el brillo del tono de la piel para evitar agregar “ruido”, a la vez que agrega contraste al borde de las áreas de alto contraste, como cuando las pestañas tocan la piel.

      Para obtener más información sobre cómo configurar estos tres parámetros, incluidas las prácticas recomendadas para su uso con el filtro, consulte los siguientes recursos:

Se recomienda comenzar con el parámetro radio de la máscara de enfoque. Los ajustes de radio con los que puede empezar son los siguientes:

  • Sitio web: 0,2-0,3 píxeles
  • Impresión fotográfica (250-300 ppp): 0,3-0,5 píxeles
  • Impresión en offset (266-300 ppi): 0,7-1,0 píxeles
  • Impresión en lienzo (150 ppp): 1,5-2,0 píxeles

Siga estos pasos para perfeccionar el enfoque:

  1. Aumentar gradualmente la cantidad de 1,75 a 4.
  2. Si el enfoque sigue sin ser satisfactorio, aumente el radio con un punto decimal.
  3. Vuelva a ejecutar la cantidad de 1,75 a 4.
  4. Repita el proceso según sea necesario hasta que el resultado sea satisfactorio.

Deje el parámetro monocromo en 0.

Prácticas recomendadas para la compresión de JPEG (&qlt=) best-practices-for-jpef-compression-qlt

  • La configuración de prácticas recomendadas recomendada para la compresión de JPG es &qlt=85,0. Este valor equilibra la alta calidad visual con un tamaño de archivo controlado para la mayoría de las imágenes.

  • Este parámetro controla la calidad de codificación de JPG. Un valor más alto significa una imagen de mayor calidad pero un tamaño de archivo más grande; un valor más bajo significa una imagen de menor calidad pero un tamaño de archivo más pequeño. El intervalo válido es 0-100.

  • Para optimizar la calidad, no establezca el valor del parámetro en 100. La diferencia entre un ajuste de 90 o 95 y 100 es casi imperceptible para el ojo humano. Debido a esto, una configuración de 100 infla innecesariamente el tamaño del archivo de imagen sin una ganancia visual perceptible. Por lo tanto, para optimizar la calidad y evitar archivos de gran tamaño, establezca qlt= value en 90 o 95.

  • Para optimizar un archivo pequeño manteniendo la calidad de imagen en un nivel aceptable, establezca qlt= value en 80. Los valores por debajo de 70-75 introducen una degradación significativa y visible, como el bloqueo de artefactos, bandas y la pérdida de detalle fino, por lo que no se recomiendan para las imágenes de producción.

  • Como práctica recomendada general, establezca qlt= value en 85, que proporciona un punto medio confiable entre la calidad y el tamaño de archivo en una amplia gama de contenido de imagen.

  • Usando el indicador de croma enqlt=

    • El parámetro qlt= tiene una segunda configuración que controla la disminución de resolución de cromaticidad de RGB, una técnica de compresión que reduce la resolución de la información de color (croma) al tiempo que conserva el detalle de luminancia. Desactivar la disminución de resolución de on con el valor ,1 o off con el valor ,0.
    • Para la mayoría de los flujos de trabajo, el inicio con la disminución de resolución de cromaticidad de RGB desactivó 1} (,0). Este ajuste ofrece una mejor calidad de imagen porque conserva los datos de color de resolución completa, lo que es más importante en imágenes sintéticas con bordes nítidos, alto contraste y transiciones de color finas en las que, de lo contrario, los artefactos de disminución de resolución serían visibles.

Como práctica recomendada para la compresión de JPG, use &qlt=85,0.

Prácticas recomendadas para el tamaño de JPEG (&jpegSize=) best-practices-for-jpeg-sizing-jpegsize

El parámetro &jpegSize= garantiza que una imagen entregada no supere el tamaño máximo especificado, lo que la hace esencial para enviar imágenes de JPEG a dispositivos con memoria limitada. Al aplicar un límite superior al tamaño del archivo, se evita que las imágenes de gran tamaño sobrecarguen la memoria disponible en los clientes restringidos.

Cómo funciona &jpegSize=

  • Establezca &jpegSize= en kilobytes con la sintaxis jpegSize=<size_in_kilobytes>. Este valor define el tamaño máximo de archivo permitido para la entrega de imágenes.
  • &jpegSize= funciona en combinación con el parámetro JPEG quality (compression) &qlt=. Cuando la respuesta de JPEG en el valor &qlt= especificado no supera el límite jpegSize, la imagen se devuelve con &qlt= exactamente como se definió, conservando la calidad solicitada.
  • Si la imagen no supera el límite de jpegSize en el valor &qlt= especificado, el sistema reducirá &qlt= gradualmente hasta que la imagen se ajuste al tamaño máximo permitido. Como resultado, la calidad se reduce solo lo necesario para satisfacer la restricción de tamaño, lo que garantiza la compatibilidad con el dispositivo de destino.
  • Si el sistema determina que la imagen no se puede reducir para que se ajuste al tamaño máximo permitido, devolverá un error en lugar de enviar una imagen no compatible.

Práctica recomendada para dispositivos de memoria limitada

Se recomienda establecer &jpegSize= y emparejarlo con&qlt= al enviar imágenes de JPEG a dispositivos con memoria limitada. Esta combinación le permite especificar tanto la calidad del objetivo como el tamaño del techo, por lo que el sistema ofrece la máxima calidad posible que aún se ajusta a los límites de memoria del dispositivo.

Resumen de prácticas recomendadas best-practices-summary

Para lograr alta calidad de imagen con un tamaño de archivo pequeño, comience con la siguiente combinación recomendada de parámetros de servicio de imágenes de Dynamic Media:

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

Esta combinación produce resultados excelentes en la mayoría de las circunstancias y sirve como punto de referencia fiable para la mayoría de las imágenes. El valor op_usm aplica un enfoque de máscara de enfoque (USM), donde los parámetros controlan la cantidad, el radio, el umbral y el comportamiento monocromo del efecto.

Ajuste del enfoque (máscara de enfoque)

Si una imagen requiere una optimización adicional, ajuste los parámetros Máscara de enfoque (USM) gradualmente mediante el siguiente procedimiento:

  1. Establezca el radio en 0,2 o 0,3 como punto de partida.
  2. Aumente la cantidad de 1,75 a un máximo de 4, equivalente a 400% en Adobe Photoshop.
  3. Revise la imagen procesada para confirmar que se ha alcanzado el resultado deseado.
  4. Si el resultado de enfoque sigue sin ser satisfactorio, aumente el radio en incrementos decimales.
  5. Por cada incremento decimal del radio, reinicie la cantidad a 1,75 y aumente gradualmente a 4.
  6. Repita los pasos 4 y 5 hasta obtener el resultado deseado.

Aunque los valores anteriores representan un enfoque que los estudios creativos han validado, puede empezar con otros valores y seguir otras estrategias. Si los resultados son satisfactorios es una cuestión subjetiva, por lo que la experimentación iterativa estructurada es esencial para alcanzar el mejor equilibrio entre nitidez, calidad y tamaño de archivo para cada imagen.

Sugerencias de optimización del flujo de trabajo

A medida que experimenta, las siguientes sugerencias generales ayudan a optimizar el flujo de trabajo:

  • Parámetros de prueba en tiempo real en una dirección URL. Ajustar los valores directamente en la dirección URL permite previsualizar el efecto inmediatamente e iterar rápidamente.
  • Agrupar comandos en un ajuste preestablecido de imagen. Los comandos del servicio de imágenes de Dynamic Media se pueden agrupar en un ajuste preestablecido de imagen. Un ajuste preestablecido de imagen es un conjunto de macros de comando de URL asignadas a un nombre de ajuste preestablecido personalizado, como $thumb_low$ y &product_high$. La referencia al nombre del ajuste preestablecido personalizado en una ruta URL llama a estos ajustes preestablecidos. Esta funcionalidad le ayuda a administrar comandos y configuraciones de calidad para diferentes patrones de uso de imágenes en el sitio web, promueve una configuración coherente mediante la reutilización y acorta la longitud general de las direcciones URL.
  • Usar opciones de ajuste avanzadas en Experience Manager. Experience Manager también proporciona formas más avanzadas de ajustar la calidad de la imagen, como aplicar enfoque en la ingesta. Para ajustar y optimizar los resultados de procesamiento, los servicios de consultoría de Adobe pueden proporcionar prácticas recomendadas y insight personalizadas.
recommendation-more-help
experience-manager-cloud-service-help-main-toc