Imágenes de respuesta automática con sugerencias para el cliente
Con el tiempo, los desarrolladores han luchado con forzar las imágenes a diseños receptivos. Las consultas de medios y las cuadrículas fluidas se emplean constantemente para lograr imágenes visualmente flexibles. Lograr imágenes tan flexibles como lo señaló Ethan Marcotte en el seminal primera edición de su libro es tan fácil como:
Los recursos de imágenes que se sirven deben ser lo suficientemente grandes como para llenar grandes ventanas gráficas y pantallas de alta resolución para que este código funcione de manera eficaz. Simplemente establecer un porcentaje de ancho en las imágenes no es suficiente, las imágenes también deben cambiarse de tamaño o, de lo contrario, se enviarán enormes recursos de imágenes a todos, lo que es un desastre de rendimiento.
Otra forma en que los desarrolladores han combatido las imágenes en diseños receptivos es utilizando el conjunto de nuevas funciones HTML lo que permite que las imágenes se transformen de una manera que permite a los usuarios obtener recursos personalizados según su contexto. Estas características brindan adaptación al permitir que los autores marquen múltiples recursos alternativos de esta manera:
<img size=”100vw” srcset=”tiny.jpg 320w, Small.jpg 512w, Medium.jpg 640w, Large.jpg 1024w, Huge.jpg 1280w, Enormous.jpg 2048w” src=”fallback.jpg” alt=”To each according to his ability” />
El desafío de este método es que puede resultar muy tedioso y complejo generar siempre múltiples recursos alternativos para cada imagen. Cloudinary puede ayudar con el generación de recursos, pero el marcado en nuestra etiqueta de imagen será abrumador.
Considerando JavaScript
Otro método que emplean los desarrolladores es el uso de Javascript. JavaScript puede medir directamente el contexto de navegación y cuando se combina con el cambio de tamaño del lado del servidor sobre la marcha, solicita un único recurso de tamaño perfecto cada vez con poco o ningún marcado adicional requerido. Esta publicación explica cómo usar JavaScript para lograr imágenes de respuesta automática.
Ahora hay desafíos con este enfoque:
- Configurar la infraestructura de JavaScript que puede ser compleja
- Insertar JavaScript entre los usuarios y el contenido principal de nuestra página, lo que puede ser complicado de hacer de manera efectiva.
- Los proveedores de navegadores utilizan pre-analizador especulativo para eliminar tantas cargas de imágenes como sea posible antes de que el HTML de una página haya terminado de analizarse. Y para que JavaScript cargue recursos de imagen medidos, debe esperar a que el diseño de la página esté completo antes de poder medir la página.
Esto significa que nos enfrentamos a una elección si deseamos usar JavaScript para cargar imágenes receptivas. Ya sea:
- Deje que el pre-analizador haga su trabajo y configure JavaScript para que cargue dos veces todas nuestras imágenes, o
- Interrumpa el pre-analizador mediante la creación de src-less no válido
s para que nuestro JavaScript pueda comenzar a cargar las imágenes de nuestras páginas en último lugar, en lugar de primero.
Nuestro principal objetivo es el rendimiento, pero estas opciones anteriores aún presentan grandes compromisos que obstaculizarán nuestro objetivo de simplemente cargar imágenes de tamaño adecuado.
Sugerencias para el cliente al rescate
Todas las opciones que consideramos anteriormente venían empaquetadas con un gran compromiso o simplemente eran detalladas y complicadas. ¿Qué otras opciones tenemos? ¿Dónde podemos trasladar esta carga de complejidad? Tengo una idea, ¡pongámoslo en el servidor!
Los desarrolladores de front-end ya no tienen que sudar más. Hacer que las imágenes respondan al problema de otra persona.
DPR automático
Aquí hay un simple ejemplo vivo.
Al hacer clic en el enlace de arriba (o en la foto), verá una imagen, cuya URL ofrece diferentes recursos a diferentes usuarios, según su contexto. En navegadores que admiten sugerencias para el cliente (por el momento, principalmente Chrome), los dispositivos 1x recibirán recursos 1x, las pantallas 2x recibirán recursos 2x. ¿Cómo es esto posible? Se coloca una pequeña etiqueta en el
<meta http-equiv="Accept-CH" content="DPR">El código anterior le dice al navegador que envíe un encabezado HTTP adicional llamado DPR, anunciando devicePixelRatio. Esos encabezados HTTP de DPR son sugerencias de cliente. Entonces, cuando envía pistas DPR con un poco de metamagia y dpr_auto adjunto a la URL, Cloudinary es capaz de entregar diferentes recursos a diferentes usuarios dependiendo de su densidad de visualización.
Ancho automático
dpr_auto escala las imágenes para adaptarse a diferentes densidades de visualización. Cloudinary proporciona w_auto que escala las imágenes para adaptarse a anchos de diseño variables. A continuación se muestra un ejemplo típico:
<meta http-equiv="Accept-CH" content="DPR, Width"> […snip…] <img src="http://res.cloudinary.com/demo/w_auto/on_the_phone_csmn8h.jpg" alt="Obama on the phone with Castro." />
Tranquilo, déjame explicarte lo que está pasando aquí.
- La metaetiqueta indica al navegador que envíe otra sugerencia para el Cliente: Ancho además de DPR.
- La etiqueta img incluye un atributo de tamaños que informa al navegador sobre el ancho del diseño de la imagen.
- Luego, el navegador transmite el ancho al servidor a través de la sugerencia de ancho
Nota: Si no hay ancho y no tamaños, w_auto ¡no hace nada! También w_auto las imágenes se escalarán según DPR y ancho sugerencias, no es necesario agregar dpr_auto en la URL.
Uso avanzado de w_auto
Vamos a sumergirnos en un uso adicional de Cloudinary w_auto parámetro. w_auto puede tomar dos parámetros opcionales como este:
http://res.cloudinary.com/demo/w_auto:100:400/bike.jpg
: 100 le dice a Cloudinary qué tan grande debe ser la diferencia entre los recursos alternativos. Este parámetro le permite limitar el número de posibles respuestas definiendo un paso de redondeo entre ellos. Por ejemplo, si el ancho objetivo es 323 píxeles, Cloudinary redondeará a la centena más cercana y devolverá un recurso de 400 píxeles de ancho. Ahora, si establece el primer parámetro en : 1, Los recursos se escalarán para que coincidan exactamente con el ancho del diseño, lo que generalmente no es una buena idea.
: 400 se refiere a la reserva width. Si un navegador no envía un ancho sugerencia, este parámetro se utilizará para servir un recurso de imagen con ese ancho. Por ejemplo, en este escenario, los navegadores que no son compatibles con las sugerencias del cliente reciben una imagen de 400 píxeles de ancho. En caso de que no lo sepa, 400 es un móvil primero defecto. Puede decidir servir un escritorio primero predeterminado a los navegadores no compatibles, digamos 1000.
Nota: Si no envía un ancho sugerencia o su navegador no es compatible con las sugerencias del cliente, y este parámetro de respaldo también está ausente, w_auto entregará imágenes en su tamaño original. Imagínese una imagen de aproximadamente 12 megapíxeles enviada a un Safari móvil. Esto podría potencialmente destruir la carrera de un desarrollador de front-end.
A continuación, hablaremos de otra cosa asombrosa que w_auto puede proporcionarle!
Puntos de interrupción automáticos
Hace cuatro años, Jason Grigsby señalado que tiene más sentido pensar en el tamaño del paso en términos de bytes en lugar de píxeles. Cloudinary siguió adelante con la construcción de la herramienta que hace realidad la idea de Jason: el Generador de puntos de interrupción de imágenes receptivas. La misma lógica para esta herramienta se ha incorporado w_auto ¡también!
Los servidores de Cloudinary pueden ver sus imágenes, ver cómo se comprimen y determinar los espacios entre las imágenes según el tamaño de los bytes, si es un valor especial : puntos de interrupción está provisto. Este es solo el parámetro de pasos.
w_auto: puntos de interrupción es el resultado de años de pensamiento inteligente y tremendos esfuerzos para proporcionar una impresionante solución de imágenes de respuesta automática que es inteligente no solo en el contexto de las imágenes, sino también en su contenido particular. Sin emabargo, : puntos de interrupción requiere un poco de configuración muy técnica en la capa CDN, por lo que en este momento, deberá comunicarse con Cloudinary para configurarlo para su cuenta.
Compatibilidad con el navegador Client Hints
Las sugerencias de cliente solo son compatibles con Chrome y Opera en este momento. Tengo miedo de decir que significa dpr_auto y w_auto funcionará para aproximadamente la mitad de sus usuarios.
No es ninguna novedad que otros navegadores tarden en implementar nuevas funciones de plataforma web, incluidas las sugerencias para el cliente. La mayoría de los proveedores de navegadores quieren implementar funciones después de haber visto una gran demanda de ellas. Los autores tampoco quieren utilizar funciones en sus páginas web hasta que disfruten de una amplia compatibilidad con el navegador.
Cloudinary aboga por la adopción de sugerencias para el cliente en una gama más amplia de navegadores porque dpr_auto y w_auto son, entre otras cosas, un intento de fomentar el uso de las sugerencias del cliente. ¡Las imágenes simples, receptivas, automatizadas y de alto rendimiento deberían ser la norma en estos días!
El dilema del desarrollador
Todos deberían pensar en imágenes receptivas cuando trabajen en proyectos, ya sean nuevos o revisando los antiguos. ¿Cuál es la mejor forma de hacerlo? Al final del día, la decisión aún recae en el desarrollador o el equipo involucrado. Una solución basada en el marcado le brindará la mayor parte del soporte del navegador, pero luego automatizarlo podría ser complicado. Las soluciones basadas en JavaScript en el otro extremo pueden ser útiles fácilmente, pero operan dentro de importantes limitaciones de rendimiento.
Las sugerencias del cliente ofrecen una tercera opción, que es a la vez simple y eficaz. w_auto y dpr_auto son muy útiles en este momento incluso con la compatibilidad justa del navegador de Client Hints.
Implementar dpr_auto y w_auto es sencillo y se entrega a aproximadamente la mitad de sus visitantes en todo el mundo. Proporcionan ganancias de rendimiento increíbles y esas ganancias crecerán a medida que mejore el soporte del navegador.
Regístrese para obtener una cuenta gratuita hoy y comience a acumular ganancias de rendimiento hoy mismo con la resolución de imagen de respuesta automática.
[– This is an advertorial post on behalf of Cloudinary –]
