Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Imaginile sunt o parte importantă a oricărui site web sau aplicație. Ele ajută la ca conținutul să fie mai captivant și mai atrăgător din punct de vedere vizual.

Cu toate acestea, dacă imaginile nu sunt optimizate corespunzător, ele pot încetini și un site sau o aplicație.

De ce să optimizați imaginile?

Există câteva motive pentru care este important să optimizați imaginile.

  • Poate ajuta la îmbunătățirea timpului de încărcare a site-ului sau a aplicației.
  • Poate reduce cantitatea de date pe care un client trebuie să le descarce, ceea ce poate economisi costurile lățimii de bandă.
  • Poate ajuta la îmbunătățirea performanței generale a site-ului sau a aplicației.

Cum să optimizați imaginile în Next.js

Există mai multe moduri în care puteți optimiza imaginile în Next.js. Una este să folosiți componenta Image. Această componentă optimizează automat imaginile pentru performanță.

instagram viewer

O altă modalitate de optimizare a imaginilor este utilizarea capacităților de procesare a imaginilor încorporate. Next.js poate redimensiona, comprima și optimiza automat imaginile pentru performanță.

În cele din urmă, puteți utiliza o bibliotecă terță parte, cum ar fi react-optimized-image. Această bibliotecă oferă o varietate de capabilități de optimizare a imaginii.

Utilizarea componentei Image

Componenta Imagine este cea mai simplă modalitate de a optimiza imaginile în Next.js. Pentru a-l folosi, pur și simplu importați componenta din următorul/imaginea pachet.

După ce ați importat componenta, o puteți utiliza ca oricare alta în React. Componenta Imagine are câteva elemente de recuzită pe care le puteți folosi pentru a controla modul în care redă imaginile.

import Imagine din „următorul/imaginea”

exportMod implicitfuncţieMyImage() {
întoarcere (
<Imagine
src="/my-image.jpg"
latime="200"
inaltime="200"
calitate="100"
alt="Imaginea mea"
/>
)
}

În acest exemplu, componenta Image redă o imagine cu o lățime de 200px și o înălțime de 200px. De asemenea, puteți utiliza CSS sau un cadru ca Tailwind pentru a vă stila aplicația și imaginile.

Unele dintre elementele de recuzită necesare pentru componenta Imagine sunt lățimea, înălțimea, src și alt. Src prop este adresa URL a imaginii pe care doriți să o utilizați. Utilizați elementele de recuzită pentru lățime și înălțime pentru a seta lățimea și înălțimea imaginii, în pixeli. Elementul alternativ este textul alternativ pentru imagine.

Unele elemente de recuzită opționale pentru componenta Imagine sunt aspectul, încărcătorul, substituentul și prioritatea. Elementul de sprijin pentru aspect specifică aspectul imaginii. Puteți utiliza suportul de încărcare pentru a specifica un încărcător de imagini personalizat. Substituentul specifică un substituent de imagine personalizat. Elementul de recuzită cu prioritate specifică prioritatea imaginii.

Unele dintre beneficiile utilizării componentei Image sunt:

  • Performanta imbunatatita: Unul dintre principalele beneficii ale utilizării componentei Image este performanța îmbunătățită. Componenta optimizează automat imaginile pentru performanță.
  • Redimensionarea automată a imaginii: Un alt avantaj al utilizării componentei Image este redimensionarea automată a imaginii. Componenta poate redimensiona automat imaginile pentru a se potrivi cu lățimea și înălțimea recuzitei.
  • Compresie automată a imaginii: De asemenea, componenta Imagine poate comprima automat imaginile pentru a reduce dimensiunea fișierului.
  • Suport pentru încărcare leneră: Componenta Imagine acceptă și încărcarea leneșă. Aceasta înseamnă că va încărca imagini numai atunci când acestea sunt vizibile pe ecran.

Utilizarea unei biblioteci terță parte

Dacă aveți nevoie de mai mult control asupra optimizării imaginii, puteți utiliza o bibliotecă terță parte, cum ar fi imagine-optimizată-reacție. Această bibliotecă oferă o varietate de capabilități de optimizare a imaginii.

