Le immagini sono una parte importante di qualsiasi sito Web o applicazione. Aiutano a rendere il contenuto più coinvolgente e visivamente accattivante.
Tuttavia, se le immagini non sono ottimizzate correttamente, possono anche rallentare un sito o un'app.
Perché ottimizzare le immagini?
Ci sono alcuni motivi per cui è importante ottimizzare le immagini.
- Può aiutare a migliorare il tempo di caricamento del sito o dell'applicazione.
- Può ridurre la quantità di dati che un client deve scaricare, il che può far risparmiare sui costi della larghezza di banda.
- Può aiutare a migliorare le prestazioni complessive del sito o dell'applicazione.
Come ottimizzare le immagini in Next.js
Esistono diversi modi per ottimizzare le immagini in Next.js. Uno consiste nell'utilizzare il componente Immagine. Questo componente ottimizza automaticamente le immagini per le prestazioni.
Un altro modo per ottimizzare le immagini consiste nell'utilizzare le funzionalità di elaborazione delle immagini integrate. Next.js può ridimensionare, comprimere e ottimizzare automaticamente le immagini per le prestazioni.
Infine, puoi utilizzare una libreria di terze parti come react-optimized-image. Questa libreria offre una varietà di funzionalità di ottimizzazione delle immagini.
Utilizzo del componente immagine
Il componente Immagine è il modo più semplice per ottimizzare le immagini in Next.js. Per usarlo è sufficiente importare il componente dal file successivo/immagine pacchetto.
Una volta importato il componente, puoi usarlo come qualsiasi altro in React. Il componente Immagine ha alcuni oggetti di scena che puoi usare per controllare il modo in cui esegue il rendering delle immagini.
importare Immagine da 'successiva/immagine'esportarepredefinitofunzioneLa mia immagine() {
ritorno (
<Immagine
sorgente="/my-image.jpg"
larghezza="200"
altezza="200"
qualità="100"
alternativo="La mia immagine"
/>
)
}
In questo esempio, il componente Immagine esegue il rendering di un'immagine con una larghezza di 200 px e un'altezza di 200 px. Puoi anche usare CSS o un framework come Tailwind per dare uno stile alla tua app e alle tue immagini.
Alcuni degli oggetti di scena richiesti per il componente Immagine sono width, height, src e alt. Il prop src è l'URL dell'immagine che vuoi usare. Usa i parametri di larghezza e altezza per impostare la larghezza e l'altezza dell'immagine, in pixel. L'alt prop è il testo alternativo per l'immagine.
Alcuni oggetti di scena facoltativi per il componente Immagine sono layout, caricatore, segnaposto e priorità. Il layout prop specifica il layout dell'immagine. È possibile utilizzare l'elica del caricatore per specificare un caricatore di immagini personalizzato. L'elica segnaposto specifica un segnaposto immagine personalizzato. Il puntello di priorità specifica la priorità dell'immagine.
Alcuni dei vantaggi dell'utilizzo del componente Immagine sono:
- Prestazione migliorata: Uno dei principali vantaggi dell'utilizzo del componente Immagine è il miglioramento delle prestazioni. Il componente ottimizza automaticamente le immagini per le prestazioni.
- Ridimensionamento automatico delle immagini: Un altro vantaggio dell'utilizzo del componente Immagine è il ridimensionamento automatico dell'immagine. Il componente può ridimensionare automaticamente le immagini per adattarle agli oggetti di scena di larghezza e altezza.
- Compressione automatica delle immagini: Il componente Immagine può anche comprimere automaticamente le immagini per ridurre le dimensioni del file.
- Supporto per il caricamento pigro: Il componente Immagine supporta anche il caricamento lento. Ciò significa che caricherà le immagini solo quando sono visibili sullo schermo.
Utilizzo di una libreria di terze parti
Se hai bisogno di un maggiore controllo sull'ottimizzazione delle immagini, puoi utilizzare una libreria di terze parti come immagine ottimizzata per la reazione. Questa libreria offre una varietà di funzionalità di ottimizzazione delle immagini.
Alcune delle caratteristiche dell'immagine ottimizzata per la reazione includono:
- Ottimizza le immagini sul client e sul server: react-optimized-image può ottimizzare le immagini sul client e sul server. Ciò significa che le immagini sono ottimizzate per le prestazioni e per le dimensioni del file.
- Ridimensionamento automatico dell'immagine: react-optimized-image può ridimensionare automaticamente le immagini per adattarle agli oggetti di scena di larghezza e altezza.
- Compressione automatica delle immagini: react-optimized-image può anche comprimere automaticamente le immagini per ridurre le dimensioni del file.
- Supporto per il caricamento pigro: react-optimized-image supporta anche il lazy loading. Ciò significa che caricherà le immagini solo quando sono visibili sullo schermo.
- Supporto per più formati di immagine: react-optimized-image supporta più formati di immagine, inclusi JPEG, PNG e WebP.
Per utilizzare l'immagine ottimizzata per la reazione, è sufficiente installare la libreria con npm.
Dopo aver installato la libreria, puoi importarla nel tuo progetto.
importare Imm da 'immagine ottimizzata per la reazione'esportarepredefinitofunzioneNextImg() {
ritorno (
<Imm
sorgente="/my-image.jpg"
dimensioni={[400, 800]}
alternativo="La mia immagine"
/>
)
}
Puoi anche utilizzare i file SVG con l'immagine ottimizzata per la reazione.
importare {SVG} da 'immagine ottimizzata per la reazione'esportarepredefinitofunzioneNextImg() {
ritorno (
<SVG
sorgente="/my-image.svg"
nomeclasse=“pieno di rosso”
/>
)
}
Questo esempio utilizza la prop className per specificare un nome di classe per SVG. Puoi usare quel nome di classe per modellare l'SVG con CSS o interagire con esso usando JavaScript.
react-optimized-image offre anche alcuni altri vantaggi rispetto alle funzionalità di ottimizzazione delle immagini integrate.
Uno dei vantaggi dell'utilizzo di un pacchetto rispetto alle funzionalità integrate è che può generare automaticamente immagini di dimensioni diverse. Ciò significa che non è necessario creare versioni diverse della stessa immagine.
Un altro vantaggio è che può servire automaticamente la dimensione appropriata dell'immagine per il dispositivo dell'utente. Ciò significa che i dispositivi con schermi ad alta risoluzione riceveranno un'immagine ad alta risoluzione e i dispositivi con schermi a bassa risoluzione riceveranno un'immagine a bassa risoluzione.
Infine, l'immagine ottimizzata per la reazione è completamente progetto open source. Ciò significa che puoi contribuire alla libreria se hai bisogno di una funzionalità specifica o di una correzione di bug.
Quale metodo dovresti usare?
Quindi, quale metodo dovresti usare per ottimizzare le immagini in Next.js?
Se hai bisogno di un'ottimizzazione delle immagini di base, puoi utilizzare le funzionalità di elaborazione delle immagini integrate. Questo è il modo più semplice per iniziare con l'ottimizzazione delle immagini.
Se hai bisogno di un maggiore controllo sull'ottimizzazione delle immagini, puoi utilizzare una libreria di terze parti come react-optimized-image. Questa libreria offre funzionalità di ottimizzazione delle immagini più avanzate.
Se hai bisogno delle migliori prestazioni in assoluto, puoi utilizzare una combinazione delle capacità di elaborazione delle immagini integrate e una libreria di terze parti. Questo ti darà il meglio di entrambi i mondi. Tuttavia, questo approccio non è consigliato ai principianti poiché richiede più configurazione.
Migliora la SEO con immagini ottimizzate
Ottimizzando le immagini sul tuo sito web o app, puoi migliorare il tuo SEO. L'algoritmo di Google tiene conto della velocità di caricamento di siti Web e app. Se il tuo sito web o la tua app si caricano lentamente, avrà un impatto negativo sulla tua SEO.
Con immagini ottimizzate, puoi migliorare il tempo di caricamento del tuo sito Web o della tua app, il che può migliorare il tuo SEO. Successivamente, puoi anche aggiungere il protocollo Open Graph per prestazioni ancora migliori.
