Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Slike so pomemben del vsakega spletnega mesta ali aplikacije. Pomagajo narediti vsebino bolj privlačno in vizualno privlačno.

Če pa slike niso pravilno optimizirane, lahko tudi upočasnijo spletno mesto ali aplikacijo.

Zakaj optimizirati slike?

Obstaja nekaj razlogov, zakaj je pomembno optimizirati slike.

  • Pomaga lahko izboljšati čas nalaganja spletnega mesta ali aplikacije.
  • Lahko zmanjša količino podatkov, ki jih mora odjemalec prenesti, kar lahko prihrani pri stroških pasovne širine.
  • Lahko pomaga izboljšati splošno delovanje spletnega mesta ali aplikacije.

Kako optimizirati slike v Next.js

Slike v Next.js lahko optimizirate na več načinov. Ena je uporaba komponente Image. Ta komponenta samodejno optimizira slike za učinkovitost.

Drug način za optimizacijo slik je uporaba vgrajenih zmožnosti za obdelavo slik. Next.js lahko samodejno spremeni velikost, stisne in optimizira slike za večjo zmogljivost.

instagram viewer

Končno lahko uporabite knjižnico tretjih oseb, kot je react-optimized-image. Ta knjižnica ponuja različne možnosti za optimizacijo slike.

Uporaba komponente slike

Komponenta Image je najlažji način za optimizacijo slik v Next.js. Če ga želite uporabiti, preprosto uvozite komponento iz naslednja/slika paket.

Ko uvozite komponento, jo lahko uporabljate kot katero koli drugo v Reactu. Komponenta Image ima nekaj rekvizitov, s katerimi lahko nadzirate, kako upodablja slike.

uvoz Slika od 'naslednja/slika'

izvozprivzetofunkcijoMyImage() {
vrnitev (
<Slika
src="/my-image.jpg"
širina="200"
višina="200"
kakovost="100"
alt="Moja slika"
/>
)
}

V tem primeru komponenta slike upodobi sliko s širino 200 slikovnih pik in višino 200 slikovnih pik. Uporabite lahko tudi CSS oz ogrodje, kot je Tailwind za oblikovanje vaše aplikacije in slik.

Nekateri zahtevani pripomočki za komponento slike so širina, višina, src in alt. Src prop je URL slike, ki jo želite uporabiti. Uporabite rekvizita širine in višine, da nastavite širino in višino slike v slikovnih pikah. Alt prop je nadomestno besedilo za sliko.

Nekateri neobvezni rekviziti za komponento slike so postavitev, nalagalnik, ograda in prednost. Podstavek za postavitev določa postavitev slike. Za podajanje nalagalnika slik po meri lahko uporabite podlago nalagalnika. Oznaka mesta določa nadomestno oznako slike po meri. Priority prop določa prednost slike.

Nekatere prednosti uporabe komponente Image so:

  • Izboljšana zmogljivost: Ena od glavnih prednosti uporabe komponente Image je izboljšana zmogljivost. Komponenta samodejno optimizira slike za učinkovitost.
  • Samodejno spreminjanje velikosti slike: Druga prednost uporabe komponente Image je samodejno spreminjanje velikosti slike. Komponenta lahko samodejno spremeni velikost slik, da se prilegajo rekvizitom širine in višine.
  • Samodejno stiskanje slike: Komponenta Image lahko tudi samodejno stisne slike, da zmanjša velikost datoteke.
  • Podpora za leno nalaganje: Komponenta Image podpira tudi leno nalaganje. To pomeni, da bo naložil samo slike, ko so vidne na zaslonu.

Uporaba knjižnice tretje osebe

Če potrebujete več nadzora nad optimizacijo slike, lahko uporabite knjižnico tretje osebe, kot je reakcija-optimizirana-slika. Ta knjižnica ponuja različne možnosti za optimizacijo slike.

