Módulo 2: Aumentar la velocidad de los sitios web móviles

2.3.3 Optimización de imágenes

Las imágenes suelen representar la mayoría de bytes descargados en una página web y ocupan una cantidad considerable de espacio visual. Como resultado, optimizar imágenes suele dar lugar a importantes mejoras en el rendimiento y a un gran ahorro de bytes en el sitio web: cuanto menor sea el número de bytes que tiene que descargar el navegador, menor será la carga sobre el ancho de banda del cliente. Además, el navegador podrá descargar y renderizar más rápidamente el contenido útil en la pantalla.

La optimización de imágenes es un arte y una ciencia al mismo tiempo: un arte porque no existe una respuesta definitiva sobre el mejor método de compresión de una imagen individual, y una ciencia porque existen muchos algoritmos y técnicas bien desarrollados que pueden reducir considerablemente el tamaño de una imagen. Encontrar la configuración óptima para la imagen requiere un análisis minucioso de muchos factores: opciones de formato, contenido de datos codificados, calidad, dimensiones de píxeles, etc.

A continuación, te indicamos algunos consejos y técnicas que debes tener en cuenta cuando optimices imágenes:

  • Utiliza formatos de vectores: las imágenes vectoriales tienen una resolución y escala independientes, por lo que son ideales para un mundo en el que conviven varios dispositivos e impera una elevada resolución.
  • Reduce y comprime recursos SVG: el marcado XML que generan la mayoría de aplicaciones de dibujo suele contener metadatos innecesarios que se pueden eliminar. Asegúrate de que los servidores se han configurado para aplicar la compresión GZIP a los recursos SVG.
  • Selecciona el mejor formato de imagen de trama: determina los requisitos funcionales y elige el que mejor se adapte a cada recurso.
  • Experimenta con la configuración de calidad óptima para formatos de trama: no tengas miedo de disminuir la configuración de calidad, ya que los resultados suelen ser muy buenos y se ahorran muchos bytes.
  • Elimina metadatos de imágenes innecesarios: muchas imágenes de trama contienen metadatos innecesarios acerca del recurso, como información geográfica, información de la cámara, etc. Utiliza las herramientas adecuadas para eliminar estos datos.
  • Proporciona imágenes ajustadas: cambia el tamaño de las imágenes en el servidor y asegúrate de que el tamaño de visualización es lo más parecido posible a la dimensión natural de la imagen. Presta especial atención a las imágenes grandes, ya que representan la mayor carga adicional cuando se modifica su tamaño.
  • Automatiza todo lo posible: invierte en infraestructura y herramientas automatizadas para garantizar que todos los recursos de imágenes se optimizan siempre.

En esta página encontrará más información.

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?

¿Necesitas más ayuda?

Inicia sesión si quieres ver otras opciones de asistencia para solucionar tu problema.