Optimización de imagen superior: la solución perfecta con Gatsby e ImageEngine trucos CSS

En los años pasados, pila de atasco La metodología para la creación de sitios web es cada vez más popular. Rendimiento, escalabilidad y seguridad es fácil de entender por qué se está convirtiendo en una forma atractiva de crear sitios web para desarrolladores.

GatsbyJS es una plataforma para un generador de sitios estáticos. Desarrollado por React, una biblioteca JavaScript front-end para crear interfaces de usuario. Y utiliza GraphQL, un lenguaje para consultar y manipular datos de fuente abierta, para recuperar datos estructurados de otras fuentes, generalmente sin un capítulo de CMS como Contentful.

Aunque GatsbyJS y plataformas similares han revolucionado el proceso de desarrollo web, queda un desafío: la optimización de imágenes. Incluso cuando se utiliza un marco de desarrollo front-end moderno como GatsbyJS, este suele ser un ejercicio frustrante y que lleva mucho tiempo.

Para la mayoría de los sitios web modernos, no ayuda mucho si trabaja con tecnología eficiente, pero sus imágenes no están optimizadas. Hoy en día, las imágenes tienen la mayor contribución al peso de la página y crecientey aparecen en la lista de Google como la oportunidad más importante para mejorar la productividad.

Con eso en mente, quiero analizar cómo el uso de una CDN de imagen como parte de su pila de tecnología puede generar mejoras tanto en el rendimiento del sitio web como en todo el proceso de desarrollo.

Una introducción rápida a Gatsby

GatsbyJS es mucho más que los generadores de sitios estáticos convencionales del pasado. Sí, aún tiene la capacidad de integrarse con una plataforma de control de versiones de software, como Git, así como crear, implementar y visualizar proyectos de Gatsby. Sin embargo, sus servicios consisten en una plataforma en la nube unificada que incluye alojamiento seguro, escalable y de alta velocidad, así como soporte técnico experto y poderosas integraciones de terceros.

Además, todo viene envuelto en una plataforma de desarrollo fácil de usar que comparte muchas similitudes con el CMS más popular del momento. Por ejemplo, puede usar plantillas de sitio prediseñadas o características preconfiguradas (módulos y elementos de sitio web efectivos) para acelerar el proceso de producción.

También ofrece muchos beneficios para los desarrolladores, lo que le permite trabajar con marcos y lenguajes líderes como JavaScript, React, WebPack y GraphQL, así como capacidades integradas de gestión del rendimiento, iteraciones de desarrollo, etc.

Por ejemplo, Gatsby hace mucho para optimizar su productividad sin ninguna interferencia. Viene con división de código integrada, recuperación de recursos y carga diferida. En general, se sabe que los sitios estáticos son más efectivos, pero Gatsby lo plantea.

¿Gatsby proporciona optimización de imagen integrada?

Gatsby en realidad ofrece capacidades de optimización de imágenes integradas.

De hecho, se ha actualizado recientemente en este sentido, reemplazando el ya rechazado paquete gatsby-image con el nuevo complemento de imagen Gatsby. Este complemento consta de dos componentes para imágenes estáticas y dinámicas, respectivamente. Normalmente usaría el componente dinámico si estuviera procesando imágenes de un CMS, como Contentful.

La instalación de este complemento le permite pasar comandos mediante programación al marco principal en forma de propiedades que se muestran a continuación:

