Next.js-i pildikomponent: täiustatud optimeerimisfunktsioonid globaalse veebi jaoks

Tänapäeva digitaalses maastikus on pildid veebisaidi sisu oluline osa, mis parandab kasutajakogemust ja kaasatust. Optimeerimata pildid võivad aga oluliselt mõjutada veebisaidi jõudlust, põhjustades aeglaseid laadimisaegu ja halba kasutajakogemust, eriti piiratud ribalaiusega kasutajate või geograafiliselt kaugetest asukohtadest ligipääsevate kasutajate jaoks. Next.js, populaarne Reacti raamistik, pakub võimsat <Image> komponenti, mis on loodud nende väljakutsete lahendamiseks, pakkudes vaikimisi täiustatud pildi optimeerimise funktsioone.

See põhjalik juhend süveneb Next.js-i pildikomponendi täiustatud võimalustesse, uurides, kuidas saate neid kasutada optimeeritud piltide edastamiseks oma globaalsele publikule, tagades kiiremad laadimisajad, väiksema ribalaiuse tarbimise ja üldiselt parema kasutajakogemuse. Käsitleme teemasid alates reageerivast pildi suuruse määramisest ja vormingu optimeerimisest kuni laisklaadimise ja täiustatud seadistusvalikuteni.

Põhieeliste mõistmine

Enne täiustatud funktsioonidesse süvenemist võtame kokku Next.js-i pildikomponendi kasutamise peamised eelised:

• Automaatne pildi optimeerimine: Optimeerib pilte nõudmisel, muutes nende suurust ja teisendades need kaasaegsetesse vormingutesse nagu WebP või AVIF vastavalt brauseri toele.
• Reageerivad pildid: Genereerib automaatselt mitu pildisuurust, et rahuldada erinevaid ekraanisuurusi ja seadmete eraldusvõimet, parandades mobiilseadmete jõudlust ja vähendades ribalaiuse kasutust.
• Laisklaadimine: Laadib pildid alles siis, kui need sisenevad vaateaknasse, vähendades lehe esialgset laadimisaega ja parandades tajutavat jõudlust.
• Sisseehitatud jõudlus: Optimeeritud jõudluse jaoks funktsioonidega nagu lehe ülaosas olevate piltide eellaadimine ja automaatne pildi suuruse määramine.
• Väldib paigutuse nihet: Määrates width ja height atribuudid või kasutades fill atribuuti, hoiab komponent ära kumulatiivse paigutuse nihke (CLS), mis on Core Web Vitalsi oluline mõõdik.

Täiustatud optimeerimistehnikad

1. `sizes` atribuudi meisterlik kasutamine kohanduvate piltide jaoks

sizes atribuut on võimas tööriist tõeliselt reageerivate piltide loomiseks, mis kohanduvad erinevate ekraanisuuruste ja vaateakna laiustega. See võimaldab teil määratleda erinevaid pildisuurusi meediapäringute alusel, tagades, et brauser laadib kasutaja seadme jaoks kõige sobivama pildi.

Näide:

Kujutage ette, et teil on pilt, mis peaks väikestel seadmetel võtma enda alla kogu ekraani laiuse, keskmise suurusega seadmetel poole laiusest ja suurtel seadmetel kolmandiku laiusest. Saate selle saavutada, kasutades sizes atribuuti:

<Image
  src="/my-image.jpg"
  alt="Minu reageeriv pilt"
  width={1200}
  height={800}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

Selgitus:

• (max-width: 768px) 100vw: Ekraanidel, mille maksimaalne laius on 768px (tavaliselt mobiilseadmed), võtab pilt enda alla 100% vaateakna laiusest.
• (max-width: 1200px) 50vw: Ekraanidel, mille maksimaalne laius on 1200px (keskmise suurusega seadmed), võtab pilt enda alla 50% vaateakna laiusest.
• 33vw: Ekraanidel, mis on laiemad kui 1200px, võtab pilt enda alla 33% vaateakna laiusest.

sizes atribuut töötab koos width ja height atribuutidega, et tagada brauseri poolt õige pildisuuruse laadimine. Hästi defineeritud sizes atribuudiga saate optimeerida piltide edastamist laiale valikule seadmetele ja ekraanisuurustele, parandades oluliselt jõudlust.

