Leistungsstarke Bilder mit Nuxt Image und Cloudinary

Wenn Leute mich fragen, was meine erste Empfehlung ist, wenn ich versuche, die Leistung ihrer Websites zu verbessern, ist meine erste Idee immer, einen Blick auf die Bilder zu werfen. Werden sie in den modernen und optimierten Formaten serviert? Haben sie die richtige Größe? Werden sie richtig verzögert geladen, sodass der Browser sie dann abruft, wenn sie tatsächlich benötigt werden?

Aus diesem Grund verwende ich in meinen Projekten immer von Anfang an leistungsstarke Bilder. Da Nuxt mein liebstes modernes Web-Framework ist, habe ich sofort an Nuxt Image gedacht – ein Modul, das Ihnen hilft, Ihren Benutzern leistungsfähigere Bilder bereitzustellen. Aber um ein noch besseres Erlebnis zu bieten, können Sie Ihr Nuxt Image-Modul so konfigurieren, dass es mit einem der vielen Drittanbieter von Bildern zusammenarbeitet – und hier werde ich immer Cloudinary wählen?

In diesem Artikel zeige ich Ihnen, wie Sie Nuxt Image und Cloudinary verwenden können, um Ihren Benutzern optimierte und leistungsstarke Bilder bereitzustellen.

Ich hoffe, es wird dir gefallen :)

Viel Spaß!

? Leistungsstarke Bilder mit Nuxt Image und Cloudinary

Um diese leistungsstarken Bilder zu erhalten, müssen wir zunächst das Nuxt Image-Modul in unserem Projekt installieren. Wir können dies tun, indem wir Nuxi wie folgt verwenden:

npx nuxi@latest module add image

Dadurch wird das Modul mit der Standardkonfiguration (lokal) zu unserem Projekt hinzugefügt. Um mit Cloudinary arbeiten zu können, müssten wir das wie folgt ändern:

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

Der Cloudinary-Anbieter für Nuxt Image ermöglicht automatisch die automatische Formatauswahl und automatische Qualitätsauswahl für beste Leistung. Und das bedeutet, dass wir uns um diese Aspekte nicht kümmern müssen, es sei denn, unser Anwendungsfall unterscheidet sich von den häufigsten.

Abgesehen von der automatischen Qualitäts- und Formatauswahl gibt es mehrere Dinge, die wir tun können, um unseren Benutzern leistungsfähigere und optimierte Bilder zu liefern.

Zuerst können wir die Größeneigenschaft unserer Bilder konfigurieren, die verwendet wird, um größenveränderte und optimierte Versionen eines Bildes zu generieren. Dies kann wie folgt erfolgen:

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

Als nächstes können wir globale Modifikatoren hinzufügen, die allen unseren Bildern hinzugefügt werden, wie folgt:

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

Und schließlich könnten wir für die NuxtImg-Komponente selbst die folgenden Requisiten übergeben, um eine bessere Leistung zu erzielen:

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

Sie können die gesamte Liste der verfügbaren Requisiten hier einsehen

Wenn Sie jedoch nach einer erweiterten Cloudinary-Nutzung oder vorgefertigten Komponenten wie VideoPlayer, OgImage oder ProductGallery suchen, schauen Sie sich das Cloudinary-Modul für Nuxt an, indem Sie die Moduldokumentation oder das GitHub-Repository besuchen.

Ich habe auch einige Artikel darüber veröffentlicht, die Sie hier lesen können.

? Erfahren Sie mehr

Wenn Sie mehr über Vue, Nuxt, JavaScript oder andere nützliche Technologien erfahren möchten, besuchen Sie VueSchool, indem Sie auf diesen Link oder auf das Bild unten klicken:

Es behandelt die wichtigsten Konzepte beim Erstellen moderner Vue- oder Nuxt-Anwendungen, die Ihnen bei Ihrer täglichen Arbeit oder Nebenprojekten helfen können?

✅ Zusammenfassung

Gut gemacht! Sie haben gerade gelernt, wie Sie sowohl das Nuxt Image- als auch das Nuxt Cloudinary-Modul verwenden, um Ihrem Benutzer leistungsstarke Bilder bereitzustellen.

Mach's gut und bis zum nächsten Mal!

Und wie immer viel Spaß beim Codieren ?️

Das obige ist der detaillierte Inhalt vonLeistungsstarke Bilder mit Nuxt Image und Cloudinary. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!