Opción	Por defecto	Descripción
layout	constrained / CONSTRAINED	Determina el tamaño de la imagen y su comportamiento de cambio de tamaño.
width/height	Tamaño de la imagen original	Cambiar el tamaño de la imagen.
aspectRatio	Relación de la imagen original	Establezca una relación de aspecto específica.
placeholder	"dominantColor" / DOMINANT_COLOR	Seleccione el estilo de la imagen temporal que se muestra al cargar la imagen completa.
formats	["auto", "webp"] / [AUTO,WEBP]	Formatos de archivo de las imágenes generadas.
transformOptions	[fit: "cover", cropFocus: "attention"]	Opciones nítidas para controlar el recorte y otras manipulaciones de imágenes.
sizes	Generado automáticamente	EN <img> sizes atributo pasado en la etiqueta img. Describe el tamaño de la visualización de la imagen y no afecta a las imágenes generadas. Es probable que solo cambie esto si está utilizando imágenes de ancho completo que no cubren todo el ancho de la pantalla.
quality	50	Se genera la calidad de imagen predeterminada. Esto se reemplaza por cada opción específica de la forma.
outputPixelDensities	Para imágenes fijas: [1, 2] Para limitado: [0.25, 0.5, 1, 2]	Lista de densidad de píxeles de la imagen a generar. Nunca generará imágenes más grandes que la fuente y siempre incluirá una imagen de 1✕. La imagen es un múltiplo del ancho de la imagen para dar las dimensiones generadas. por ejemplo, un 400px generará una imagen amplia y limitada 100, 200, 400 y 800px amplias imágenes predeterminadas. Ignorado para las imágenes de ancho completo que usan breakpoints en lugar de.
breakpoints	[750, 1000, 1366, 1920]	Anchos de salida para generar imágenes de ancho completo. De forma predeterminada, los anchos se generan para resoluciones de dispositivos comunes. Nunca generará una imagen más grande que la imagen original. El navegador seleccionará automáticamente la más adecuada.
blurredOptions	Ninguna	Opciones de imagen de baja resolución. Ignorado a menos que placeholder está borroso
tracedSVGOptions	Ninguna	Opciones de archivo SVG con seguimiento. Ver opciones de seguimiento. Ignorado a menos que placeholder SVG es monitoreado.
jpgOptions	Ninguna	Opciones para cambiar a nítido al generar imágenes JPG.

Como puede ver, este es un gran conjunto de herramientas para ayudar a los desarrolladores a procesar imágenes de diferentes maneras. Se pueden usar diferentes opciones para transformar, diseñar y optimizar las imágenes para el rendimiento, así como para el comportamiento dinámico de la imagen de diferentes maneras.

En cuanto a la optimización del rendimiento, existen varias opciones que resultan especialmente interesantes:

• carga lenta: Retrasa la carga de imágenes fuera de la pantalla hasta que se desplazan a una vista.
• Ancho alto: cambia el tamaño de la imagen según cómo se utilizará.
• Sustituir: Cuando se cargue lentamente o mientras una imagen se carga en segundo plano, use un reemplazo. Esto puede ayudar a evitar penalizaciones de rendimiento para los signos vitales web clave, como el cambio de diseño acumulativo (CLS).
• Formato: Los diferentes formatos son inherentemente una codificación más eficiente. GatsbyJS es compatible con WebP y AVIF, dos de los formatos de imagen de próxima generación más eficientes.
• calidad: Aplica un cierto nivel de compresión de calidad a la imagen entre 0 y 100.
• Densidad de pixeles: Una densidad de píxeles más baja ahorrará datos de imagen y se puede optimizar de acuerdo con el tamaño de la pantalla y PPI (píxeles por pulgada).
• puntos de interrupción: Los puntos de interrupción son importantes para asegurarse de mostrar una versión de una imagen del tamaño adecuado para un cierto umbral de tamaño de pantalla, especialmente para mostrar imágenes más pequeñas para tamaños de pantalla más pequeños, como tabletas o teléfonos móviles. Esto se llama sintaxis de respuesta.

Entonces, en general, Gatsby proporciona a los desarrolladores un marco maduro y sofisticado para procesar y optimizar el contenido de la imagen. La única característica importante que falta es algún tipo de soporte integrado para el asesoramiento del cliente.

Sin embargo, hay un gran truco: todo esto debe aplicarse manualmente. Si bien GatsbyJS usa configuraciones predeterminadas para algunas propiedades de imagen, no ofrece inteligencia integrada para procesar y brindar servicio de forma automática y dinámica a imágenes optimizadas compatibles con dispositivos.

