Optimización de imágenes en Gatsby

Si ya sabes la importancia que tiene la etiqueta picture para poder insertar imágenes en formatos de nueva generación como AVIF o WEBP, mejorando el rendimiento pero sin afectar a la compatibilidad con los navegadores.

En los Frameworks de Javascript suele haber una gran performance de velocidad, pero nuestro principal problema suele ser la renderización. No obstante, muchos de estos frameworks tienen algún que otro vicio por defecto.

Es posible que te interese que Gatsby, al igual que Next, no hacen un buen trabajo con las imágenes de forma nativa.

Así que modificamos de esta forma el componente CustomImg para utilizar GatsbyImage:

import React from 'react';
import { GatsbyImage } from 'gatsby-plugin-image';
const CustomImg = ({ image, alt, className }) => {
return (
<GatsbyImage className={className} image={image} alt={alt} />
);
};
export default CustomImg;


Y en el archivo en el que uses este componente CustomImg, necesitarás importar getImage y pasar la imagen como una prop:


import React from 'react';
import { graphql } from 'gatsby';
import { getImage } from 'gatsby-plugin-image';
import CustomImg from '../components/CustomImg';
const MyPage = ({ data }) => {
const image = getImage(data.myImage);
return (
<div>
<CustomImg image={image} alt="Descripción de la imagen" className="my-image-class" />
</div>
);
};
export const query = graphql`
query {
myImage: file(relativePath: { eq: "carpeta/imagen.jpg" }) {
childImageSharp {
gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
}
}
}
`;
export default MyPage;


Este código importa el componente GatsbyImage y getImage de gatsby-plugin-image. Luego, en el componente CustomImg, pasamos la imagen como una prop en lugar de utilizar data. El componente GatsbyImage manejará automáticamente la optimización de imágenes y la generación de URLs amigables.

Asegúrate de tener instalado y configurado el plugin gatsby-plugin-image y gatsby-transformer-sharp en tu archivo gatsby-config.js.

Por defecto, el componente GatsbyImage genera automáticamente imágenes en formato WebP y las incluye en la etiqueta picture. Sin embargo, no se muestra explícitamente en el código del componente.

Cuando se utiliza gatsbyImageData en tu consulta GraphQL y se especifican los formatos que se desean incluir, en el código de arriba: (formats: [AUTO, WEBP, AVIF]), el plugin gatsby-plugin-image se encarga de generar las imágenes en diferentes formatos, incluyendo WebP.

Cuando se utiliza el componente GatsbyImage, el HTML generado contendrá las etiquetas <source> con los diferentes formatos de imagen, incluyendo WebP, dentro de la etiqueta <picture> de forma automática con Gatsby.

En este codesanbox, aunque no tienen la implementación que he expuesto, vemos como si se aplica la etiqueta picture de una forma correcta.

No obstante, en el caso de dar error, yo antes, en otras versiones, lo aplicaba de una forma más manual:

import React from 'react';
import { graphql } from 'gatsby';
import { getImage } from 'gatsby-plugin-image'
const CustomImg = ({ data, alt, className }) => {
const image = getImage(data);
const sources = [
{
type: 'image/webp',
srcSet: image.images.sources[0].srcSetWebp,
sizes: image.images.sources[0].sizes,
},
{
type: 'image/jpeg',
srcSet: image.images.sources[0].srcSet,
sizes: image.images.sources[0].sizes,
},
];
return (
<picture className={className}>
{sources.map((source, index) => (
<source key={index} type={source.type} srcSet={source.srcSet} sizes={source.sizes} />
))}
<img src={image.images.fallback.src} alt={alt} />
</picture>
);
};
export default CustomImg;

Bibliografía

• Documentación de Gatsby