Modificando la fuente de imágenes optimizadas con Angular 16.2
Desde el lanzamiento de la directiva NgOptimizedImage en Angular 14.2 (e incorporada recientemente de forma retroactiva a la versión 13.4), los desarrolladores front-end hemos podido reutilizar lógica de Angular para la representación de imágenes en un navegador web de manera eficiente.
Esta nueva directiva incorporada al framework promueve algunas de las mejores prácticas que a menudo pasamos por alto al emplear imágenes en aplicaciones web. No siempre recordamos declarar la prioridad de su procesamiento, ni escribir los atributos que sugieren al navegador si debiese emplear lazy-loading o apresurarse a cargar ciertas imágenes lo más pronto posible. También lo más fácil es no proporcionar múltiples fuentes de imágenes para que el navegador seleccione según el tamaño de pantalla, a expensas del rendimiento web.
Ya sea que una interfaz web esté repleta o no de imágenes, el uso adecuado de NgOptimizedImage puede ayudar a cargarla más rápido, mejorando la experiencia del usuario.
Valores inalterables de las propiedades de imágenes optimizadas
A pesar de los beneficios de esta directiva, la limitación de no poder actualizar sus propiedades de entrada ha desalentado a algunos desarrolladores. Especialmente con el caso de la propiedad ngSrc —que instruye al compilador a ejecutar las optimizaciones de imagen — al impedir cambiar su valor después de la inicialización de la directiva.
Cualquiera que intentara hacer esto, como en el escenario de permitir a los usuarios cambiar una imagen vinculada a una NgOptimizedImage, encontraba el siguiente error en la consola del navegador:
Si compilamos y renderizamos el componente independiente del siguiente ejemplo de código en una versión de Angular entre 13.4.x y 16.1.x, podremos reproducir el error NG02953 UNEXPECTED_INPUT_CHANGE en tiempo de ejecución.
Imágenenes actualizables a partir de Angular 16.2
Con el lanzamiento de Angular 16.2.0, ya es posible cambiar el valor de la propiedad ngSrc después de que se haya inicializado la directiva NgOptimizedImage.
Para lograr esto ya no es necesario darle la vuelta empleando soluciones más costosas, como envolver el elemento de imagen optimizada en un <ng-template> para que el empleo de vistas incrustadas nos permitan modificar el valor de esta propiedad en tiempo de ejecución — a no ser que se desee cambiar otras propiedades de imagen con el riesgo de impactar la estabilidad visual una vez que se haya representado en el navegador.
Hasta ahora, ngSrc es la única propiedad de la directiva que está permita modificar. Alex Castle, el programador de estos cambios en el código fuente de Angular, ha aconsejado en el pull request correspondiente que “modificar ciertas entradas, como height, width y fill, sería muy probable que causara un desplazamiento visual, lo que NgOptimizedImage está diseñado específicamente para prevenir”.
Incluso al intentar reemplazar la fuente de la imagen con otro diferente que comparta las mismas proporciones, hay que tener en cuenta su relevancia visual en la interfaz de usuario. Cambiar imágenes reconocidas como elementos LCP en tiempo de ejecución podría ralentizar la carga de la aplicación web. Afortunadamente, en casos como éste Angular lanza la advertencia NG02964 LCP_IMG_NGSRC_MODIFIED para alertarnos proactivamente.
Es importante que utilicemos esta nuevas capacidades de modificar la fuente de una imagen optimizada con precaución. También asegurémonos de realizar auditorías de rendimiento web empleando tanto herramientas sintéticas — por ejemplo, Lighthouse — como servicios de monitoreo de usuarios reales para continuar midiendo si las imágenes web se mantienen debidamente optimizadas.
