Vaizdai yra svarbi bet kurios svetainės ar programos dalis. Jie padeda padaryti turinį patrauklesnį ir patrauklesnį.
Tačiau jei vaizdai nėra tinkamai optimizuoti, jie taip pat gali sulėtinti svetainės ar programos veikimą.
Kodėl verta optimizuoti vaizdus?
Yra keletas priežasčių, kodėl svarbu optimizuoti vaizdus.
- Tai gali padėti pagerinti svetainės ar programos įkėlimo laiką.
- Tai gali sumažinti duomenų, kuriuos klientui turi atsisiųsti, kiekį, o tai gali sumažinti pralaidumo išlaidas.
- Tai gali padėti pagerinti bendrą svetainės ar programos našumą.
Kaip optimizuoti vaizdus „Next.js“.
Yra keletas būdų, kaip galite optimizuoti Next.js vaizdus. Vienas iš jų yra naudoti vaizdo komponentą. Šis komponentas automatiškai optimizuoja vaizdus, kad jie veiktų.
Kitas būdas optimizuoti vaizdus yra naudoti integruotas vaizdo apdorojimo galimybes. Next.js gali automatiškai pakeisti vaizdų dydį, suspausti ir optimizuoti jų našumą.
Galiausiai galite naudoti trečiosios šalies biblioteką, pvz., react-optimized-image. Ši biblioteka suteikia įvairių vaizdo optimizavimo galimybių.
Vaizdo komponento naudojimas
Vaizdo komponentas yra lengviausias būdas optimizuoti Next.js vaizdus. Norėdami jį naudoti, tiesiog importuokite komponentą iš kitas/vaizdas paketą.
Kai importuosite komponentą, galėsite jį naudoti kaip bet kurį kitą React. Vaizdo komponentas turi keletą rekvizitų, kuriuos galite naudoti norėdami valdyti, kaip jis pateikia vaizdus.
importuoti Vaizdas iš 'kitas/vaizdas'eksportuotinumatytasfunkcijaMano vaizdas() {
grąžinti (
<Vaizdas
src="/my-image.jpg"
plotis ="200"
aukštis ="200"
kokybė ="100"
alt="Mano vaizdas"
/>
)
}
Šiame pavyzdyje vaizdo komponentas pateikia 200 pikselių pločio ir 200 pikselių aukščio vaizdą. Taip pat galite naudoti CSS arba tokią sistemą kaip Tailwind norėdami sukurti savo programos ir vaizdų stilių.
Kai kurie būtini vaizdo komponento rekvizitai yra plotis, aukštis, src ir alt. Src prop yra vaizdo, kurį norite naudoti, URL. Norėdami nustatyti vaizdo plotį ir aukštį pikseliais, naudokite pločio ir aukščio rekvizitus. Alternatyva yra alternatyvus vaizdo tekstas.
Kai kurie pasirenkami vaizdo komponento rekvizitai yra išdėstymas, įkroviklis, rezervuota vieta ir prioritetas. Išdėstymo pasiūlymas nurodo vaizdo išdėstymą. Galite naudoti įkroviklio rekvizitus, kad nurodytumėte tinkintą vaizdo įkėlimo programą. Vietos rezervavimo priemonė nurodo tinkintą vaizdo rezervuotąją vietą. Prioriteto pasiūlymas nurodo vaizdo prioritetą.
Kai kurie vaizdo komponento naudojimo pranašumai yra šie:
- Patobulintas našumas: Vienas iš pagrindinių vaizdo komponento naudojimo pranašumų yra geresnis našumas. Komponentas automatiškai optimizuoja vaizdus, kad veiktų.
- Automatinis vaizdo dydžio keitimas: Kitas vaizdo komponento naudojimo pranašumas yra automatinis vaizdo dydžio keitimas. Komponentas gali automatiškai pakeisti vaizdų dydį, kad atitiktų pločio ir aukščio rekvizitus.
- Automatinis vaizdo suspaudimas: Vaizdo komponentas taip pat gali automatiškai suspausti vaizdus, kad sumažintų failo dydį.
- „Lazy Loading“ palaikymas: Vaizdo komponentas taip pat palaiko tingų įkėlimą. Tai reiškia, kad vaizdai bus įkelti tik tada, kai jie bus matomi ekrane.
Trečiosios šalies bibliotekos naudojimas
Jei jums reikia daugiau valdyti vaizdo optimizavimą, galite naudoti trečiosios šalies biblioteką, pvz., reaguoti-optimizuotas-vaizdas. Ši biblioteka suteikia įvairių vaizdo optimizavimo galimybių.
Kai kurios reaguojant optimizuoto vaizdo funkcijos:
- Optimizuokite vaizdus kliente ir serveryje: React-optimized-image gali optimizuoti kliento ir serverio vaizdus. Tai reiškia, kad vaizdai yra optimizuoti našumui ir failo dydžiui.
- Automatinis vaizdo dydžio keitimas: React-optimized-image gali automatiškai pakeisti vaizdų dydį, kad atitiktų pločio ir aukščio rekvizitus.
- Automatinis vaizdo suspaudimas: React-optimized-image taip pat gali automatiškai suspausti vaizdus, kad sumažintų failo dydį.
- Tingaus pakrovimo palaikymas: React-optimized-image taip pat palaiko tingų įkėlimą. Tai reiškia, kad vaizdai bus įkelti tik tada, kai jie bus matomi ekrane.
- Kelių vaizdo formatų palaikymas: React-optimized-image palaiko kelis vaizdo formatus, įskaitant JPEG, PNG ir WebP.
Norėdami naudoti optimizuotą vaizdą, tiesiog įdiekite biblioteką naudodami npm.
Įdiegę biblioteką galite importuoti ją į savo projektą.
importuoti Atvaizdas iš 'react-optimized-image'eksportuotinumatytasfunkcijaKitas pav() {
grąžinti (
<Atvaizdas
src="/my-image.jpg"
dydžiai = {[400, 800]}
alt="Mano vaizdas"
/>
)
}
Taip pat galite naudoti SVG failus su optimizuotu vaizdu.
importuoti {Svg} iš 'react-optimized-image'eksportuotinumatytasfunkcijaKitas pav() {
grąžinti (
<Svg
src="/my-image.svg"
className=“užpildytas-raudonas”
/>
)
}
Šiame pavyzdyje naudojamas pasiūlymas className, kad būtų nurodytas SVG klasės pavadinimas. Galite naudoti šį klasės pavadinimą, kad sukurtumėte SVG stilių su CSS arba sąveikautumėte su juo naudodami „JavaScript“.
React-optimized-image taip pat suteikia keletą kitų pranašumų, palyginti su integruotomis vaizdo optimizavimo galimybėmis.
Vienas paketo naudojimo pranašumų, palyginti su integruotomis funkcijomis, yra tas, kad jis gali automatiškai generuoti įvairaus dydžio vaizdus. Tai reiškia, kad jums nereikia kurti skirtingų to paties vaizdo versijų.
Kitas privalumas yra tai, kad jis gali automatiškai pateikti atitinkamo dydžio vaizdą vartotojo įrenginiui. Tai reiškia, kad įrenginiai su didelės raiškos ekranais gaus didelės raiškos vaizdą, o įrenginiai su mažos raiškos ekranais – mažos raiškos vaizdą.
Galiausiai, reaguoti optimizuotas vaizdas yra visiškai atvirojo kodo projektas. Tai reiškia, kad galite prisidėti prie bibliotekos, jei jums reikia konkrečios funkcijos ar klaidų pataisymo.
Kurį metodą turėtumėte naudoti?
Taigi, kokį metodą turėtumėte naudoti norėdami optimizuoti Next.js vaizdus?
Jei jums reikia pagrindinio vaizdo optimizavimo, galite naudoti integruotas vaizdo apdorojimo galimybes. Tai lengviausias būdas pradėti optimizuoti vaizdą.
Jei jums reikia daugiau valdyti vaizdo optimizavimą, galite naudoti trečiosios šalies biblioteką, pvz., react-optimized-image. Ši biblioteka suteikia daugiau pažangių vaizdo optimizavimo galimybių.
Jei jums reikia absoliučiai geriausio našumo, galite naudoti integruotų vaizdo apdorojimo galimybių ir trečiosios šalies bibliotekos derinį. Tai suteiks jums geriausią iš abiejų pasaulių. Tačiau šis metodas nerekomenduojamas pradedantiesiems, nes reikia daugiau sąrankos.
Pagerinkite SEO naudodami optimizuotus vaizdus
Optimizuodami savo svetainės ar programos vaizdus galite pagerinti savo SEO. „Google“ algoritmas atsižvelgia į svetainių ir programų įkėlimo greitį. Jei jūsų svetainė ar programa įkeliama lėtai, tai neigiamai paveiks jūsų SEO.
Naudodami optimizuotus vaizdus galite pagerinti savo svetainės ar programos įkėlimo laiką, o tai gali pagerinti jūsų SEO. Po to taip pat galite pridėti atvirojo grafiko protokolą, kad našumas būtų dar geresnis.
