--- title: "Etiqueta picture en gatsby - Carlos Sánchez" author: "Carlos Sánchez" url: https://carlossanchezdonate.com/articulo/optimizacion-de-imagenes-en-gatsby/ image: https://carlossanchezdonate.com/wp-content/uploads/tb-gatsby-picture-tag.jpg --- # Optimización de imágenes en Gatsby La etiqueta picture cuando se trabaja con gatsby ![Optimización de imágenes en Gatsby](https://carlossanchezdonate.com/wp-content/uploads/cover-gatsby-picture-tag.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Temática: ** : [Multimedia](https://carlossanchezdonate.com/seo-avanzado/multimedia/) , : [Tecnologías](https://carlossanchezdonate.com/seo-avanzado/tecnologias/) , : [WPO](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/) **Fecha de publicación:** : 2023-03-27 **Última revisión:** : 2023-04-19 Si ya sabes la importancia que tiene la [etiqueta picture](/articulo/etiqueta-picture/) para poder insertar imágenes en formatos de nueva generación como AVIF o [WEBP](/articulo/la-extension-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](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/), pero nuestro principal problema suele ser la [renderización](/articulo/renderizacion-de-javascript-en-el-seo/). 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](/articulo/optimizacion-imagenes-seo-nextjs/), 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 ( ); }; 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 ( ); }; 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 con los diferentes formatos de imagen, incluyendo WebP, dentro de la etiqueta de forma automática con Gatsby. En este [codesanbox](https://codesandbox.io/s/using-static-image-in-gatsby-plugin-image-vrfo5c), 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 ( {sources.map((source, index) => ( ))} ); }; export default CustomImg;` ## Bibliografía - [Documentación de Gatsby](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/) Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido: Compartir: [![Compartir en LinkedIn](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/linkedin.svg)](https://www.linkedin.com/cws/share/?url=https://carlossanchezdonate.com/articulo/optimizacion-de-imagenes-en-gatsby/) [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/articulo/optimizacion-de-imagenes-en-gatsby/) [![Compartir en Facebook](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/facebook.svg)](https://www.facebook.com/sharer/sharer.php?u=https://carlossanchezdonate.com/articulo/optimizacion-de-imagenes-en-gatsby/) [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/articulo/optimizacion-de-imagenes-en-gatsby/) [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/articulo/optimizacion-de-imagenes-en-gatsby/) No se te da mal el SEO Técnico **Te falta mi máster**. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB [¡Accede al Máster de SEO Técnico!](/master-seo-tecnico/) Tal vez te interesen otros artículos: [Artículos de SEO](/seo-avanzado/) [HTML para SEO](https://carlossanchezdonate.com/articulo/html-seo/) [Sitemaps](https://carlossanchezdonate.com/articulo/sitemaps/) [Curación de enlaces en el SEO](https://carlossanchezdonate.com/articulo/curacion-de-enlaces-en-el-seo/) [Texto alternativo para imágenes](https://carlossanchezdonate.com/articulo/alt-imagenes/) [Rich Snippets con HTML](https://carlossanchezdonate.com/articulo/rich-snippets-sin-datos-estructurados/)