Imej Berprestasi dengan Imej Nuxt dan Cloudinary

Apabila orang bertanya kepada saya apakah cadangan pertama saya apabila cuba meningkatkan prestasi tapak web mereka, idea pertama saya ialah sentiasa melihat imej. Adakah ia disajikan dalam format moden dan dioptimumkan? Adakah saiznya betul? Adakah mereka malas dimuatkan dengan betul supaya penyemak imbas akan mula mengambilnya masa yang sebenarnya diperlukan?

Dan kerana itu, saya sentiasa cenderung untuk mula menggunakan imej berprestasi dalam projek saya dari awal lagi. Memandangkan rangka kerja web moden kegemaran saya ialah Nuxt, saya serta-merta memikirkan Nuxt Image - modul yang membantu anda menyampaikan lebih banyak imej berprestasi kepada pengguna anda. Tetapi untuk memberikan pengalaman yang lebih baik, anda boleh mengkonfigurasi modul Nuxt Image anda untuk berfungsi dengan salah satu daripada banyak pembekal imej pihak ketiga - dan di sini saya akan sentiasa memilih Cloudinary ?

Dalam artikel ini, saya akan menunjukkan kepada anda cara anda boleh menggunakan Nuxt Image dan Cloudinary untuk menyampaikan imej yang dioptimumkan dan berprestasi kepada pengguna anda.

Saya harap anda akan menyukainya :)

Nikmati!

? Imej berprestasi dengan Imej Nuxt dan Cloudinary

Perkara pertama yang perlu kami lakukan untuk mendapatkan imej berprestasi ini ialah memasang modul Nuxt Image dalam projek kami. Kita boleh melakukannya dengan menggunakan nuxi seperti berikut:

npx nuxi@latest module add image

Ini akan menambah modul pada projek kami dengan konfigurasi lalai (tempatan). Untuk bekerja dengan Cloudinary, kami perlu menukarnya kepada berikut:

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

Pembekal Cloudinary untuk Nuxt Image secara automatik mendayakan pemilihan format automatik dan pemilihan kualiti automatik untuk prestasi terbaik. Dan ini bermakna, kita tidak perlu menjaga aspek ini melainkan kes penggunaan kita berbeza daripada yang paling biasa.

Selain daripada kualiti automatik dan pemilihan format, terdapat beberapa perkara yang boleh kami lakukan untuk menyampaikan imej yang lebih berprestasi dan dioptimumkan kepada pengguna kami.

Pertama, kami boleh mengkonfigurasi sifat saiz imej kami yang akan digunakan untuk menjana versi imej yang diubah saiz dan dioptimumkan. Ia boleh dilakukan seperti berikut:

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

Seterusnya, kami boleh menambah pengubah suai global yang akan ditambahkan pada semua imej kami seperti berikut:

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

Dan akhirnya, untuk komponen NuxtImg itu sendiri, kita boleh lulus prop berikut untuk mencapai prestasi yang lebih baik:

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

Anda boleh menyemak semua senarai prop yang tersedia di sini

Walau bagaimanapun, jika anda mencari penggunaan Cloudinary yang lebih maju atau komponen prabina seperti VideoPlayer, OgImage atau ProductGallery, lihat modul Cloudinary untuk Nuxt dengan melawati dokumentasi modul atau repositori GitHub.

Saya juga telah menerbitkan beberapa artikel mengenainya yang boleh anda lihat di sini.

? Ketahui lebih lanjut

Jika anda ingin mengetahui lebih lanjut tentang Vue, Nuxt, JavaScript atau teknologi berguna lain, semak VueSchool dengan mengklik pautan ini atau dengan mengklik imej di bawah:

Ia merangkumi konsep yang paling penting semasa membina aplikasi Vue atau Nuxt moden yang boleh membantu anda dalam kerja harian atau projek sampingan anda ?

✅ Ringkasan

Syabas! Anda baru sahaja mempelajari cara menggunakan kedua-dua modul Nuxt Image dan Nuxt Cloudinary untuk menyampaikan imej berprestasi kepada pengguna anda.

Berhati-hati dan jumpa anda lain kali!

Dan selamat mengekod seperti biasa ?️

Atas ialah kandungan terperinci Imej Berprestasi dengan Imej Nuxt dan Cloudinary. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!