Como desarrolladores web e ingenieros de software, queremos dar a las personas lo que quieren. Si está familiarizado con NextJS , debería estar familiarizado con la impresionante función de optimización de imágenes incluida en la versión 10 lanzada recientemente. NextJS es un marco que se puede utilizar tanto en el backend como en el frontend de las aplicaciones React. Es capaz de realizar una amplia gama de manipulaciones, incluida la conversión de imágenes al formato WebP compatible con la web, la carga de imágenes según las necesidades del usuario y mucho más.
Si ya está trabajando con NextJS, esto es muy útil. Pero, ¿qué pasa si desea la funcionalidad de optimización, el estilo en línea y la simplicidad de un componente React sin los obstáculos asociados con el nuevo marco?
— , . , , ( !) .
, BetterImage
BetterImage es una herramienta de código abierto que imita muchas de las funciones de optimización de una manera simple y conveniente en formato React. Convierte la imagen a WebP optimizada un 30% más pequeña que JPEG sin sacrificar la calidad. Esto mejora la accesibilidad de visualización, así como SEO, en Google Lighthouse en comparación con la etiqueta estándar. También agiliza el formato CSS, incluidas las manipulaciones más populares listas para usar. El componente toma propiedades, abstrayendo manipulaciones e importaciones, lo que permite un mayor enfoque en la aplicación. BetterImage es compatible con componentes funcionales y basados en clases, por lo que puede incluirlo en su aplicación sin importar con qué sabor sirva su React. Habilitando imagen de respaldo,así como las dimensiones de alto y ancho, CSS evita que se aplique la métrica de cambio de diseño agregada al evaluar un sitio en Google Lighthouse.
Resultados de Google Lighthouse para etiqueta estándar (izquierda) versus resultados de BetterImage (derecha).
El componente todavía está en fase beta, con nuevas funcionalidades y paquetes de NPM en desarrollo. Si desea probar el caso del componente o tiene preguntas, visite Github y el sitio web .
¿Qué hay debajo del capó de BetterImage?
Las pruebas Lighthouse muestran que el componente puede mejorar el rendimiento de carga de imágenes. Otros marcos como Next.JS ofrecen grandes optimizaciones. Nuestro equipo quiere adoptar esto en React para que no se necesiten otros marcos. Creamos BetterImage para que los desarrolladores puedan escribir estilos directamente en el código React como una cadena. El estilo es opcional y no se puede utilizar en absoluto.
Componente BetterImage
¿Qué hay debajo del capó? Las propiedades se pasan al componente, que luego abstrae la información para manipular la imagen. No es necesario importar la imagen en sí en el componente React, solo se necesita la ruta relativa y BetterImage importará dinámicamente la imagen convertida. BetterImage convierte el archivo de origen a WebP mediante una llamada API de paquete NPM externo y almacena la imagen convertida en una carpeta local. Esto ayudará a renderizar la imagen aún más rápido después de la primera manipulación. Todas las demás funciones, siempre flexibles, se aplican según sea necesario. Para obtener una vista previa del componente actualmente en versión beta, ¡bienvenido a Github y al sitio web !
¡Gracias por leer esta pequeña reseña!
