Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Slike su važan dio svake web stranice ili aplikacije. Oni pomažu da sadržaj bude privlačniji i vizualno privlačniji.

Međutim, ako slike nisu ispravno optimizirane, one također mogu usporiti web mjesto ili aplikaciju.

Zašto optimizirati slike?

Postoji nekoliko razloga zašto je važno optimizirati slike.

  • Može pomoći u poboljšanju vremena učitavanja stranice ili aplikacije.
  • Može smanjiti količinu podataka koje klijent treba preuzeti, što može uštedjeti na troškovima propusnosti.
  • Može pomoći u poboljšanju ukupne izvedbe web mjesta ili aplikacije.

Kako optimizirati slike u Next.js

Postoji nekoliko načina na koje možete optimizirati slike u Next.js. Jedan je korištenje komponente Image. Ova komponenta automatski optimizira slike za performanse.

Drugi način optimiziranja slika je korištenje ugrađenih mogućnosti obrade slika. Next.js može automatski promijeniti veličinu, komprimirati i optimizirati slike za performanse.

instagram viewer

Konačno, možete koristiti biblioteku treće strane kao što je react-optimized-image. Ova biblioteka pruža razne mogućnosti optimizacije slike.

Korištenje komponente slike

Komponenta slike je najlakši način za optimizaciju slika u Next.js. Da biste ga koristili, jednostavno uvezite komponentu iz sljedeća/slika paket.

Nakon što ste uvezli komponentu, možete je koristiti kao bilo koju drugu u Reactu. Komponenta slike ima nekoliko rekvizita koje možete koristiti za kontrolu načina na koji prikazuje slike.

uvoz Slika iz 'sljedeća/slika'

izvozzadanofunkcijaMyImage() {
povratak (
<Slika
src="/my-image.jpg"
širina="200"
visina="200"
kvaliteta="100"
alt="Moja slika"
/>
)
}

U ovom primjeru, komponenta slike prikazuje sliku širine 200 piksela i visine 200 piksela. Također možete koristiti CSS ili okvir poput Tailwinda za stiliziranje vaše aplikacije i slika.

Neki od potrebnih rekvizita za komponentu slike su širina, visina, src i alt. Src prop je URL slike koju želite koristiti. Upotrijebite propise za širinu i visinu za postavljanje širine i visine slike u pikselima. Alt prop je alternativni tekst za sliku.

Neki dodatni dodaci za komponentu slike su izgled, učitavač, rezervirano mjesto i prioritet. Prop layout specificira izgled slike. Možete koristiti propis učitavača da navedete prilagođeni učitavač slika. Prop rezerviranog mjesta specificira prilagođeno rezervirano mjesto za sliku. Oznaka prioriteta određuje prioritet slike.

Neke od prednosti korištenja komponente slike su:

  • Poboljšane performanse: Jedna od glavnih prednosti korištenja komponente Image je poboljšana izvedba. Komponenta automatski optimizira slike za performanse.
  • Automatska promjena veličine slike: Još jedna prednost korištenja komponente Image je automatska promjena veličine slike. Komponenta može automatski promijeniti veličinu slike kako bi odgovarala širini i visini rekvizite.
  • Automatska kompresija slike: Komponenta Image također može automatski komprimirati slike kako bi se smanjila veličina datoteke.
  • Podrška za lijeno učitavanje: Komponenta slike također podržava odlagano učitavanje. To znači da će učitati samo slike kada su vidljive na zaslonu.

Korištenje biblioteke treće strane

Ako vam je potrebna veća kontrola nad optimizacijom slike, možete koristiti biblioteku treće strane poput reakcija-optimizirana-slika. Ova biblioteka pruža razne mogućnosti optimizacije slike.

Neke od značajki react-optimized-image uključuju:

  • Optimizirajte slike na klijentu i poslužitelju: react-optimized-image može optimizirati slike na klijentu i poslužitelju. To znači da su slike optimizirane za performanse kao i za veličinu datoteke.
  • Automatska promjena veličine slike: react-optimized-image može automatski promijeniti veličinu slika kako bi odgovarale rekvizitima širine i visine.
  • Automatska kompresija slike: react-optimized-image također može automatski komprimirati slike kako bi se smanjila veličina datoteke.
  • Podrška za odlagano učitavanje: react-optimized-image također podržava odgođeno učitavanje. To znači da će učitati samo slike kada su vidljive na zaslonu.
  • Podrška za više formata slika: react-optimized-image podržava više formata slika, uključujući JPEG, PNG i WebP.

Da biste koristili react-optimized-image, jednostavno instalirajte biblioteku s npm-om.

Nakon što instalirate biblioteku, možete je uvesti u svoj projekt.

uvoz Sl iz 'react-optimized-image'

izvozzadanofunkcijaNextImg() {
povratak (
<Sl
src="/my-image.jpg"
veličine={[400, 800]}
alt="Moja slika"
/>
)
}

Također možete koristiti SVG datoteke sa react-optimized-imageom.

uvoz {Svg} iz 'react-optimized-image'

izvozzadanofunkcijaNextImg() {
povratak (
<Svg
src="/my-image.svg"
ime klase=“ispunjeno-crveno”
/>
)
}

Ovaj primjer koristi prop className za određivanje naziva klase za SVG. Možete koristiti taj naziv klase za stiliziranje SVG-a pomoću CSS-a ili za interakciju s njim pomoću JavaScripta.

react-optimized-image također pruža nekoliko drugih prednosti u odnosu na ugrađene mogućnosti optimizacije slike.

Jedna od prednosti korištenja paketa u odnosu na ugrađene značajke jest da može automatski generirati različite veličine slika. To znači da ne morate stvarati različite verzije iste slike.

Još jedna prednost je što može automatski poslužiti odgovarajuću veličinu slike za korisnikov uređaj. To znači da će uređaji sa zaslonima visoke rezolucije dobiti sliku visoke rezolucije, a uređaji sa zaslonima niske rezolucije sliku niske rezolucije.

Konačno, React-optimized-image potpuno je open-source projekt. To znači da možete pridonijeti biblioteci ako trebate određenu značajku ili ispravak programske pogreške.

Koju biste metodu trebali koristiti?

Dakle, koju biste metodu trebali koristiti za optimizaciju slika u Next.js?

Ako trebate osnovnu optimizaciju slike, tada možete koristiti ugrađene mogućnosti obrade slike. Ovo je najlakši način za početak optimizacije slike.

Ako vam je potrebna veća kontrola nad optimizacijom slike, možete koristiti biblioteku treće strane kao što je react-optimized-image. Ova biblioteka pruža naprednije mogućnosti optimizacije slike.

Ako trebate apsolutno najbolju izvedbu, tada možete koristiti kombinaciju ugrađenih mogućnosti obrade slike i biblioteke treće strane. Ovo će vam dati najbolje od oba svijeta. Međutim, ovaj se pristup ne preporučuje početnicima jer zahtijeva više podešavanja.

Poboljšajte SEO s optimiziranim slikama

Optimiziranjem slika na svojoj web stranici ili aplikaciji možete poboljšati svoj SEO. Googleov algoritam uzima u obzir brzinu učitavanja web stranica i aplikacija. Ako se vaše web mjesto ili aplikacija sporo učitavaju, to će negativno utjecati na vaš SEO.

S optimiziranim slikama možete poboljšati vrijeme učitavanja vaše web stranice ili aplikacije, što može poboljšati vaš SEO. Nakon toga možete dodati i otvoreni graf protokol za još bolje performanse.