Share
Al desarrollar o actualizar un sitio web, algunos de sus objetivos principales deberían ser brindar una experiencia de usuario final óptima y mejorar las conversiones de sitios web, ya que estas dos facetas son clave para impulsar los ingresos y mejorar los resultados de su empresa. Pero un problema que puede descubrir es que si bien su uso creciente de imágenes tiene como resultado un diseño más atractivo, podría afectar negativamente el rendimiento de su sitio web..
Hoy en día, las imágenes representan más del 60% del contenido descargado en una página web, por lo que la optimización de las imágenes puede producir mejoras significativas en el rendimiento. Sin embargo, la optimización de la imagen es tanto un arte como una ciencia, que requiere una evaluación cuidadosa de varios parámetros y un delicado equilibrio entre contenido, formato, calidad y dimensiones.
Ya sea que su aplicación web admita imágenes cargadas por el usuario, entregue imágenes estáticas o muestre imágenes de perfil de redes sociales, probablemente necesite manipularlas para que se ajusten al diseño gráfico de su sitio. En este tutorial, exploraremos las características que ofrece la solución integral de gestión de imagen y video basada en la nube de Cloudinary. Verá cómo puede ayudarlo a optimizar las imágenes y, en última instancia, a mejorar el rendimiento de su sitio web..
Los formatos de imagen pueden tener un impacto significativo en los tiempos de carga. Pero determinar manualmente el formato óptimo y la configuración del codificador para el contenido de cada imagen puede ser complejo e ineficiente.
Cloudinary determina y entrega dinámicamente cada imagen en el formato más eficiente, según el contenido de la imagen y el navegador de visualización. Las imágenes se pueden cargar a Cloudinary en varios formatos y convertir fácilmente a otros formatos. Por ejemplo, puede entregar automáticamente imágenes como WebP a Chrome o JPEG-XR a Internet Explorer. En algunos casos, se puede seleccionar PNG cuando necesite preservar la transparencia.
Hay muchas razones por las que puede querer cambiar el formato de la imagen entregada:
Para entregar imágenes en un formato diferente, simplemente especifique el nuevo formato como la extensión de archivo de la URL de entrega. Al usar los SDK de Cloudinary, puede especificar el nuevo formato como una extensión del nombre del recurso o usar el parámetro de formato.
Ejemplo:
Ver la demo.
Ajustar automáticamente la calidad de compresión
El ajuste preciso de la calidad de compresión y la configuración de codificación puede reducir significativamente el tamaño de los archivos sin una degradación notable en la calidad visual. Sin embargo, encontrar la configuración correcta para cada imagen es más complicado de lo que parece..
Cloudinary automatiza el tamaño del archivo frente a la calidad de la decisión de compensación. La calidad inteligente y los algoritmos de codificación de Cloudinary analizan cada imagen para encontrar el equilibrio óptimo y producen una imagen perceptualmente fina al tiempo que minimizan el tamaño del archivo. El análisis de cada imagen individualmente para encontrar el nivel de compresión óptimo y la configuración de codificación de la imagen permite un ajuste preciso del nivel de compresión complementado por el ajuste fino de la configuración de la codificación, y puede reducir significativamente el tamaño del archivo sin que se observe ninguna degradación al ojo humano.
Ejemplo:
 |  |
Ver la demo.
Puedes ver la transformación de la imagen aquí..
La entrega de imágenes en dimensiones mayores que el tamaño de pantalla requerido utiliza un ancho de banda innecesario y ralentiza la carga de la página. Pero la creación manual de múltiples versiones de cada imagen para adaptarse a varias resoluciones de pantalla puede requerir muchos recursos. Cloudinary le permite escalar dinámicamente la resolución de la imagen para servir a la versión óptima que coincida con la resolución del dispositivo de cada usuario y las dimensiones de la ventana gráfica, sin entregar píxeles innecesarios.
Además, las imágenes a menudo requieren recorte para adaptarse a diseños sensibles y diversas dimensiones del dispositivo. El algoritmo de recorte compatible con el contenido de Cloudinary utiliza una combinación de heurísticas para detectar automáticamente la región de interés en cada imagen y luego recortarla sobre la marcha.
Estas capacidades de recorte inteligente aseguran que el enfoque de cada imagen se incluya en la imagen derivada resultante, no solo para fotos con caras, sino para cualquier tipo de contenido. Cada imagen se analiza individualmente para encontrar la región óptima para enfocar.
Imagen original:
Ejemplo de diferentes modos de cultivo:
Ver la demo.
Para ver la imagen a través de su URL de transformación, véala aquí.
Cloudinary le permite transformar fácilmente sus imágenes sobre la marcha a cualquier formato, estilo y dimensión requeridos, y también optimiza las imágenes para tener el tamaño de archivo mínimo para una experiencia de usuario mejorada y para ahorrar ancho de banda.
En el corazón de la solución Cloudinary se encuentra la capacidad de entregar imágenes mediante URL dinámicas a través de una red de entrega de contenido (CDN) mundial y rápida. La URL contiene el ID público de la imagen solicitada, más cualquier parámetro de transformación opcional. La ID pública es el identificador único de la imagen y se especifica al cargar la imagen en su cuenta de Cloudinary o se asigna automáticamente por Cloudinary.
Cualquier instrucción de transformación (manipulación) se puede agregar antes de la ID pública en la URL de entrega. Cuando se accede por primera vez a la URL, la imagen derivada se crea sobre la marcha y se entrega a su usuario. La imagen derivada también se almacena en caché en el CDN y está disponible de inmediato para todos los usuarios subsiguientes que soliciten la misma imagen.
Estos consejos son solo algunas de las formas en que Cloudinary puede ayudarlo a optimizar las imágenes para su sitio web, a fin de mejorar el rendimiento y la experiencia del usuario final..
El sitio web de Cloudinary proporciona documentación detallada sobre cómo funcionan estas características. También puede encontrar publicaciones en el blog que expliquen los 10 errores principales que puede estar cometiendo al manejar las imágenes del sitio web y cómo resolverlas, así como también cómo analizar las imágenes del sitio web para mejorar la velocidad y reducir los costos de ancho de banda..
Accentsconagua
