Pildid on iga veebisaidi või rakenduse oluline osa. Need aitavad muuta sisu köitvamaks ja visuaalselt atraktiivsemaks.
Kui aga pildid pole korralikult optimeeritud, võivad need saidi või rakenduse tööd aeglustada.
Miks pilte optimeerida?
Piltide optimeerimiseks on mõned põhjused.
- See võib aidata parandada saidi või rakenduse laadimisaega.
- See võib vähendada andmemahtu, mida klient peab alla laadima, mis võib säästa ribalaiuse kulusid.
- See võib aidata parandada saidi või rakenduse üldist jõudlust.
Kuidas optimeerida pilte rakenduses Next.js
Piltide optimeerimiseks rakenduses Next.js on mitu võimalust. Üks on komponendi Image kasutamine. See komponent optimeerib pildid jõudluse tagamiseks automaatselt.
Teine võimalus piltide optimeerimiseks on kasutada sisseehitatud pilditöötlusvõimalusi. Next.js saab automaatselt muuta piltide suurust, tihendada ja optimeerida jõudlust.
Lõpuks saate kasutada kolmanda osapoole teeki, näiteks reageerima optimeeritud kujutist. See raamatukogu pakub mitmesuguseid pildi optimeerimise võimalusi.
Kujutise komponendi kasutamine
Pildikomponent on lihtsaim viis piltide optimeerimiseks rakenduses Next.js. Selle kasutamiseks importige komponent lihtsalt saidist järgmine/pilt pakett.
Kui olete komponendi importinud, saate seda kasutada nagu kõiki teisi Reactis. Pildikomponendil on mõned rekvisiidid, mida saate kasutada piltide renderdamise juhtimiseks.
importida Pilt alates 'järgmine/pilt'eksportidavaikimisifunktsiooniMinu pilt() {
tagasi (
<Pilt
src="/my-image.jpg"
laius="200"
kõrgus ="200"
kvaliteet ="100"
alt="Minu pilt"
/>
)
}
Selles näites renderdab komponent Image pildi laiusega 200 pikslit ja kõrgusega 200 pikslit. Võite kasutada ka CSS-i või raamistik nagu Tailwind rakenduse ja piltide kujundamiseks.
Mõned komponendi Image jaoks vajalikud rekvisiidid on laius, kõrgus, src ja alt. Src prop on selle pildi URL, mida soovite kasutada. Kasutage pildi laiuse ja kõrguse määramiseks pikslites laiuse ja kõrguse tugipunkte. Alternatiivne rekvisiit on pildi alternatiivne tekst.
Mõned komponendi Image valikulised rekvisiidid on paigutus, laadija, kohahoidja ja prioriteet. Paigutuse tugi määrab pildi paigutuse. Saate kasutada laadija rekvisiite, et määrata kohandatud pildilaadur. Kohatäite prop määrab kohandatud pildi kohahoidja. Prioriteedi rekvisiit määrab pildi prioriteedi.
Mõned komponendi Image kasutamise eelised on järgmised:
- Parem jõudlus: Üks komponendi Image kasutamise peamisi eeliseid on parem jõudlus. Komponent optimeerib pildid jõudluse tagamiseks automaatselt.
- Automaatne pildi suuruse muutmine: Pildikomponendi kasutamise teine eelis on pildi suuruse automaatne muutmine. Komponent saab kujutiste suurust automaatselt muuta, et need sobiksid laiuse ja kõrgusega.
- Pildi automaatne tihendamine: Komponent Image saab faili suuruse vähendamiseks pilte automaatselt tihendada.
- Laisa laadimise tugi: Pildikomponent toetab ka laiska laadimist. See tähendab, et see laadib pilte ainult siis, kui need on ekraanil nähtavad.
Kolmanda osapoole raamatukogu kasutamine
Kui vajate pildi optimeerimise üle suuremat kontrolli, võite kasutada näiteks kolmanda osapoole teeki reageeri-optimiseeritud-pilt. See raamatukogu pakub mitmesuguseid pildi optimeerimise võimalusi.
Mõned reageerimise optimeeritud pildi funktsioonid hõlmavad järgmist:
- Piltide optimeerimine kliendis ja serveris: React-optimized-image saab optimeerida pilte kliendis ja serveris. See tähendab, et pildid on optimeeritud nii jõudluse kui ka faili suuruse jaoks.
- Automaatne pildi suuruse muutmine: React-optimized-image saab automaatselt muuta piltide suurust, et need sobiksid laiuse ja kõrgusega.
- Pildi automaatne tihendamine: React-optimized-image saab faili suuruse vähendamiseks pilte ka automaatselt tihendada.
- Laisk laadimise tugi: React-optimized-image toetab ka laiska laadimist. See tähendab, et see laadib pilte ainult siis, kui need on ekraanil nähtavad.
- Mitme pildivormingu tugi: React-optimized-image toetab mitut pildivormingut, sealhulgas JPEG, PNG ja WebP.
React-optimized-image kasutamiseks installige lihtsalt teek npm-iga.
Kui olete teegi installinud, saate selle oma projekti importida.
importida Pilt alates 'react-optimized-image'eksportidavaikimisifunktsiooniJärgmine pilt() {
tagasi (
<Pilt
src="/my-image.jpg"
suurused={[400, 800]}
alt="Minu pilt"
/>
)
}
Saate kasutada ka SVG-faile koos reageerimise optimeeritud kujutisega.
importida {Svg} alates 'react-optimized-image'eksportidavaikimisifunktsiooniJärgmine pilt() {
tagasi (
<Svg
src="/my-image.svg"
klassinimi=“täidetud-punane”
/>
)
}
Selles näites kasutatakse SVG-le klassinime määramiseks propi className. Saate seda klassi nime kasutada SVG stiili kujundamiseks CSS-iga või sellega JavaScripti abil suhtlemiseks.
React-optimized-image pakub lisaks sisseehitatud pildi optimeerimisvõimalustele ka mõningaid muid eeliseid.
Üks paketi kasutamise eelis sisseehitatud funktsioonide ees on see, et see suudab automaatselt genereerida erineva suurusega pilte. See tähendab, et te ei pea looma samast pildist erinevaid versioone.
Teine eelis on see, et see suudab automaatselt teenindada kasutaja seadme jaoks sobivas suuruses pilti. See tähendab, et kõrge eraldusvõimega ekraaniga seadmed saavad kõrge eraldusvõimega pildi ja madala eraldusvõimega ekraaniga seadmed madala eraldusvõimega pildi.
Lõpuks on reageerimiseks optimeeritud pilt täielikult avatud lähtekoodiga projekt. See tähendab, et saate teeki panustada, kui vajate konkreetset funktsiooni või veaparandust.
Millist meetodit peaksite kasutama?
Niisiis, millist meetodit peaksite kasutama Next.js-i piltide optimeerimiseks?
Kui vajate põhilist pildi optimeerimist, saate kasutada sisseehitatud pilditöötlusvõimalusi. See on lihtsaim viis pildi optimeerimisega alustamiseks.
Kui vajate pildi optimeerimise üle suuremat kontrolli, võite kasutada kolmanda osapoole teeki, näiteks reageerida optimeeritud pilt. See teek pakub täiustatud pildi optimeerimise võimalusi.
Kui vajate absoluutselt parimat jõudlust, võite kasutada sisseehitatud pilditöötlusvõimaluste ja kolmanda osapoole teegi kombinatsiooni. See annab teile mõlemast maailmast parima. Seda lähenemisviisi ei soovitata aga algajatele, kuna see nõuab rohkem seadistamist.
Parandage SEO-d optimeeritud piltidega
Optimeerides oma veebisaidil või rakenduses olevaid pilte, saate parandada oma SEO-d. Google'i algoritm võtab arvesse veebisaitide ja rakenduste laadimiskiirust. Kui teie veebisait või rakendus laaditakse aeglaselt, mõjutab see teie SEO-d negatiivselt.
Optimeeritud piltide abil saate parandada oma veebisaidi või rakenduse laadimisaega, mis võib parandada teie SEO-d. Pärast seda saate veelgi parema jõudluse saavutamiseks lisada ka avatud graafiku protokolli.