Nekatere funkcije react-optimized-image vključujejo:

  • Optimizirajte slike na odjemalcu in strežniku: react-optimized-image lahko optimizira slike na odjemalcu in strežniku. To pomeni, da so slike optimizirane za zmogljivost in velikost datoteke.
  • Samodejno spreminjanje velikosti slike: react-optimized-image lahko samodejno spremeni velikost slik, da se prilegajo rekvizitom širine in višine.
  • Samodejno stiskanje slike: react-optimized-image lahko tudi samodejno stisne slike, da zmanjša velikost datoteke.
  • Podpora za leno nalaganje: react-optimized-image podpira tudi leno nalaganje. To pomeni, da bo naložil samo slike, ko so vidne na zaslonu.
  • Podpora za več slikovnih formatov: react-optimized-image podpira več formatov slik, vključno z JPEG, PNG in WebP.

Če želite uporabiti react-optimized-image, preprosto namestite knjižnico z npm.

Ko namestite knjižnico, jo lahko uvozite v svoj projekt.

uvoz slika od 'react-optimized-image'

izvozprivzetofunkcijoNextImg() {
vrnitev (
<slika
src="/my-image.jpg"
velikosti={[400, 800]}
alt="Moja slika"
/>
)
}

Datoteke SVG lahko uporabite tudi z reakcijsko optimizirano sliko.

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

izvozprivzetofunkcijoNextImg() {
vrnitev (
<Svg
src="/my-image.svg"
className=“polnjena-rdeča”
/>
)
}

Ta primer uporablja prop className za podajanje imena razreda za SVG. To ime razreda lahko uporabite za oblikovanje SVG s CSS ali za interakcijo z njim s pomočjo JavaScripta.

react-optimized-image nudi tudi nekaj drugih prednosti v primerjavi z vgrajenimi zmožnostmi optimizacije slike.

Ena prednost uporabe paketa v primerjavi z vgrajenimi funkcijami je, da lahko samodejno ustvari različne velikosti slik. To pomeni, da vam ni treba ustvarjati različnih različic iste slike.

Druga prednost je, da lahko samodejno prikaže ustrezno velikost slike za uporabnikovo napravo. To pomeni, da bodo naprave z zasloni visoke ločljivosti dobile sliko visoke ločljivosti, naprave z zasloni nizke ločljivosti pa sliko nizke ločljivosti.

Končno je reakcija optimizirana slika popolnoma odprtokodni projekt. To pomeni, da lahko prispevate v knjižnico, če potrebujete določeno funkcijo ali popravek napake.

Katero metodo naj uporabite?

Torej, katero metodo bi morali uporabiti za optimizacijo slik v Next.js?

Če potrebujete osnovno optimizacijo slike, lahko uporabite vgrajene zmožnosti obdelave slik. To je najlažji način za začetek optimizacije slike.

Če potrebujete več nadzora nad optimizacijo slike, lahko uporabite knjižnico tretje osebe, kot je react-optimized-image. Ta knjižnica ponuja naprednejše zmožnosti optimizacije slike.

Če potrebujete absolutno najboljšo zmogljivost, lahko uporabite kombinacijo vgrajenih zmožnosti obdelave slik in knjižnice drugega proizvajalca. To vam bo dalo najboljše iz obeh svetov. Vendar ta pristop ni priporočljiv za začetnike, saj zahteva več nastavitev.

Izboljšajte SEO z optimiziranimi slikami

Z optimizacijo slik na vašem spletnem mestu ali aplikaciji lahko izboljšate svoj SEO. Googlov algoritem upošteva hitrost nalaganja spletnih mest in aplikacij. Če se vaše spletno mesto ali aplikacija nalaga počasi, bo to negativno vplivalo na vaš SEO.

Z optimiziranimi slikami lahko izboljšate čas nalaganja vašega spletnega mesta ali aplikacije, kar lahko izboljša vaš SEO. Po tem lahko dodate tudi protokol odprtega grafa za še boljše delovanje.