L’optimisation des images – du moins selon mon expérience – a toujours été un problème majeur lors de la création de sites Web rapides. Équilibrer la qualité d'image et l'efficacité de la bande passante est une tâche difficile sans les bons outils. Les outils de retouche photo tels que Photoshop sont parfaits pour la retouche, le recadrage et le redimensionnement des images bitmap. Malheureusement, ils ne sont pas très doués pour créer des images 100% optimisées pour le Web.

Heureusement, nous avons des packages d'extension pour les outils de construction capables d'optimiser rapidement les images:

Malheureusement, l'optimisation des images ne suffit pas. Vous devez vous assurer que l'ensemble du site Web est réactif et a une belle apparence, quelle que soit la taille de l'écran. Cela peut être facilement réalisé via CSS, mais voici le problème:

Si vous souhaitez optimiser votre image pour les grands ou les petits écrans?

Si la majorité de votre public utilise des appareils mobiles pour accéder à votre site, le choix logique est donc d’optimiser les images pour les petits écrans. Cependant, il est probable que les visiteurs ayant un grand écran de plus de 17 ans génèrent une source de revenus importante. Vous ne voudriez certainement pas les négliger.

Heureusement, nous avons une technologie qui nous permet de fournir des images réactives optimisées pour différentes tailles d’écran. Cela signifie que nous devons générer plusieurs images optimisées avec des résolutions différentes adaptées à des tailles d'écran spécifiques ou à des points d'arrêt réactifs.

Pour les propriétaires de sites WordPress, ce type d'optimisation d'image nécessite l'utilisation d'un plugin et d'un service tiers. La création de ces images sensibles ne peut pas être effectuée sur le serveur d'hébergement sans ralentir considérablement le site pour les utilisateurs, d'où la nécessité d'un service tiers.

Si vous utilisez Gatsby pour gérer votre site Web, vous avez de la chance. . Cette fonctionnalité est intégrée et déjà configurée pour vous permettre d’optimiser vos images réactives. Il vous suffit de déposer des images et d'écrire un peu de code pour lier vos images réactives à votre page Web. Lorsque vous exécutez la commande gatsby build les images sont optimisées pour vous. Cela vous évite d'avoir recours à un service tiers pour effectuer l'optimisation à votre place. C'est tout simplement fait sur votre machine de déploiement.

Dans les sections suivantes, nous allons apprendre:

• Fonctionnement de l'optimisation d'images à Gatsby
• Comment optimiser les images sur une page Web
• Comment optimiser les images dans a Markdown post

Conditions préalables

Avant de commencer, je voudrais noter que ce didacticiel est destiné aux développeurs qui commencent tout juste avec Gatsby et qui souhaitent apprendre spécifiquement à gérer les images. Je suppose que vous avez déjà de bonnes bases dans les sujets suivants:

Ce tutoriel ne couvre pas les concepts de débutant pour Gatsby – nous avons un guide de démarrage pour Gatsby ici . Cela fait, passez à la section suivante pour mettre en place notre projet de démonstration. Vous pouvez voir le projet source terminé ici .

Configuration du projet de démonstration

En supposant qu'une version récente de Node.js soit déjà installée sur votre système, configurons rapidement un projet de démarrage de Gatsby: [19659018] npm installer -g gatsby-cli
gatsby new gatsby-image-demo
cd new gatsby-image-demo
npm start

Ce projet de démarrage inclut les dépendances et la configuration nécessaires à la création et au rendu d'images optimisées et réactives. Si vous avez utilisé un projet de démarrage différent ou si vous avez préféré commencer par un projet complètement vide, voici ce que vous devez faire:

 npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp système de fichiers gatsby-source

Ensuite, vous devrez configurer les dépendances comme suit dans gatsby-config.js :

 plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images'
      }
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
]

Si vous ouvrez http: // localhost: 8000 / vous devriez avoir la page Gatsby Default Starter avec une image PNG optimisée d'un astronaute. N'hésitez pas à parcourir le code du projet pour voir comment l'image a été chargée et rendue.

Cela semble assez compliqué, n'est-ce pas? Dans la section suivante, nous verrons ce dont il s'agit.

Optimisation de l'image dans Gatsby expliqué

Le rendu d'une image réactive optimisée sur une page Web est effectué à l'aide de Gatsby Image une réaction composant. Cela ressemble à ceci:

 import Image de 'gatsby-image';

Comme indiqué dans les exemples de code ci-dessus, le composant gatsby-image est conçu pour traiter:

• Fixed : image de largeur fixe et height
• Fluide : image avec une largeur maximale et éventuellement une hauteur

Cette option est utile si vous souhaitez afficher des images de la rétine. Notez que des barres de défilement apparaissent si la fenêtre du navigateur est redimensionnée à la largeur de l’image. Pour fluid l'image sera automatiquement redimensionnée en fonction de la taille de la fenêtre du navigateur. Les images plus petites ou plus grandes seront permutées automatiquement pour s’inscrire dans une fenêtre de jeu.

