En las aplicaciones para dispositivos móviles, el tamaño de los archivos de artículos y las imágenes puede afectar al rendimiento. Recomendamos que evite el uso de archivos de artículo de gran tamaño si es posible y busque el equilibrio adecuado entre el tamaño de las imágenes y la calidad de la visualización.

Vídeo sobre la optimización de imágenes

Vídeo sobre la optimización de imágenes
En este vídeo, se describen cuatro métodos para mejorar el rendimiento de las aplicaciones de AEM Mobile (grabado en enero de 2017)

Optimización de imágenes de fondo de la colección

Le recomendamos que cree una imagen de fondo con las dimensiones del dispositivo de destino principal (como una imagen JPG de 1536 x 2048 para una aplicación de iPad vertical) y defina el nivel de calidad de una imagen JPG como medio.

La imagen de fondo se redimensiona para ocupar toda la pantalla y se centra, por lo que los bordes de la imagen se recortarán si las dimensiones de la imagen de fondo no coinciden con las dimensiones del dispositivo.

Puede utilizar un formato JPG o PNG para las imágenes de fondo. En la mayoría de los casos, el formato JPG da como resultado archivos de imagen más pequeños con una calidad aceptable.  

Sin embargo, puede utilizar el PNG en vez de JPG en las siguientes situaciones:

  • Si la imagen contiene transparencia (por ejemplo, si desea que el color de fondo se muestre).
  • Si la imagen incluye una paleta de colores más pequeña, las imágenes PNG se comprimen mejor que normalmente imágenes JPG.
  • Si la imagen incluye el texto o los objetos vectoriales, las imágenes PNG suelen ser más nítidas que las imágenes JPG.

 

Encuentre la combinación adecuada de tamaño y calidad. Por ejemplo, una imagen de fondo estándar debe ser de unos 200 KB, no 5 MB.

Página de navegación con una imagen de fondo

Optimización de imágenes de tarjeta y pancartas

Le recomendamos que cree las imágenes de tarjeta y pancarta en función de las dimensiones más amplias del área de visualización de imágenes de la tarjeta, y ajuste el nivel de calidad como medio. Encuentre la combinación adecuada de tamaño y calidad.

En nuestras pruebas, detectamos que utilizar imágenes JPG con mayores dimensiones y resultados de menor calidad se traduce en el equilibrio más eficaz entre tamaño y calidad en las aplicaciones para dispositivos móviles. Utilice imágenes PNG si la imagen contiene transparencia o texto.

Las imágenes de tarjeta se escalan, centran y recortan cuando se utilizan en una tarjeta. Así, la imagen puede diferir de la intención de su diseño. Diseñe ilustraciones con características prominentes cerca del centro de la imagen. Los cambios en el tamaño de la tarjeta, las dimensiones de esta y la proporción de la imagen de tarjeta influirán en la forma en que la imagen aparece en la tarjeta.

Página de exploración con tarjetas de anchura completa

Directrices para el uso de contenido HTML en artículos y pancartas dinámicas

Preste atención al tamaño de los archivos de imagen que incluye en los artículos HTML. Mientras que las imágenes grandes pueden verse bien en un navegador web, pueden afectar a la velocidad de descarga de los artículos en las aplicaciones para dispositivos móviles. Comprima las imágenes. Busque los ajustes de compresión adecuados que mostrarán imágenes nítidas en los dispositivos de destino.

Si utiliza el Article Packager de AEM Mobile para crear artículos HTML o pancartas dinámicas, tenga en cuenta que, al arrastrar y soltar la carpeta de archivos HTML en el Packager, el archivo del artículo resultante incluirá todos los archivos de esas carpetas, aunque no se utilicen los elementos. Asegúrese de que racionaliza sus archivos HTML antes de generar el archivo del artículo. Por ejemplo, si se incluyen varias instancias de la misma imagen, como PSD, JPG y PNG, asegúrese de quitar cualquier imagen que no se utilice en el archivo HTML.

Si utiliza un sistema de gestión de contenido (CMS) para crear los archivos del artículo, asegúrese de que los archivos de los artículos no incluyen imágenes excesivamente grandes o elementos no utilizados.

Para obtener más información, consulte Creación de artículos HTML para AEM Mobile.

Imágenes utilizadas en artículos basados en InDesign

Redimensione u optimice los archivos de vídeo incrustados, o bien considere la emisión de los vídeos en continuo, en lugar de incrustarlos.

Si utiliza InDesign para crear artículos de diseño fijo, todos los elementos no interactivos se vuelven a muestrear automáticamente cuando se exporta el artículo, por lo que no tiene que preocuparse por el uso de imágenes de gran tamaño en sus diseños de InDesign.

Para las superposiciones interactivas, es importante comprender la diferencia entre las de paso y las que se han vuelto a muestrear.

  • Las superposiciones que se han vuelto a muestrear (presentaciones, botones y marcos desplazables) se comprimen igual que el contenido no interactivo.
  • Las superposiciones de paso no se comprimen al exportar el artículo. Pasan en el tamaño que utilizó cuando las creó. Las superposiciones de paso incluyen archivos de vídeo y audio, secuencias de imágenes, imágenes de recorrido y zoom, y archivos de controlador de audio. Para las superposiciones de paso, preste atención al tamaño y la calidad de los archivos.

Para obtener más información, consulte Visión general de superposiciones interactivas.

Uso compartido de fuentes en artículos HTML

En lugar de cargar el mismo conjunto de fuentes para cada artículo HTML, se puede usar el portal de servicios bajo demanda para especificar las fuentes que se deben incluir en la aplicación. Podrá hacer clic en una opción para copiar una lista de fuentes utilizadas e incluirla en los archivos CSS o HTML. Al hacer referencia a las fuentes compartidas, puede reducir los tiempos de descarga de artículos HTML en la aplicación. Consulte los siguientes artículos:

Personalización de las aplicaciones AEM Mobile: uso de fuentes personalizadas

Creación de artículos HTML para AEM Mobile: uso de fuentes compartidas.

Uso compartido de elementos en artículos HTML

Si utiliza un sistema de gestión de contenido (CMS) para crear artículos en AEM Mobile, puede utilizar la API de contenido compartido para empaquetar el contenido que se comparte entre estos artículos. El uso compartido de archivos de imágenes, JavaScript y CSS constituye una excelente manera de mejorar el rendimiento de la aplicación y garantizar la coherencia. Consulte Trabajo con el contenido compartido mediante la On-Demand Services API.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea