Volver al centro de aprendizaje

¿Qué es la optimización de imágenes?

La optimización de imágenes se refiere al proceso de modificar y entregar imágenes de alta calidad en el formato, la dimensión y la resolución óptimos para el dispositivo que accede a ellas, todo ello manteniendo el tamaño de archivo más pequeño posible sin que se produzca una degradación perceptible de la imagen.

¿Suena como una tarea imposible? Tal vez, pero para entregar un sitio web receptivo, por desgracia es difícil evitarlo. Hoy, los usuarios visitan tu sitio desde muchas fuentes diferentes, desde dispositivos móviles hasta computadoras personales, usando una variedad de navegadores. Los usuarios exigen experiencias receptivas, y la optimización de imágenes es una parte crucial de este proceso, ya que puede afectar la velocidad de distribución, así como el rendimiento de tu sitio en las búsquedas.

Por qué es importante la optimización de imágenes

La optimización de imágenes es importante para una buena experiencia del espectador, pero no es obligatoria. Como mínimo, debes elegir un formato de imagen que muestre las imágenes correctamente sin importar el dispositivo en el que se vean. Además, debes tener en cuenta aspectos como la resolución y la codificación de la imagen, ambos afectan la calidad y el tamaño de las imágenes. 

Además de transformar físicamente tus imágenes, debes considerar aspectos como el nombre del archivo, las etiquetas ALT y los metadatos de la imagen para ayudar a mejorar la optimización para motores de búsqueda (SEO).

Aunque puedes encargarte de esta tarea por tu cuenta con herramientas externas, se vuelve más difícil, costosa y que consume mucho tiempo a medida que tu negocio crece y necesitas escalar. (¡Sin juego de palabras!) Una solución de optimización de imágenes, especialmente una basada en edge, puede ayudarte a automatizar y escalar el trabajo necesario para optimizar las imágenes en tu sitio web, al mismo tiempo que reduce o elimina los gastos de cómputo, sin mencionar el costo de administrar esto manualmente. Cuando se combina con un servicio de Red de distribución de contenido, puedes almacenar en caché las imágenes optimizadas y agilizar su distribución al espectador.

Cómo funciona la optimización de imágenes

Las soluciones de optimización de imágenes te permiten cargar una imagen de alta resolución y luego definir diferentes configuraciones para ofrecerla a los visitantes del sitio de la manera más eficiente. Las soluciones de optimización de imágenes suelen estar disponibles como complementos o extensiones para tu sistema de gestión de contenido, o como servicios independientes, tanto en las instalaciones como en línea. Estas soluciones te permiten especificar la configuración de transformación y luego aplicar esa configuración del lado del servidor antes de entregar la imagen.

Algunas prácticas comunes al optimizar imágenes para su distribución son:

  • Usar la detección de dispositivos sobre la marcha para entregar el archivo de imagen óptimo según el tamaño de pantalla del usuario.

  • Compresión de imágenes para optimizar la distribución según la plataforma, la conectividad, la compatibilidad y más

  • Escalar imágenes para ajustarlas a un tamaño específico

Al cargar tu sitio web y enviar una solicitud de la imagen, el cliente web del usuario usará el CSS del sitio web para determinar qué versión de la imagen es adecuada para el dispositivo. Enviará una solicitud para una imagen específica con esos parámetros, y la solución de optimización de imágenes aplicará la transformación antes de poner la imagen optimizada a disposición.

En lugar de intentar predecir cada dispositivo que podría acceder a tu sitio y definir parámetro para cada uno de esos escenarios, puedes usar las API de JavaScript para detectar mediante programación detalles sobre el navegador del cliente y el número de versión, y realizar la solicitud de la transformación más óptima según corresponda.

Puedes combinar una solución de optimización de imágenes con un servicio de Red de distribución de contenido para agilizar aún más la distribución de imágenes optimizadas. Después de que se atiende la primera solicitud de la imagen, tanto la imagen original como la imagen transformada se almacenan en caché en el servidor de la Red de distribución de contenido, y las solicitudes futuras para las mismas transformaciones se atienden directamente desde la caché sin necesidad de modificación. Las solicitudes de distintas transformaciones se sirven con la imagen original en caché, lo que reduce el tráfico y la carga de trabajo en tu origen.

Beneficios de las soluciones de optimización de imágenes

Usar una solución de optimización de imágenes te ayuda a ahorrar tiempo, reducir los costos de infraestructura, mejorar la experiencia del usuario y optimizar tu SEO.

1. Optimiza flujos de trabajo

Dependiendo de la cantidad de imágenes en tu sitio, optimizarlas y mantenerlas puede ser una tarea tediosa y que consume mucho tiempo. Hoy en día, es común que una sola imagen se transforme en 10 o más versiones, y que cada una dé como resultado la creación de un archivo independiente para las resoluciones de pantalla más populares. Una solución de optimización de imágenes te ahorra tiempo al crear las imágenes que necesitas a partir de un solo archivo fuente de alta calidad. Al incorporar una solución de optimización de imágenes en tu flujo de trabajo, puedes hacer que esto suceda automáticamente. ¡Ya no tendrás que crear manualmente varios archivos de imagen ni usar scripts de preprocesamiento!

2. Ahorra dinero

Usar una solución de optimización de imágenes también ayuda a ahorrar en costos de infraestructura porque no necesitas almacenar varias versiones de cada archivo en el servidor ni gastar dinero en recursos de cómputo para realizar las transformaciones. Usar un servicio de Red de distribución de contenido te ayuda a ahorrar aún más al reducir el costo de salida al servir imágenes desde la caché y escalar conforme crecen tus necesidades.

3. Distribución más rápida

El mayor beneficio de usar una solución de optimización de imágenes con una Red de distribución de contenido es la velocidad de distribución. Una Red de distribución de contenido te permite entregar imágenes desde la caché, más cerca del usuario, acelerando el tiempo de distribución y, por lo tanto, el tiempo de carga del sitio.

El tiempo que tarda en entregarse el sitio no solo es importante para la experiencia general del usuario, también afecta el SEO del sitio. Los motores de búsqueda como Google rastrean el sitio y toman la velocidad de carga como uno de los factores para clasificarlo en los resultados de búsqueda. Si las imágenes hacen que el sitio tarde en cargar, el motor de búsqueda podría darle menor prioridad por eso. Tener imágenes optimizadas le da al usuario la imagen correcta para su dispositivo, se renderiza más rápido y, por lo tanto, mejora el SEO.

Al adoptar prácticas de optimización de imágenes, las empresas pueden mejorar significativamente los tiempos de carga del sitio web, reducir la carga en el origen y, en última instancia, mejorar la satisfacción del usuario. La correlación positiva entre las imágenes optimizadas y las clasificaciones en los motores de búsqueda subraya aún más la importancia. Dado que los usuarios exigen experiencias en línea cada vez más rápidas y fluidas, la optimización de imágenes se convierte en una parte integral de mantener un edge en el entorno virtual.

Para obtener información adicional sobre la optimización de imágenes, consulta estos recursos originales:

Tutorial de Fastly Image Optimizer https://docs.fastly.com/es-latam/tutorials/fastly-io

¿Estás listo para empezar?

Ponte en contacto con nosotros
Habla con un experto