Maintenant que nous avons parlé de rendu, comment peut-on fournir des données d’image à un composant gatsby-image ?

Nous utilisons GraphQL pour charger une image à utiliser sur une page Web. Ce langage de requête nous permet d’accéder aux images du système de fichiers local, d’un site WordPress ou d’une API personnalisée. Vous aurez besoin d'un plug-in spécial pour accéder à un type d'emplacement particulier:

GraphQL non seulement récupère des actifs, mais est également capable de les traiter avant de les renvoyer à la fonction appelante. Dans le cas de l'optimisation d'image, nous avons affaire aux plugins suivants:

Le Gatsby Plugin Sharp est un plugin d'assistance de bas niveau permettant de réduire la taille de l'image avec une perte de perte de zéro ou minimale. qualité d'image. Il utilise la bibliothèque de traitement d'image Sharp pour effectuer cette tâche. Pour les JPEG, il génère des images progressives avec un niveau de qualité par défaut de 50. Pour les PNG, il utilise la bibliothèque pngquant avec un réglage de qualité de 50 à 75.

Le Gatsby Transformer Sharp ] Le plugin est responsable de la création d’images responsive. En d'autres termes, il exécute des fonctions de redimensionnement et de rognage pour générer différentes résolutions d'une image afin de permettre un affichage optimal sur les appareils mobiles, les tablettes et les grands écrans.

Dans la section suivante, nous examinerons l'utilisation pratique des technologies ci-dessus. .

Optimiser les images sur une page Web

Commençons par supprimer certaines images du dossier src / images :

. N'hésitez pas à utiliser n'importe quelle image de votre disque dur ou d'Internet. Si vous envisagez d’utiliser des photos reflex numériques haute résolution, je vous recommande au moins de réduire la taille à 700 Ko et au-dessous. L’utilisation d’images de grande taille prolongera inutilement le processus d’optimisation de la construction et augmentera la taille du référentiel de votre projet.

Maintenant, expliquons les requêtes GraphQL que nous utiliserons pour interroger nos images optimisées réactives. Ouvrez http: // localhost: 8000 / ___ graphql dans votre navigateur pour lancer les interfaces GraphQL Explorer et Query. Dans le panneau de l'explorateur, notez tous les nœuds disponibles. Dans notre cas, nous ne sommes intéressés que par les nœuds et childImageSharp . Vous trouverez ci-dessous une requête simple que j'ai construite. Le panneau de l'explorateur répertorie tous les paramètres et nœuds que vous pouvez utiliser pour définir votre requête:

Maintenant que nous avons défini une requête GraphQL, créons une nouvelle page, dire grado.js . Dans l'exemple de code suivant, nous allons rendre les images fixes fixes et fluides . Toutefois, pour la partie requête, nous utiliserons des fragments de requête GatsbyImageSharpFluid et GatsbyImageSharpFluid au lieu de répertorier tous les nœuds enfants requis (c'est-à-dire src . srcSet etc.). Notez que les fragments de requête ne sont pas encore pris en charge dans l'Explorateur de requêtes GraphQL.

 import Réagissez à partir de "réagir"
importer Image de 'gatsby-image';
importer {graphql} de "gatsby"

importer une disposition de "../components/layout"
importer le référencement de "../components/seo"

const GradoPage = ({data}) => (
  
    
    
 Grado Headphones ShowCase 
    
 Fluide 
    
    

    
 Corrigé 
      
    
 Grado Rs2e 
  
)

Exporter par défaut GradoPage

export const pageQuery = graphql`
  requête {
    gradoFluidImage: file (chemin relatif: {eq: "grado-rs2e.jpg"}) {
      childImageSharp {
        fluide (largeur maximale: 1000) {
          ... GatsbyImageSharpFluid
        }
      }
    }
    gradoFixedImage: file (chemin relatif: {eq: "grado-rs2e.jpg"}) {
      childImageSharp {
        fixe (largeur: 600, hauteur: 401) {
          ... GatsbyImageSharpFixed
        }
      }
    }
  }
`

En supposant que Gatsby fonctionne toujours, accédez à localhost: 8000 / grado :

03-fixed-vs-fluid « />

L'exemple ci-dessus vous montrera le visuel. différence entre les images fluides et fixes. L'image fluide correspondra toujours à la largeur du conteneur, tandis que l'image fixe restera statique quelle que soit la taille de la fenêtre d'affichage.

Dans l'exemple de code suivant, nous verrons comment répertorier plusieurs fluid . images sur la même page:

 const GradoPage = ({data}) => (
  
    
    
 Grado Casque ShowCase 
    
 Grado 
    
    

    
 Grado Boxed 
    
    

    
 Grado Mounted 
    
  
)