Si desea crear la solución de optimización de imágenes perfecta, sus desarrolladores primero deberán implementar capacidades de detección de dispositivos. Luego deberá desarrollar la lógica para seleccionar dinámicamente las operaciones de optimización en función del dispositivo específico que accede a su aplicación web.

Finalmente, este código deberá cambiarse y actualizarse constantemente. Nuevos dispositivos salen todo el tiempo con diferentes propiedades. Además, los estándares de rendimiento y optimización de imágenes están en constante evolución. Incluso los cambios significativos, las adiciones o las actualizaciones de sus propios activos de imagen pueden causar la necesidad de volver a trabajar en su conversión. Sin mencionar el tiempo, solo necesita mantenerse al día con la información y las tendencias más recientes y asegurarse de que el desarrollo se realice en consecuencia.

Otro problema es que tendrá que probar y mejorar constantemente su implementación. Sin la ayuda de un motor de optimización inteligente, necesitará "sentir" cómo su configuración afectará la calidad visual de sus imágenes y refinará constantemente su enfoque para obtener los resultados correctos.

Esto agregará una cantidad significativa de gastos generales a su carga de trabajo de desarrollo a corto y largo plazo.

Gatsby también admite que estas técnicas consumen bastante CPU. En ese caso, es posible que desee optimizar imágenes por adelantadoSin embargo, esto también debe implementarse manualmente en el código, además de ser aún menos dinámico y flexible.

Pero, ¿qué pasa si hay una mejor manera de optimizar sus activos de imagen mientras disfruta de todos los beneficios de usar una plataforma como Gatsby? La solución que ofreceré ayudará a resolver una serie de problemas clave que surgen del uso de Gatsby (y cualquier marco de desarrollo, en ese sentido) para la mayor parte de la optimización de su imagen:

• Reduzca el impacto que tiene la optimización de imágenes en el proceso de diseño y desarrollo inmediato y a largo plazo.
• Eliminar la carga adicional y la responsabilidad sobre los hombros de sus desarrolladores, liberando tiempo y recursos para trabajar en aspectos clave de su aplicación web.
• Mejore la capacidad de su aplicación web para optimizar dinámica e inteligentemente los activos de imagen para cada visitante individual.
• Todo esto sin dejar de integrarse a la perfección con GatsbyJS y con su CMS (en la mayoría de los casos).

Presentamos una mejor manera de optimizar imágenes: ImageEngine

En resumen, ImageEngine es inteligente, Imagen CDN con información del dispositivo.

ImageEngine funciona como cualquier otra CDN (red de entrega de contenido), como Fastly, Akamai o Cloudflare. Sin embargo, se especializa específicamente en la optimización y mantenimiento de imágenes.

Al igual que sus compañeros, proporciona a ImageEngine la ubicación donde se almacenan sus archivos de imagen, los descarga a sus propios servidores de optimización de imágenes y luego genera y entrega variantes de imágenes optimizadas a los visitantes de su sitio.

Al hacer esto, ImageEngine está diseñado para reducir la carga útil de la imagen, entregar imágenes optimizadas adaptado a cada dispositivo único y sirve imágenes desde los nodos finales en él CDN mundial.

En general, una imagen CDN recopila información sobre el dispositivo de acceso analizándolo ACCEPT titulo tipico ACCEPT el encabezado se ve así (para Chrome):

image/avif,image/webp,image/apng,image/*,*/*;q=0.8

Como puede ver, esto solo proporciona CDN con los formatos de imagen aceptados y la compresión recomendada para la calidad.

El CDN más avanzado, incluido ImageEngine, también puede usar sugerencias de clientes para puntos de datos más profundos, como DPR (proporción de píxeles del dispositivo) y Viewport-Width. Esto permite un mayor grado de toma de decisiones inteligente para optimizar de manera más efectiva los activos de imagen mientras se mantiene la calidad visual.