Globaalne rakendus: Mõelge e-kaubanduse saidile, mis on suunatud kasutajatele nii Euroopas kui ka Aasias. Seadmete kasutamisharjumused võivad oluliselt erineda. Euroopa kasutajad võivad peamiselt kasutada lauaarvuteid, samas kui Aasia kasutajad võivad rohkem tugineda mobiilseadmetele. Optimeerimine sizes abil tagab kõigile kiired laadimisajad, olenemata seadmest.

2. `priority` kasutamine kriitiliste, lehe ülaosas asuvate piltide jaoks

priority atribuuti kasutatakse nende piltide laadimise prioriseerimiseks, mis on lehe esialgsel laadimisel kriitilised, tavaliselt need, mis on nähtavad lehe ülaosas (lehe osa, mis on nähtav ilma kerimata). Seades nendele piltidele priority={true}, annate Next.js-ile käsu need eellaadida, tagades nende kiire laadimise ja kuvamise, mis parandab kasutaja tajutavat jõudlust.

Näide:

<Image
  src="/hero-image.jpg"
  alt="Kangelaspilt"
  width={1920}
  height={1080}
  priority={true}
/>

Millal kasutada:

• Kangelaspildid: Lehe ülaosas olev peamine pilt, mis kohe kasutaja tähelepanu köidab.
• Logod: Veebisaidi logo, mis kuvatakse tavaliselt päises.
• Põhilised visuaalsed elemendid: Kõik muud pildid, mis on esialgse kasutajakogemuse jaoks hädavajalikud.

Olulised kaalutlused:

• Kasutage priority atribuuti säästlikult, kuna liiga paljude piltide eellaadimine võib negatiivselt mõjutada lehe üldist laadimisaega.
• Veenduge, et prioriteetsed pildid oleksid korralikult optimeeritud, et minimeerida nende failimahtu.

Globaalne rakendus: Kujutage ette uudiste veebisaiti, millel on lugejaid üle maailma. Avalehe peamine uudispilt saab priority atribuudist märkimisväärset kasu, eriti arengumaade aeglasema internetiühendusega lugejate jaoks. See tagab, et kriitiline visuaalne element laaditakse kiiresti, parandades kaasatust.

3. Kohandatud pildilaadija seadistamine

Vaikimisi kasutab Next.js-i pildikomponent oma sisseehitatud pildi optimeerimise teenust. Saate seda käitumist aga kohandada, pakkudes kohandatud pildilaadijat. See on eriti kasulik, kui kasutate kolmanda osapoole pildi optimeerimise teenust nagu Cloudinary, Imgix või pildi optimeerimise võimalustega sisuedastusvõrku (CDN).

Näide: Cloudinary kasutamine

Esmalt installige Cloudinary SDK:

npm install cloudinary-core

Seejärel looge kohandatud laadija funktsioon:

// utils/cloudinaryLoader.js
import { Cloudinary } from 'cloudinary-core';

const cloudinary = new Cloudinary({
  cloud_name: 'your_cloud_name',
});

export function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, 'q_auto'];
  if (quality) {
    params.push(`q_${quality}`);
  }
  return cloudinary.url(src, { transformation: params });
}

Lõpuks seadistage loader atribuut oma next.config.js failis:

// next.config.js

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './utils/cloudinaryLoader.js',
  },
}

Ja kasutage seda oma komponendis:

<Image
  src="/my-image.jpg"
  alt="Minu pilt"
  width={600}
  height={400}
  loader={cloudinaryLoader}
/>

Kohandatud laadija kasutamise eelised:

• Paindlikkus: Võimaldab integreerida eelistatud pildi optimeerimise teenusega.
• Täiustatud optimeerimine: Annab juurdepääsu kolmandate osapoolte teenuste pakutavatele täiustatud optimeerimisfunktsioonidele.
• CDN-i integreerimine: Võimaldab kasutada valitud teenuse globaalset CDN-i taristut.

Globaalne rakendus: Globaalne reisibroneerimisplatvorm võib kasutada kohandatud laadijat koos CDN-iga nagu Akamai või Cloudflare. See tagab, et pilte serveeritakse kasutajale lähimatest serveritest, vähendades drastiliselt latentsust ja parandades laadimisaegu, olgu kasutaja Tokyos, Londonis või New Yorgis.

4. Pildivormingute optimeerimine: WebP ja AVIF