Exporter par défaut GradoPage

export const pageQuery = graphql`
  requête {
    grado: fichier (chemin relatif: {eq: "grado-rs2e.jpg"}) {
      childImageSharp {
        fluide (largeur maximale: 1000) {
          ... GatsbyImageSharpFluid
        }
      }
    }

    gradoBox: fichier (chemin relatif: {eq: "grado-rs2e-box.jpg"}) {
      childImageSharp {
        fluide (largeur maximale: 1000) {
          ... GatsbyImageSharpFluid
        }
      }
    }

    gradoMounted: file (chemin relatif: {eq: "grado-rs2e-monté.jpg"}) {
      childImageSharp {
        fluide (largeur maximale: 1000) {
          ... GatsbyImageSharpFluid
        }
      }
    }
  }
`

La page / grado devrait s'actualiser automatiquement. Vous devriez voir toutes les images apparaître sur la page. Si vous essayez de télécharger l'une des images directement à partir du navigateur, vous verrez que sa taille a été réduite. Dans mon cas, si je réduis le navigateur à la plus petite largeur, l’image «Grado Box» est réduite à 19,5 Ko. Lorsque j'agrandis le navigateur sur mon écran 17 ″ 1920 × 1080, la taille de l'image passe à 60,1 Ko, ce qui est toujours aussi net. Ce sont des chiffres assez impressionnants compte tenu de l'image source que j'ai placée dans le dossier images pèse 618 Ko à une résolution de 2500x1800px.

Vous avez peut-être remarqué que la requête semblait redondante. Nous pouvons simplifier en créant notre propre fragment de requête, comme suit:

 export const fluidImage = graphql`
  fragment fluidImage on File {
    childImageSharp {
      fluide (largeur maximale: 1000) {
        ... GatsbyImageSharpFluid
      }
    }
  }
`;

export const pageQuery = graphql`
  requête {
    grado: fichier (chemin relatif: {eq: "grado-rs2e.jpg"}) {
       ... fluideImage
    }

    gradoBox: fichier (chemin relatif: {eq: "grado-rs2e-box.jpg"}) {
       ... fluideImage
    }

    gradoMounted: file (chemin relatif: {eq: "grado-rs2e-monté.jpg"}) {
       ... fluideImage
    }
  }
`

Optimiser les images dans les publications et les pages de Markdown

Il existe deux façons d'optimiser les images dans les publications et les pages de Markdown:

1. Images en vedette

Les images en vedette sont généralement placées dans la section des métadonnées. Vous devez simplement spécifier un champ appelé en vedetteImage comme suit:

 ---
titre: First Post
sélectionnée Image: ./first-post-image.png
---

Placez le contenu ici

Ensuite, vous devez traiter la sélectionnée Image dans votre fichier de modèle Markdown, comme ceci:

 // src / templates / blog-post.js
---
exportation requête const = graphql`
  query PostQuery ($ slug: String!) {
    markdownRemark (champs: {slug: {eq: $ slug}}) {
      html
      frontmatter {
        Titre
        l'image sélectionnée {
          childImageSharp {
            fluide (largeur maximale: 800) {
              ... GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

Vous devez également importer le package gatsby-image afin de rendre votre image réactive optimisée:

 // src / templates / blog-post.js

importer Img de "gatsby-image"

export default ({data}) {
  let post = data.markdownRemark
    let FeaturedImgFluid = post.frontmatter.featuredImage.childImageSharp.fluid
    revenir(
        
          

            
 {post.frontmatter.title} 
            
            

          
        
    )
}

C’est tout. Tous vos messages Markdown auront le champ en vedetteImage optimisé pour les écrans réactifs.

2. Images en ligne

Pour les images en ligne utilisées dans les publications et les pages de Markdown, il vous suffit d'installer les plugins suivants:

 npm install gatsby-remarque-images

Vous aurez également besoin de gatsby-plugin-sharp et du système de fichiers gatsby-source- également. Ensuite, vous devrez configurer gatsby-remarque-images dans gatsby-config.js comme suit:

 module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
            },
          },
        ],
      },
    },
    {
      résoudre: `gatsby-source-filesystem`,
      options: {
        chemin: `$ {__ dirname} / src / pages`,
      },
    },
  ],
}

Dans vos publications et images Markdown, vous pouvez utiliser la syntaxe par défaut pour rendre les images. L’optimisation se fera automatiquement pour vous:

! [Post image] (./ mon-premier-post-image.png)

Résumé

J'espère que vous comprenez maintenant comment optimiser les images de manière réactive pour les sites Gatsby. Il existe quelques scénarios que nous n’avons pas décrits ici. Pour plus d’informations à ce sujet, consultez les pages relatives aux packages Gatsby:

J’écris un code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.