Sin embargo, ImageEngine lleva las cosas un paso más allá, siendo el único CDN de imágenes producido en masa que tiene detección de dispositivos WURFL incorporada. Esto permite que ImageEngine lea más información sobre el dispositivo, como el sistema operativo, la resolución y PPI (píxeles por pulgada).

Mediante el uso de algoritmos de inteligencia artificial y aprendizaje automático, estos datos adicionales significan que ImageEngine tiene un poder de toma de decisiones prácticamente inigualable. Sin ninguna intervención manual, ImageEngine puede realizar todas las siguientes operaciones de optimización de imágenes automáticamente:

• Cambie el tamaño de sus imágenes para que se ajusten al tamaño de la pantalla del dispositivo sin necesidad de una sintaxis receptiva.
• Comprima de forma inteligente la calidad de imagen para reducir la carga útil conservando la calidad visualutilizando indicadores como el método Structural Similarity Index (SSIM).
• Transforma las imágenes en las más óptimas, formatos de codificación de próxima generaciónAdemás de WebP y AVIF, ImagEngine también es compatible con JPEG 2000 (Safari), JPEG XR (Internet Explorer y Edge) y MP4 (para aGIF).

Estas configuraciones también funcionan bien con las capacidades integradas de GatsbyJS. Por lo tanto, puede implementar puntos de interrupción, carga diferida y sustitutos de imágenes en la naturaleza que no requieren experiencia o una toma de decisiones inteligente utilizando Gatsby. Luego, puede dejar que ImageEngine administre operaciones más avanzadas y basadas en inteligencia, como la compresión de calidad, el formateo de imágenes y el cambio de tamaño.

Lo mejor de todo es que ImageEngine hace todo esto automáticamente, convirtiéndolo en una solución de optimización de imágenes completamente no estándar. ImageEngine ajustará automáticamente su enfoque a medida que cambien el panorama de la imagen digital y los estándares, liberándolo de esta preocupación.

De hecho, ImageEngine recomienda utilizar la configuración predeterminada para obtener los mejores resultados en la mayoría de las situaciones.

Además, esta lógica está integrada en los servidores finales de imageEngine. En primer lugar, con más de 20 PoP globales, esto significa que las imágenes se procesan y mantienen lo más cerca posible del usuario final. Esto también significa que la mayor parte del procesamiento se realiza en el lado del servidor Con la excepción de la instalación del complemento ImageEngine Gatsby, prácticamente no hay costos de procesamiento innecesarios durante la construcción o ejecución.

Este tipo de toma de decisiones dinámicas e inteligentes solo cobrará mayor importancia en el corto y mediano plazo. Debido a la cantidad y variedad de dispositivos que crecen a lo largo de los años, cada vez es más difícil implementar la optimización de imágenes de manera que sea sensible a cada dispositivo.

Es por eso que ImageEngine puede brindarle una ventaja en el futuro de los dispositivos móviles, que está en constante evolución. En pocas palabras, ImageEngine lo ayudará a proteger su aplicación web Gatsby en el futuro.

Cómo integrar ImageEngine con Gatsby: una guía rápida

La integración de ImageEngine con GatsbyJS es trivial si tiene experiencia en la instalación de otros complementos de terceros. Sin embargo, los pasos variarán un poco dependiendo de qué CMS backend usar con GatsbyJS y dónde almacena sus activos de imagen.

Por ejemplo, puede usarlo con WordPress, Drupal, Contentful y otros CMS populares.

Su pila generalmente se vería así:

• Un CMS, como Contentful, para alojar su "espacio" donde administrará sus activos y creará datos estructurados. Sus imágenes serán cargadas y almacenadas en su espacio.
• Una plataforma de control de versiones, como Github, para alojar su código y administrar sus versiones y sucursales.
• GatsbyJS para hospedar su espacio de trabajo, donde construirá, implementará y hospedará el front-end de su sitio web.

