Automatiza tus imágenes con Cloudinary -

Por (patrocinador) en

Si trabaja con imágenes en la web, habrá pasado más de unas pocas horas haciendo algunas de las siguientes cosas:

• Recortar y ajustar el tamaño de una imagen para que se ajuste a un diseño. Y luego volver a hacerlo cuando cambie el diseño. Y luego una y otra y otra vez.
• Aprovechando años de experiencia y profundosupersticionesconocimiento para seleccionarherejía-Configuraciones de compresión de imágenes basadas en mejores prácticas.
• Método de prueba y error para seleccionar un óptimonúmero entre 1 y 100calidad de la imagen”.

Estas tareas son tan antiguas como el imgelemento. ¡Pero la web es un ámbito dinámico y en constante cambio! Los desarrollos recientes en el diseño responsivo están agregando algunas novedades a nuestros flujos de trabajo:

• Generar versiones grandes, medianas y pequeñas de cada imagen de un sitio.
• Darse cuenta de que, en realidad, tener algunas tallas *entre* esas tallas también sería genial.
• Enamorarse de las posibilidades de la dirección de arte (y al mismo tiempo comprender que emplearla requiere aún más trabajo manual y aún más recursos por imagen).
• Preguntándose qué es un WebP y cómo se podría crear (sin importar implementar) uno.
• Sentirse abrumador por la complejidad y el tedio.

Nuestra práctica está superando nuestro conjunto de herramientas. Cloudinary está creando un mejor conjunto de herramientas. Los beneficios de poder hacer todo lo anterior dinámicamente usando un conjunto simple de parámetros de URL (¡visibles! ¡controlados por la versión!) son enormes. Yhoy, Cloudinary ha agregado algo más a la mezcla: inteligencia y automatización. Aquí está el argumento: usandoCloudinary , puedes generar una imagen canónica. Cloudinary , entonces, es inteligente en cuanto al contenido único de su imagen y los contextos variados de sus usuarios, y maneja todos los detalles de adaptar el contenido al contexto, proporcionando a cada usuario un recurso óptimo y automatizando las partes dolorosas de colocar imágenes en la web. .

¿Cómo? Analizamos algunas de las nuevas características.

Selección automática de formato

Empezaremos de forma sencilla. ¿Qué es lo primero que tienes que hacer al guardar una imagen para la web? Elige un formato. Anteriormente,Cloudinary podía volver a codificar imágenes sobre la marcha según la extensión del archivo proporcionado en la URL. Entonces podría cambiar esto:

https://demo-res.cloudinary.com/image/upload/sample.jpg

A esto:

https://demo-res.cloudinary.com/image/upload/sample.png

Y convertir un JPEG a PNG con el mínimo esfuerzo. *Ahora*, no tengo que pensar en formatos en absoluto. Esta URL…

https://demo-res.cloudinary.com/image/upload/f_auto/sample.jpg

…ofrece diferentes formatos a diferentes dispositivos, dependiendo de ambos:

1. El contenido de la imagen. ¿Se comprimirá mejor como PNG o, digamos, como JPEG?
2. The user’s specific context. Cutting-edge formats like Jpeg-XR and WebP aren’t yet supported everywhere. We only want to send them to devices which can render them, and fall back to universally-supported formats on devices that can’t.

Ok, now that we have a format, we need to pick a “quality”.

Automatic quality/compression settings

Ah, image “quality”. An integer between 1 and 100 that maps arbitrarily (and opaquely!) to dozens of low-level encoding settings; an input whose output varies wildly across formats, tools, and even types-of-images. There’s no way to predict how an image with a “quality” of 75 will look (or how well it will compress) without intimate knowledge of the target format, encoding tool, and how that tool/format combo handles images “like” the one in question.

What’s a web developer to do? Pick numbers through trial-and-error if they have time, and set-it-and-forget-it if they don’t.

Cloudinary’s new q_auto parameter taps into algorithms that analyze the particular characteristics of your image and understand how it will or won’t compress in order to hit the sweet spot between small files and crisp images, automatically.

Compare this (117 KB image):

https://demo-res.cloudinary.com/image/upload/sample.jpg

to this (79KB):

https://demo-res.cloudinary.com/image/upload/q_auto/sample.jpg

The q_auto parameter cut file size by over 30%, with little-to-no visible effect.

(And if you ever find yourself wanting to tweak the default, you canvia a simple, predictable scale)

Automatic smart cropping

Cropping an images to fit a layout – within a dynamicart-directed responsive design, or otherwise – is a hard problem to tackle at scale. It’s simple enough to, say, automatically crop in on the center of an image, but algorithmically generating a crop that looks good and preserves the images’ most important elements is challenging; most designers, at any rate, resign themselves to doing it themselves, manually.

Cloudinary provides a setting called “gravity” which allows developers to anchor their crops around a specific coordinate. Starting today, you can set the gravity of your crops to “auto” – and smartly crop your images, automatically.

So, instead of getting this headless bee:

https://demo-res.cloudinary.com/image/upload/c_fill,ar_4:1/sample.jpg

We get this centered one:

https://demo-res.cloudinary.com/image/upload/c_fill,ar_4:1,g_auto/sample.jpg

Much better!

Automatic sizing for responsive design

Lastly, I want to talk about a feature that is helping to push the web forward, even though it may not quite be ready for production prime time.

Hemos visto cómo configurar el formato de entrega de una imagen, la configuración de compresión y el punto focal para recortes usando autolos parámetros f_auto, q_autoy. g_auto¿Qué pasaría si también pudieras establecer el tamaño de la imagen en “automático”? ¡Puede! w_autoEstá aquí y ofrece recursos de tamaño perfecto para imágenes de ancho variable en diseños responsivos, desde una única URL.

Ahora, la mala noticia: la w_autofunción se basa en una función de vanguardia llamada Client Hints. Habilitar Client Hints requiere enviar un encabezado HTTP especial y, para aprovechar al máximo Client Hints, también debe agregar el sizesatributo a sus imágenes. Lo peor de todo es que las sugerencias de cliente solo son compatibles con Chrome por el momento; Esperamos que el soporte de Cloudinary impulse a otros proveedores a acelerar el ritmo de sus implementaciones.

¡Pero! Si envía los encabezados HTTP correctos y utiliza un navegador compatible, las imágenes responsivas de ancho variable con Cloudinary son tan simples como:

imgsrc="https://demo-res.cloudinary.com/image/upload/w_auto/sample.jpg"alt="1, 2, 3!" /

¡El futuro! ¿No será lindo? Puede probarlo (y todo lo demás que se analiza aquí) hoy registrándose para obtener una cuenta gratuita de Cloudinary.