Kaasaegsed pildivormingud nagu WebP ja AVIF pakuvad paremat tihendamist ja kvaliteeti võrreldes traditsiooniliste vormingutega nagu JPEG ja PNG. Next.js-i pildikomponent suudab pilte automaatselt nendesse vormingutesse teisendada vastavalt brauseri toele, vähendades veelgi failimahtusid ja parandades jõudlust.

WebP: Google'i poolt välja töötatud kaasaegne pildivorming, mis pakub suurepärast kadudeta ja kadudega tihendamist. Seda toetavad laialdaselt kaasaegsed brauserid.

AVIF: Uuem pildivorming, mis põhineb AV1 videokoodekil. See pakub veelgi paremat tihendamist kui WebP, kuid sellel on vähem laialdast brauserituge.

Automaatne vormingu teisendamine: Next.js-i pildikomponent teisendab pildid automaatselt WebP- või AVIF-vormingusse, kui brauser seda toetab. Vormingut ei pea eraldi määrama; komponent tegeleb sellega automaatselt.

Brauseri tugi: Kontrollige brauserite ühilduvustabeleid (nt caniuse.com), et mõista WebP ja AVIF-i praegust tuge.

Kaalutlused:

• Veenduge, et teie pildi optimeerimise teenus või CDN toetab WebP-d ja AVIF-i.
• Kaaluge varuvariandi pakkumist vanematele brauseritele, mis neid vorminguid не toeta (Next.js-i pildikomponent tegeleb sellega üldiselt sujuvalt).

Globaalne rakendus: Rahvusvaheline uudiste koondaja saab WebP-st ja AVIF-ist tohutult kasu. Erinevates piirkondades erinevate internetikiiruste juures tähendavad väiksemad pildifailid kiiremaid laadimisaegu ja väiksemat andmetarbimist piiratud ribalaiusega piirkondade kasutajatele.

5. `fill` ja `objectFit` kasutamine dünaamiliste paigutuste jaoks

fill atribuut võimaldab pildil võtta oma vanemkonteineri mõõtmed. See on eriti kasulik reageerivate paigutuste loomisel, kus pildi suurus peab dünaamiliselt kohanema saadaoleva ruumiga. Koos objectFit CSS-i omadusega saate kontrollida, kuidas pilt oma konteinerit täidab (nt cover, contain, fill, none, scale-down).

Näide:

<div style={{ position: 'relative', width: '100%', height: '300px' }}>
  <Image
    src="/my-image.jpg"
    alt="Minu pilt"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

Selgitus:

• div element toimib pildi konteinerina ja on suhtelise positsiooniga.
• <Image> komponendil on fill atribuut, mis paneb selle võtma oma vanemkonteineri mõõtmed.
• objectFit: 'cover' stiil tagab, et pilt katab kogu konteineri, kärpides potentsiaalselt mõningaid pildi osi kuvasuhte säilitamiseks.

Kasutusjuhud:

• Täislaiuses bännerid: Reageerivate bännerite loomine, mis ulatuvad üle kogu ekraani laiuse.
• Taustapildid: Taustapiltide seadistamine jaotistele või komponentidele.
• Pildigaleriid: Piltide kuvamine ruudustikupaigutuses, kus pildi suurus kohandub saadaoleva ruumiga.

Globaalne rakendus: Mitmekeelne veebisait, mis esitleb tooteid, nõuab paindlikku paigutust, mis kohandub erinevate tekstipikkuste ja ekraanisuurustega. fill ja objectFit kasutamine tagab, et pildid säilitavad oma visuaalse atraktiivsuse ja sobivad sujuvalt paigutusse, olenemata keelest või seadmest.

6. `unoptimized` atribuudi seadistamine spetsiifiliste stsenaariumide jaoks

Harvadel juhtudel võite soovida keelata automaatse pildi optimeerimise konkreetsete piltide jaoks. Näiteks võib teil olla pilt, mis on juba väga optimeeritud või mida soovite serveerida otse CDN-ist ilma edasise töötlemiseta. Selle saate saavutada, seades unoptimized atribuudi väärtuseks true.

Näide:

<Image
  src="/already-optimized.png"
  alt="Juba optimeeritud pilt"
  width={800}
  height={600}
  unoptimized={true}
/>

Millal kasutada:

• Juba optimeeritud pildid: Pildid, mis on juba optimeeritud kolmanda osapoole tööriista või teenuse abil.
• Otse CDN-ist serveeritavad pildid: Pildid, mida serveeritakse otse CDN-ist ilma edasise töötlemiseta.
• Spetsialiseeritud pildivormingud: Pildid, mis kasutavad spetsialiseeritud vorminguid, mida Next.js-i pildikomponent ei toeta.