Entonces, lo primero que debe hacer es configurar un sitio o proyecto usando GatsbyJS y conectarlo a su CMS.

Luego instalará el complemento ImageEngine para GatsbyJS:

npm install @imageengine/gatsby-plugin-imageengine

También deberá crear una dirección de entrega para sus imágenes usando ImageEngine. Puede obtener uno registrándose para la prueba de 30 días aquí. Todo lo que tiene que hacer es proporcionar a ImageEngine la URL del host. Para Contentful, eso es todo images.ctfassets.net y para Sanity.io es cdn.sanity.io.

ImageEngine luego le proporcionará una dirección de envío, generalmente en forma de {random_string}.cdn.imgeng.in.

Utilizará esta dirección de envío para configurar el complemento ImageEngine en su gatsby-config.js expediente. Como parte de esto, indicará la fuente (por ejemplo, Contenido) y proporcionará la dirección de entrega a ImageEngine. Puedes encontrar ejemplos de cómo se hace en la documentación. aquí.

Tenga en cuenta que el complemento ImageEngine tiene soporte integrado para Contentful y Sanity.io como fuentes de recursos. También puede configurar el complemento para descargar imágenes almacenadas localmente o desde otra fuente personalizada.

Una vez que eso suceda, ¡el desarrollo puede comenzar!

En general, Gatsby creará nodos Graphql para los elementos creados en su CMS (por ejemplo, ContentfulAsset, allSanityImageAssety otros.). ImageEngine luego creará un nodo secundario de childImageEngineAsset para cada nodo aplicable.

A continuación, utilizará las consultas de GraphQL en el código de sus páginas de Gatsby para especificar las propiedades de las variantes de imagen que desea publicar. Por ejemplo, puede mostrar una imagen de 500 ✕ 300 px en formato WebP mediante la siguiente consulta:

gatsbyImageData(width: 500, height: 300, format: jpg)

Una vez más, debe consultar la documentación para un tratamiento más detallado. Puede encontrar guías para integrar ImageEngine con Satisfecho, cordura.ioy todo tipo de otros Proyecto Gatsby.

Para un usuario competente de Gatsby, la integración de ImageEngine solo llevará unos minutos. Y el apoyo actual será mínimo. Si sabe cómo usar GraphQL, entonces la sintaxis familiar para enviar directivas y crear variantes de imágenes específicas será casi sin esfuerzo y debería tomar aproximadamente el mismo tiempo que la optimización manual de imágenes usando Gatsby React estándar.

Conclusión

Para la mayoría de los proyectos web, ImageEngine puede reducir la carga de imágenes hasta en un 80 %. Este número puede aumentar si tiene imágenes de resolución particularmente alta.

Sin embargo, realmente puede aprovechar al máximo la optimización de sus imágenes al combinar las mejores partes de un marco de desarrollo de front-end estático como Gatsby y un CDN para imágenes como ImageEngine. En particular, puede usar ambos para apuntar a Google signos vitales web basicos:

• La optimización dinámica e inteligente durante el funcionamiento de ImageEngine optimizará la carga útil para mejorar LCP, SI, FCP y otros indicadores de tamaño de datos.
• Con Gatsby, puede optimizar para CLS y FID, utilizando las mejores prácticas e implementando de forma natural la carga diferida y los sustitutos de imágenes.

ImageEngine proporciona Herramienta de prueba de velocidad de imagen donde puede evaluar rápidamente su rendimiento actual y ver el impacto de ImageEngine en las métricas clave. Incluso para un proyecto simple de GatsbyJS, los resultados en la herramienta de demostración pueden ser impresionantes. Si extrapola estos porcentajes a un sitio más grande con muchas imágenes, la combinación de Gatsby con ImageEngine puede tener un impacto dramático en el rendimiento y la experiencia del usuario de su aplicación web. Además, sus desarrolladores le agradecerán que los salve de la tarea desafiante y lenta de optimizar manualmente la imagen.