Unele dintre caracteristicile react-optimized-image includ:

  • Optimizați imaginile pe client și server: react-optimized-image poate optimiza imaginile de pe client și server. Aceasta înseamnă că imaginile sunt optimizate pentru performanță, precum și pentru dimensiunea fișierului.
  • Redimensionarea automată a imaginii: react-optimized-image poate redimensiona automat imaginile pentru a se potrivi cu recuzita lățimii și înălțimii.
  • Comprimarea automată a imaginii: react-optimized-image poate, de asemenea, să comprima automat imaginile pentru a reduce dimensiunea fișierului.
  • Suport pentru încărcare leneră: react-optimized-image acceptă și încărcarea leneșă. Aceasta înseamnă că va încărca imagini numai atunci când acestea sunt vizibile pe ecran.
  • Suport pentru mai multe formate de imagine: react-optimized-image acceptă mai multe formate de imagine, inclusiv JPEG, PNG și WebP.

Pentru a utiliza react-optimized-image, pur și simplu instalați biblioteca cu npm.

După ce ați instalat biblioteca, o puteți importa în proiect.

import fig din „imagine-optimizată-reacție”

exportMod implicitfuncţieNextImg() {
întoarcere (
<fig
src="/my-image.jpg"
dimensiuni={[400, 800]}
alt="Imaginea mea"
/>
)
}

De asemenea, puteți utiliza fișiere SVG cu imagine optimizată pentru reacții.

import {Svg} din „imagine-optimizată-reacție”

exportMod implicitfuncţieNextImg() {
întoarcere (
<Svg
src="/my-image.svg"
className=“umplut-rosu”
/>
)
}

Acest exemplu folosește prop className pentru a specifica un nume de clasă pentru SVG. Puteți utiliza acel nume de clasă pentru a stila SVG-ul cu CSS sau puteți interacționa cu acesta folosind JavaScript.

react-optimized-image oferă, de asemenea, câteva alte beneficii față de capabilitățile de optimizare a imaginii încorporate.

Un avantaj al utilizării unui pachet față de funcțiile încorporate este că poate genera automat diferite dimensiuni de imagini. Aceasta înseamnă că nu trebuie să creați versiuni diferite ale aceleiași imagini.

Un alt avantaj este că poate servi automat dimensiunea adecvată a imaginii pentru dispozitivul utilizatorului. Aceasta înseamnă că dispozitivele cu ecrane de înaltă rezoluție vor obține o imagine de înaltă rezoluție, iar dispozitivele cu ecrane de rezoluție scăzută vor obține o imagine de rezoluție scăzută.

În cele din urmă, imaginea-optimizată-reacție este o imagine completă proiect open-source. Aceasta înseamnă că puteți contribui la bibliotecă dacă aveți nevoie de o funcție specifică sau de remediere a erorilor.

Ce metodă ar trebui să utilizați?

Deci, ce metodă ar trebui să utilizați pentru a optimiza imaginile în Next.js?

Dacă aveți nevoie de optimizare de bază a imaginii, atunci puteți utiliza capacitățile de procesare a imaginii încorporate. Acesta este cel mai simplu mod de a începe optimizarea imaginii.

Dacă aveți nevoie de mai mult control asupra optimizării imaginii, atunci puteți utiliza o bibliotecă terță parte, cum ar fi react-optimized-image. Această bibliotecă oferă capabilități mai avansate de optimizare a imaginii.

Dacă aveți nevoie de cea mai bună performanță absolută, atunci puteți utiliza o combinație dintre capabilitățile de procesare a imaginilor încorporate și o bibliotecă terță parte. Acest lucru vă va oferi tot ce este mai bun din ambele lumi. Cu toate acestea, această abordare nu este recomandată pentru începători, deoarece necesită mai multă configurare.

Îmbunătățiți SEO cu imagini optimizate

Prin optimizarea imaginilor de pe site-ul sau aplicația dvs., vă puteți îmbunătăți SEO. Algoritmul Google ia în considerare viteza de încărcare a site-urilor web și a aplicațiilor. Dacă site-ul sau aplicația dvs. se încarcă lent, aceasta va avea un impact negativ asupra SEO.

Cu imagini optimizate, puteți îmbunătăți timpul de încărcare al site-ului sau al aplicației dvs., ceea ce vă poate îmbunătăți SEO. După aceea, puteți adăuga și un protocol de grafic deschis pentru o performanță și mai bună.