Ettevaatust:

• Kasutage unoptimized atribuuti säästlikult, kuna see keelab kõik automaatsed pildi optimeerimise funktsioonid.
• Veenduge, et pildid, mille märgite unoptimized, on juba korralikult optimeeritud, et minimeerida nende failimahtu.

Globaalne rakendus: Mõelge fotograafide veebisaidile, mis esitleb nende töid. Nad võivad eelistada piltide serveerimist spetsiifilistes värviprofiilides või täpsete seadetega, mida Next.js-i optimeerija võib muuta. unoptimized kasutamine annab neile kontrolli oma piltide serveerimiseks just nii, nagu nad on kavandanud.

7. `blurDataURL` kasutamine tajutava jõudluse parandamiseks

blurDataURL atribuut võimaldab kuvada madala eraldusvõimega kohatäitepilti, samal ajal kui tegelik pilt laaditakse. See võib oluliselt parandada kasutaja tajutavat jõudlust, pakkudes visuaalset vihjet, et midagi laaditakse, vältides lehe tühjana või reageerimatuna näimist. Next.js 13 ja uuemad versioonid tegelevad sellega sageli automaatselt.

Näide:

Esmalt genereerige oma pildist udune andme-URL, kasutades tööriista nagu BlurHash või sarnast teenust. See annab teile väikese, base64-kodeeritud stringi, mis esindab teie pildi udustatud versiooni.

<Image
  src="/my-image.jpg"
  alt="Minu pilt"
  width={600}
  height={400}
  placeholder="blur"
  blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
/>

Eelised:

• Parem tajutav jõudlus: Annab visuaalse vihje, et midagi laaditakse.
• Täiustatud kasutajakogemus: Hoiab ära lehe tühjana või reageerimatuna näimise.
• Vähendatud paigutuse nihe: Aitab vältida paigutuse nihet, reserveerides pildi jaoks ruumi.

Globaalne rakendus: Rahvusvaheline reisiblogi, mis esitleb sihtkohti vapustavate fotodega. blurDataURL kasutamine pakub sujuvat laadimiskogemust isegi aeglasema võrguühendusega kasutajatele, luues positiivse esmamulje ja julgustades neid sisu uurima.

Parimad praktikad globaalseks pildi optimeerimiseks

Optimaalse pildijõudluse tagamiseks globaalsele publikule kaaluge neid parimaid praktikaid:

• Valige õige pildivorming: Kasutage kaasaegsete brauserite jaoks WebP-d või AVIF-i ja pakkuge vanematele brauseritele varuvariante.
• Optimeerige pildi suurus: Muutke piltide suurust sihtkuva suurusele sobivateks mõõtmeteks.
• Tihendage pilte: Kasutage failimahu vähendamiseks kadudeta või kadudega tihendamist.
• Kasutage laisklaadimist: Laadige pildid alles siis, kui need sisenevad vaateaknasse.
• Prioriseerige kriitilisi pilte: Eellaadige pildid, mis on lehe esialgsel laadimisel kriitilised.
• Kasutage CDN-i: Kasutage CDN-i, et serveerida pilte kasutajale lähimatest serveritest.
• Jälgige jõudlust: Jälgige regulaarselt oma veebisaidi jõudlust tööriistadega nagu Google PageSpeed Insights ja WebPageTest.

Kokkuvõte

Next.js-i pildikomponent pakub võimsat ja paindlikku lahendust piltide optimeerimiseks veebis. Kasutades selle täiustatud funktsioone, saate pakkuda oma globaalsele publikule kiiremaid laadimisaegu, väiksemat ribalaiuse tarbimist ja üldiselt paremat kasutajakogemust. Alates sizes atribuudi meisterlikust kasutamisest ja priority rakendamisest kuni kohandatud laadijate seadistamise ja pildivormingute optimeerimiseni on see juhend andnud teile teadmised ja tööriistad, mida vajate tõeliselt optimeeritud piltide loomiseks, mis toimivad hästi igas seadmes ja igas asukohas.

Ärge unustage pidevalt jälgida oma veebisaidi jõudlust ja kohandada oma pildi optimeerimise strateegiaid vastavalt vajadusele, et tagada oma kasutajatele parim võimalik kogemus.