Des images performantes avec Nuxt Image et Cloudinary

Quand les gens me demandent quelle est ma première recommandation pour essayer d'améliorer les performances de leurs sites Web, ma première idée est toujours de regarder les images. Sont-ils servis dans des formats modernes et optimisés ? Sont-ils correctement dimensionnés ? Sont-ils chargés correctement pour que le navigateur commence à les récupérer au moment où ils sont réellement nécessaires ?

Et pour cette raison, j'ai toujours tendance à commencer à utiliser des images performantes dans mes projets dès le début. Comme mon framework Web moderne préféré est Nuxt, j'ai immédiatement pensé à Nuxt Image - un module qui vous aide à fournir des images plus performantes à vos utilisateurs. Mais afin d'offrir une expérience encore meilleure, vous pouvez configurer votre module Nuxt Image pour qu'il fonctionne avec l'un des nombreux fournisseurs d'images tiers - et ici, je choisirai toujours Cloudinary ?

Dans cet article, je vais vous montrer comment utiliser Nuxt Image et Cloudinary pour fournir des images optimisées et performantes à vos utilisateurs.

J'espère que vous l'aimerez :)

Profitez !

? Des images performantes avec Nuxt Image et Cloudinary

La première chose que nous devons faire pour avoir ces images performantes est d'installer le module Nuxt Image dans notre projet. Nous pouvons le faire en utilisant nuxi comme suit :

npx nuxi@latest module add image

Cela ajoutera le module à notre projet avec la configuration (locale) par défaut. Afin de travailler avec Cloudinary, nous devrons changer cela comme suit :

export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'
    }
  }
})

Le fournisseur Cloudinary pour Nuxt Image active automatiquement la sélection automatique du format et la sélection automatique de la qualité pour de meilleures performances. Et cela signifie que nous n'avons pas besoin de nous occuper de ces aspects à moins que notre cas d'utilisation soit différent des plus courants.

Outre la sélection automatique de la qualité et du format, nous pourrions faire plusieurs choses pour fournir des images plus performantes et optimisées à nos utilisateurs.

Tout d'abord, nous pouvons configurer la propriété de tailles de nos images qui sera utilisée pour générer des versions redimensionnées et optimisées d'une image. Cela peut être fait comme suit :

export default defineNuxtConfig({
  image: {
    screens: {
      'xs': 320,
      'sm': 640,
      'md': 768,
      'lg': 1024,
      'xl': 1280,
      'xxl': 1536,
      '2xl': 1536
    },
  }
})

Ensuite, nous pouvons ajouter des modificateurs globaux qui seront ajoutés à toutes nos images comme suit :

export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',
      modifiers: {
        quality: 'auto:best',
      }
    }
  }
})

Et enfin, pour le composant NuxtImg lui-même, nous pourrions passer les accessoires suivants pour obtenir de meilleures performances :

<NuxtImg src="/nuxt-icon.png" loading="lazy" />

Vous pouvez consulter toute la liste des accessoires disponibles ici

Cependant, si vous recherchez une utilisation plus avancée de Cloudinary ou des composants prédéfinis tels que VideoPlayer, OgImage ou ProductGallery, consultez le module Cloudinary pour Nuxt en visitant la documentation du module ou le référentiel GitHub.

J'ai également publié quelques articles à ce sujet que vous pouvez consulter ici.

? Apprendre encore plus

Si vous souhaitez en savoir plus sur Vue, Nuxt, JavaScript ou d'autres technologies utiles, consultez VueSchool en cliquant sur ce lien ou en cliquant sur l'image ci-dessous :

Il couvre les concepts les plus importants lors de la création d'applications Vue ou Nuxt modernes qui peuvent vous aider dans votre travail quotidien ou vos projets parallèles ?

✅Résumé

Bravo ! Vous venez d'apprendre à utiliser à la fois le module Nuxt Image et Nuxt Cloudinary pour fournir des images performantes à votre utilisateur.

Prends soin de toi et à la prochaine fois !

Et bon codage comme toujours ?️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!