Imágenes resueltas: Cloudinary es una ventanilla única para desarrolladores web

A medida que desarrollamos proyectos web, siempre queremos mejorar la experiencia de nuestros usuarios finales. Queremos que los sitios sean rápidos y usen un ancho de banda mínimo, al mismo tiempo que sean visualmente impresionantes. El uso de imágenes es la clave para hacer que los sitios sean visualmente atractivos, pero en la mayoría de los casos no se cargan rápidamente y agregan un peso innecesario al sitio. Pero este no tiene por qué ser el caso. Cloudinary ofrece la solución perfecta para administrar imágenes, lo que le ayuda a mantener ese delicado equilibrio entre el tamaño y la calidad del archivo.

Imágenes: tamaños, resoluciones, peso, enfoque, formato

Las imágenes siempre han sido complicadas de gestionar. Este fue el caso hace años cuando estábamos desarrollando resoluciones fijas que se basaban en un compromiso común. Al principio diseñamos para un ancho de 800 píxeles, luego para un ancho de 1.024 píxeles, mucho antes de que existiera la web móvil.

La evolución de los dispositivos móviles nos ha enfrentado a una serie de complejidades adicionales. Las conexiones de Internet móvil son impredecibles, rápidas en algunas áreas, pero lentas y limitadas en otras. Para garantizar un rendimiento aceptable de nuestro sitio en teléfonos inteligentes, los archivos de tamaño pequeño son una necesidad.

Los dispositivos móviles también vienen en una gran cantidad de resoluciones de pantalla y densidades de píxeles. Debemos asegurarnos de poder entregar una variedad de tamaños de imagen a los dispositivos adecuados, al tiempo que nos aseguramos de que se vean nítidos en todos los dispositivos.

Pero el móvil no es el único problema. Algunos navegadores todavía ofrecen un soporte mediocre para formatos modernos. Como resultado, nos hemos visto obligados a ceñirnos a formatos más comunes, en lugar de aprovechar los beneficios de los formatos modernos como WebP, BPG y FLIF.

Otro problema al que nos enfrentamos en la gestión de imágenes es que al reducir la resolución de una imagen nos vemos obligados a cortar el contenido para mantener el punto de enfoque principal.

Debido a estas complejidades, era demasiado difícil, consumía mucho tiempo y recursos para servir diferentes formatos a navegadores específicos o recortar imágenes para mantener el enfoque en su lugar.

Cloudinary resuelve los desafíos de la gestión de imágenes

Pero, ¿y si hubiera un servicio que facilitara todas estas transformaciones? Imagine solo tener que cargar un único archivo de imagen de alta resolución, que el servicio usaría para generar todas las resoluciones, tamaños, densidades, formatos, pesos y recortes según sea necesario, sobre la marcha. Aún mejor: se ejecutará automáticamente, sin que tenga que realizar ajustes manualmente.

Este servicio existe y proviene de Cloudinary, el conocido sistema de gestión de imágenes y videos basado en la nube. Las actualizaciones recientes de la solución le permiten utilizar sus algoritmos únicos para aprovechar la automatización completa. A continuación, se muestran algunas de las nuevas funciones disponibles a través de Cloudinary:

Recorte automático basado en contenido

El nuevo parámetro g_auto asegura que las imágenes se recorten de acuerdo con su elemento de contenido principal. Con detección de rostros y un algoritmo de recorte basado en contenido, Cloudinary garantiza que nunca perderá el enfoque de sus imágenes.

No son los mejores ejemplos de cultivos conscientes del contenido. (Fotos: Cloudinary)

Cultivos con reconocimiento de contenido realizados automáticamente mediante Cloudinary. (Fotos: Cloudinary)

Codificación inteligente basada en contenido

El parámetro q_auto es igualmente poderoso. Reducir el tamaño del archivo es un proceso que implica decisiones. ¿Cuánta claridad, nitidez y calidad de imagen está dispuesto a perder? ¿Qué puede aceptar o, lo que es más importante, qué nivel de calidad esperan sus visitantes?

la respuesta es siempre la misma. Desea mantener la calidad de imagen lo más alta posible y el tamaño del archivo lo más pequeño posible. Cloudinary ahora se encarga de eso por usted. Automatiza la decisión de compensación de tamaño de archivo versus calidad, sobre la marcha, mediante el uso de métricas perceptivas y heurísticas que ajustan la configuración de codificación, luego selecciona el formato de imagen apropiado.

Con Cloudinary, se le garantizará que siempre tendrá la mejor calidad con el menor peso entregado a los visitantes de su sitio.

Selección de formato dinámico

Además de los efectos de la codificación basada en el contenido, Cloudinary ahora ofrece una selección de formato dinámico. Este algoritmo hace dos cosas: busca las capacidades del navegador del visitante y luego entrega un formato que solo puede ser compatible con ese navegador específico, como WebP en Chrome. Además, el parámetro f_auto analiza el contenido de la imagen para seleccionar generalmente el formato apropiado.

Si carga un archivo como este como JPEG, Cloudinary se asegurará de que se envíe como PNG. (Ilustración: Cloudinary)

Imágenes de respuesta automática

Las imágenes receptivas han creado aún más desafíos para los desarrolladores. Considere cuántos dispositivos diferentes, de diferentes resoluciones, hay en el mercado ahora. Luego, debe considerar lidiar con el cambio de orientación cuando los dispositivos se mueven horizontal o verticalmente. Esto requiere la creación de múltiples versiones de la misma imagen, para garantizar la calidad visual independientemente del dispositivo o la pantalla.

Cloudinary ofrece nuevos parámetros w_auto y dpr_auto hacen el trabajo por usted. El servicio simplifica la entrega de imágenes dinámicas para sitios web receptivos en retina y pantallas regulares, al automatizar la decisión del valor del ancho de la imagen y la relación de píxeles del dispositivo (DPR) según el dispositivo de visualización, el tamaño de la pantalla y el diseño. Todo esto se deriva de la única imagen de alta resolución que cargó.

Para obtener más detalles sobre las nuevas funciones de Cloudinary, lea esto entrada en el blog. Le brinda fragmentos de código e información detallada sobre los procesos detrás de la cortina. Para probar las funciones y ver qué pueden hacer, visite Cloudinary página de demostración.

Descargo de responsabilidad: este artículo está patrocinado por Cloudinary.