homefinance blog
Los CDN de imágenes (redes de entrega de contenido) se encuentran entre las mejores herramientas disponibles para la optimización de imágenes.Las imágenes no opolectadas y pesadas son una de las principales razones por las cuales su sitio puede ser lento, lo que conduce a una mala experiencia del usuario.Para evitar problemas de rendimiento, ¿por qué no intentar implementar una imagen CDN?¡Según Web.dev, puede conducir a ahorros del 40-80% al tamaño de un archivo de imagen!
Ejemplos de transformaciones de imagen hechas por una imagen CDN – Fuente: Web.dev En esta publicación, aclaramos la diferencia clave entre un CDN de imagen y una tradicional.También explicamos cómo un CDN puede ayudar a optimizar la imagen.Como beneficio adicional, compartimos formas adicionales de preparar y optimizar las imágenes web usando Imagify.
¿Qué es un CDN para fotos? Un CDN para imágenes se especializa en optimizar, convertir y entregar imágenes en todo el mundo. Son como una red API que cambia las imágenes para distribuirlas más rápido de los servidores en la pantalla del visitante. Una imagen CDN disminuye la tarea útil de la imagen y envía instantáneamente imágenes optimizadas desde el punto de presencia (POP) al usuario. ¿Cuál es la diferencia entre un CDN tradicional y una imagen CDN? La principal diferencia entre un CDN de imagen y una tradicional es la capacidad de optimizar y transformar las imágenes sobre la marcha, en lugar de proporcionarlas como son. Un CDN tradicional memoriza en caché todos los elementos, como CSS, JS e imágenes, mientras que un CDN de imagen tiene un conjunto de características construidas dedicadas a imágenes: cortar, cambiar el tamaño, alinearse, girar, volcar, convertir a otro formato, Aplicar filtros, marcas de agua, etc. También detecta el dispositivo del usuario para transmitir el tamaño de imagen correcto en el móvil o el escritorio. CloudImage)
A CDN enfocado en imágenes las optimiza mientras procesa las solicitudes de los usuarios. Una imagen CDN establece automáticamente el tamaño de la imagen, los filtros y los acuáticos de agua utilizando cadenas de consulta de URL (también llamados parámetros). Por ejemplo, así es como muestra una URL de una imagen CDN:
Las cadenas de consulta para la URL de una imagen ejecutada a través de una imagen-fuente de CDN: Imagify una imagen CDN usa la imagen de URL para indicar opciones de optimización, como:
Que imagen subir
Formato (por ejemplo, JPG, PNG, WebP)
Tamaño y calidad (altura y peso, mejora, corte, alineación, rotación)
Reactividad: Servir un tamaño optimizado según la pantalla de usuario (iPhone o la computadora portátil ordinaria)
API de imagen intuitiva para crear variantes (marca de agua, corte inteligente, etc.)
Ejemplo de corte “inteligente” realizado por una imagen de CDN utilizando la inteligencia artificial
Para recordar: los CDN tradicionales también ofrecen imágenes a través de su sistema, pero no las cambian. Una imagen CDN optimiza y procesa imágenes de tiempo real para proporcionar al usuario aún más rápido. Proporcione imágenes más rápido dependiendo del dispositivo y la ubicación del usuario. Al igual que un CDN tradicional, una imagen CDN le da al usuario la imagen y la memoriza en caché en sus servidores para futuras solicitudes. Todo el proceso se basa en 4 pasos principales: Cómo funciona una imagen CDN: 4 pasos principales – Fuente: Imagify  Carga: una sola versión de una imagen, en lugar de almacenar varias versiones de la misma imagen para dispositivos móviles, de escritorio y tableta. Almacene: las imágenes se almacenan en la nube y cuando llega una solicitud de usuario, la imagen CDN crea automáticamente la imagen para el dispositivo correcto. Cuando la misma imagen se solicita nuevamente del mismo tipo de dispositivo, CDN ya la almacena en caché. Esto ahorra mucho tiempo, y la imagen se volverá aún más rápida esta vez. Transformación: utilizando la URL de la imagen, una imagen CDN aplica nuevos parámetros para optimizar la imagen con operaciones y filtros. Por ejemplo, este es el tipo de reglas y configuraciones que puede aplicar con CloudImage: Ejemplo de transformación preestablecida usando CloudImage – Fuente: CloudImage Dashboard Entrega: la nueva imagen optimizada se entrega al usuario final a través del servidor más cercano (también llamado punto de presencia).  En conclusión, un CDN de imagen puede transformar, optimizar y almacenar toda la biblioteca de imágenes en caché para entregar el contenido más rápido a los usuarios de todo el mundo. ¿Sabía que todas esas optimizaciones y transformaciones también se benefician de su velocidad y SEO? Esto nos lleva a nuestra siguiente sección: por qué debe usar una imagen CDN para optimizar la imagen. Por qué usar una imagen CDN para optimizar las imágenes cuando se trata de optimización de imágenes, los CDN de imágenes tienen beneficios importantes: 1. Mejorar el tiempo de carga Comprimir y cambiar el tamaño de las imágenes con una imagen CDN reducirá el tamaño del archivo, lo que dará como resultado un sitio más rápido. Los CDN de imágenes le permiten comprimir, cambiar el tamaño y optimizar las imágenes en tiempo real: configure la configuración principal y obtenga el archivo más pequeño disponible en función del contenido y el dispositivo, sin comprometer la calidad. Por ejemplo, aquí están las operaciones disponibles para cambiar el tamaño de la imagen para CloudImage: Operaciones disponibles para el cambio de tamaño de imagen: CloudImage Además, los CDN de imágenes mejoran los tiempos de carga, ya que pueden convertirse de JPEG o PNG en formatos de nueva generación, como WebP o AVIF. Los dos formatos más recientes reducen en gran medida el tamaño del archivo de una imagen y aceleran su sitio para obtener un estudio de Google. La siguiente tabla muestra que la conversión de una imagen en la webp redujo el tamaño del archivo en un 25%. Conversión de una imagen en WebP para ahorrar hasta un 25% – Fuente: Desarrolladores de Google
|
Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.