M

MLOG

Lietuvių

Išnaudokite Next.js paveikslėlių optimizavimo galią žaibiškai greitoms svetainėms. Sužinokite apie automatinį paveikslėlių optimizavimą, formatų palaikymą ir pažangias technikas, kaip pagerinti svetainės našumą ir vartotojo patirtį.

Next.js paveikslėlių optimizavimas: paspartinkite savo svetainės našumą

Šiuolaikiniame skaitmeniniame pasaulyje svetainės greitis ir našumas yra svarbiausi. Vartotojai tikisi, kad svetainės įsikels greitai ir suteiks sklandžią patirtį. Lėtai įkeliami paveikslėliai yra dažna prasto svetainės našumo priežastis, dėl kurios didėja atmetimo rodikliai ir mažėja įsitraukimas. Next.js siūlo galingą ir integruotą sprendimą šiam iššūkiui spręsti: optimizuotą Image komponentą.

Šis išsamus gidas pasineria į Next.js paveikslėlių optimizavimo pasaulį, suteikdamas jums žinių ir įrankių, kaip ženkliai pagerinti jūsų svetainės našumą ir vartotojo patirtį. Išnagrinėsime pagrindines Image komponento savybes, aptarsime geriausias praktikas ir pristatysime pažangias technikas, skirtas maksimaliai išnaudoti jūsų paveikslėlių optimizavimo pastangas.

Kodėl paveikslėlių optimizavimas yra svarbus

Prieš pasineriant į Next.js paveikslėlių optimizavimo specifiką, supraskime, kodėl tai taip svarbu:

Pristatome Next.js Image komponentą

Next.js Image komponentas (next/image) yra galingas standartinio <img> HTML elemento pakaitalas. Jis siūlo daugybę funkcijų, skirtų automatiškai optimizuoti paveikslėlius ir pagerinti svetainės našumą. Štai jo pagrindinių privalumų apžvalga:

Darbo su Image komponentu pradžia

Norėdami naudoti Image komponentą, pirmiausia turite jį importuoti iš next/image:

import Image from 'next/image';

Tada galite pakeisti savo standartines <img> žymes Image komponentu:

<Image
  src="/images/my-image.jpg"
  alt="Mano paveikslėlis"
  width={500}
  height={300}
/>

Svarbu: Atkreipkite dėmesį į width ir height atributus. Jie yra būtini Image komponentui, kad būtų išvengta išdėstymo poslinkio. Būtinai nurodykite teisingus savo paveikslėlio matmenis.

Pavyzdys: profilio nuotraukos rodymas

Tarkime, norite savo svetainėje parodyti profilio nuotrauką:

import Image from 'next/image';

function Profile() {
  return (
    <div>
      <Image
        src="/images/profile.jpg"
        alt="Mano profilio nuotrauka"
        width={150}
        height={150}
        style={{ borderRadius: '50%' }} // Pasirinktinai: pridėkite stilių apvaliai profilio nuotraukai
      />
      <p>Sveiki atvykę į mano profilį!</p>
    </div>
  );
}

export default Profile;

Šiame pavyzdyje rodome paveikslėlį profile.jpg, kurio plotis ir aukštis yra 150 pikselių. Taip pat pridėjome šiek tiek pasirenkamo stiliaus, kad sukurtume apvalią profilio nuotrauką.

Paveikslėlių optimizavimo strategijų supratimas Next.js aplinkoje

Next.js naudoja kelias pagrindines strategijas, siekiant automatiškai optimizuoti jūsų paveikslėlius:

1. Dydžio keitimas ir glaudinimas

Next.js automatiškai keičia paveikslėlių dydį ir juos glaudina, kad sumažintų failo dydį neaukojant vizualinės kokybės. Glaudinimo lygį galima konfigūruoti naudojant quality savybę:

<Image
  src="/images/my-image.jpg"
  alt="Mano paveikslėlis"
  width={500}
  height={300}
  quality={75} // Koreguokite glaudinimo kokybę (0-100, numatytoji reikšmė 75)
/>

Eksperimentuokite su skirtingomis quality reikšmėmis, kad rastumėte optimalų balansą tarp failo dydžio ir vizualinio tikslumo. 75 reikšmė paprastai duoda gerus rezultatus.

2. Šiuolaikiniai paveikslėlių formatai (WebP ir AVIF)

Next.js automatiškai pateikia paveikslėlius moderniais formatais, tokiais kaip WebP ir AVIF, jei juos palaiko vartotojo naršyklė. Šie formatai siūlo žymiai geresnį glaudinimą nei tradiciniai formatai, tokie kaip JPEG ir PNG, todėl failai yra mažesni ir įkeliami greičiau.

Next.js automatiškai parenka formatą, užtikrindamas, kad vartotojai gautų optimalų paveikslėlio formatą atsižvelgiant į jų naršyklės galimybes. Šiai funkcijai reikia, kad jūsų `next.config.js` faile būtų sukonfigūruotas paveikslėlių optimizavimo API. Numatytoji konfigūracija naudoja Next.js paveikslėlių optimizavimo API, tačiau galite ją sukonfigūruoti naudoti trečiosios šalies tiekėją, pvz., Cloudinary ar Imgix.

3. Atidėtas įkėlimas (Lazy Loading)

Atidėtas įkėlimas yra technika, kuri atideda paveikslėlių įkėlimą tol, kol jie netrukus pasirodys matomoje srityje. Tai sumažina pradinį puslapio įkėlimo laiką ir taupo pralaidumą, ypač puslapiuose su daugeliu paveikslėlių. Next.js Image komponentas automatiškai įgyvendina atidėtą įkėlimą pagal numatytuosius nustatymus.

Galite pritaikyti atidėto įkėlimo elgseną naudodami loading savybę:

<Image
  src="/images/my-image.jpg"
  alt="Mano paveikslėlis"
  width={500}
  height={300}
  loading="lazy" // Įjungti atidėtą įkėlimą (numatytoji reikšmė)
  // loading="eager" // Išjungti atidėtą įkėlimą (įkelti paveikslėlį nedelsiant)
/>

Nors atidėtas įkėlimas paprastai yra rekomenduojamas, galbūt norėsite jį išjungti paveikslėliams, kurie yra svarbūs pradiniam puslapio įkėlimui, pavyzdžiui, pagrindiniams paveikslėliams (hero images) ar logotipams.

4. Pritaikomi paveikslėliai su sizes savybe

sizes savybė leidžia apibrėžti skirtingus paveikslėlių dydžius skirtingiems ekranų dydžiams. Tai užtikrina, kad vartotojai gaus optimalų paveikslėlio dydį savo įrenginiui, taip dar labiau sumažinant pralaidumo naudojimą ir gerinant našumą.

<Image
  src="/images/my-image.jpg"
  alt="Mano paveikslėlis"
  width={1200} // Originalus paveikslėlio plotis
  height={800}  // Originalus paveikslėlio aukštis
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

Išskaidykime sizes savybės reikšmę:

sizes savybė nurodo naršyklei, kokius paveikslėlių dydžius atsisiųsti atsižvelgiant į ekrano dydį. Tai užtikrina, kad vartotojai gaus optimalų paveikslėlio dydį savo įrenginiui, sumažinant pralaidumo naudojimą ir gerinant našumą. width ir height savybės turėtų atspindėti originalius paveikslėlio matmenis.

Next.js paveikslėlių optimizavimo API konfigūravimas

Next.js naudoja paveikslėlių optimizavimo API, kad atliktų paveikslėlių optimizavimo užduotis. Pagal numatytuosius nustatymus ji naudoja integruotą Next.js paveikslėlių optimizavimo API, kuri tinka daugeliui projektų. Tačiau sudėtingesniais atvejais galite ją sukonfigūruoti naudoti trečiosios šalies tiekėją, pvz., Cloudinary, Imgix ar Akamai.

Numatytosios Next.js paveikslėlių optimizavimo API naudojimas

Numatytoji Next.js paveikslėlių optimizavimo API yra lengvai naudojama ir nereikalauja konfigūracijos. Ji automatiškai optimizuoja paveikslėlius kūrimo (build) proceso metu ir pateikia juos iš Next.js serverio.

Trečiosios šalies paveikslėlių optimizavimo tiekėjo konfigūravimas

Norėdami sukonfigūruoti trečiosios šalies paveikslėlių optimizavimo tiekėją, turite atnaujinti savo next.config.js failą. Štai pavyzdys, kaip sukonfigūruoti Cloudinary:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['res.cloudinary.com'], // Pridėkite savo Cloudinary domeną
  },
}

module.exports = nextConfig

Ši konfigūracija nurodo Next.js naudoti Cloudinary paveikslėlių optimizavimui. Taip pat turėsite naudoti Cloudinary URL formatą, kad nurodytumėte norimas paveikslėlio transformacijas. Taip pat turėsite įdiegti Cloudinary SDK:

npm install cloudinary

Dabar jūsų paveikslėliai bus optimizuojami ir pateikiami per Cloudinary.

Panašios konfigūracijos yra prieinamos ir kitiems paveikslėlių optimizavimo tiekėjams, tokiems kaip Imgix ir Akamai. Išsamesnių instrukcijų ieškokite jų atitinkamoje dokumentacijoje.

Pažangios paveikslėlių optimizavimo technikos

Be pagrindinių Image komponento funkcijų, galite naudoti kelias pažangias technikas, kad dar labiau optimizuotumėte savo paveikslėlius:

1. Turinio pristatymo tinklo (CDN) naudojimas

CDN (turinio pristatymo tinklas) yra serverių tinklas, paskirstytas visame pasaulyje, kuris kaupia ir pristato jūsų svetainės statinius išteklius, įskaitant paveikslėlius. CDN naudojimas gali žymiai pagerinti svetainės našumą, sumažinant delsą ir pateikiant paveikslėlius iš serverio, esančio arčiau vartotojo.

Populiarūs CDN tiekėjai apima:

Dauguma CDN tiekėjų siūlo lengvą integraciją su Next.js. Galite sukonfigūruoti savo CDN, kad jis kauptų ir pristatytų jūsų paveikslėlius, taip dar labiau paspartindami jų pristatymą.

2. SVG paveikslėlių optimizavimas

SVG (Scalable Vector Graphics) paveikslėliai yra vektoriniai paveikslėliai, kuriuos galima keisti neprarandant kokybės. Jie dažnai naudojami logotipams, piktogramoms ir kitai grafikai. Nors SVG paveikslėliai paprastai yra nedidelio dydžio, juos vis tiek galima optimizuoti siekiant dar didesnio našumo.

Štai keletas patarimų, kaip optimizuoti SVG paveikslėlius:

3. Paveikslėlių užpildai (Blur-Up efektas)

Paveikslėlių užpildai gali suteikti geresnę vartotojo patirtį, kol paveikslėliai įkeliami. Populiari technika yra „blur-up“ efektas, kai kaip užpildas rodoma mažos raiškos, sulieto vaizdo versija, kuri palaipsniui pakeičiama pilnos raiškos paveikslėliu, kai jis įkeliamas.

Next.js Image komponentas turi integruotą palaikymą paveikslėlių užpildams, naudojant placeholder savybę ir `blurDataURL` savybę, su `blur` reikšme `placeholder` savybei.

import Image from 'next/image';
import { useState, useEffect } from 'react';

function MyComponent() {
  const [imageSrc, setImageSrc] = useState(null);

  useEffect(() => {
    async function loadImage() {
      // Imituojame paveikslėlio ir jo blurDataURL gavimą iš API
      const imageData = await fetchImageData('/images/my-image.jpg'); // Pakeiskite savo API galiniu tašku
      setImageSrc(imageData);
    }

    loadImage();
  }, []);

  // Imitacinė funkcija, skirta imituoti paveikslėlio duomenų gavimą (pakeiskite tikru API iškvietimu)
  async function fetchImageData(imagePath) {
    // Tikroje programoje gautumėte paveikslėlio duomenis iš API.
    // Šiam pavyzdžiui grąžinsime fiktyvų objektą su blurDataURL.
    // Galite generuoti blurDataURL naudodami bibliotekas, tokias kaip „plaiceholder“ ar „blurhash“.
    return {
      src: imagePath,
      blurDataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', // Pakeiskite savo tikruoju blurDataURL
    };
  }

  if (!imageSrc) {
    return <div>Įkeliama...</div>;
  }

  return (
    <Image
      src={imageSrc.src}
      alt="Mano paveikslėlis"
      width={500}
      height={300}
      placeholder="blur" // Įjungti suliejimo užpildą
      blurDataURL={imageSrc.blurDataURL} // Pateikti blurDataURL
    />
  );
}

export default MyComponent;

Šiame pavyzdyje naudojame placeholder="blur" savybę, kad įjungtume suliejimo užpildo efektą. Taip pat pateikiame blurDataURL savybę, kuri yra base64 koduotas sulieto paveikslėlio atvaizdas. Galite generuoti blurDataURL naudodami bibliotekas, tokias kaip plaiceholder ar blurhash. width ir height savybės turėtų atspindėti originalius paveikslėlio matmenis.

Paveikslėlių optimizavimo našumo matavimas ir stebėjimas

Svarbu matuoti ir stebėti savo paveikslėlių optimizavimo pastangų našumą, siekiant užtikrinti, kad jos duoda norimą poveikį. Štai keletas įrankių ir technikų, kurias galite naudoti:

1. Google PageSpeed Insights

Google PageSpeed Insights yra nemokamas įrankis, kuris analizuoja jūsų svetainės našumą ir teikia rekomendacijas tobulinimui. Jis suteikia vertingų įžvalgų apie jūsų svetainės įkėlimo laikus, įskaitant su paveikslėliais susijusius rodiklius. Jis pabrėžia optimizavimo galimybes, susijusias su moderniais paveikslėlių formatais, paveikslėlių dydžiais ir atidėtu įkėlimu.

2. WebPageTest

WebPageTest yra kitas nemokamas įrankis, leidžiantis išbandyti jūsų svetainės našumą iš skirtingų vietovių ir naršyklių. Jis pateikia išsamius našumo rodiklius, įskaitant krioklio diagramas (waterfall charts), kurios rodo jūsų svetainės išteklių įkėlimo seką.

3. Lighthouse

Lighthouse yra atvirojo kodo automatizuotas įrankis, skirtas interneto puslapių kokybei gerinti. Galite jį paleisti Chrome DevTools arba kaip Node komandinės eilutės įrankį. Lighthouse teikia auditus našumui, prieinamumui, progresyvioms žiniatinklio programoms, SEO ir kt. Jis taip pat teikia konkrečias rekomendacijas paveikslėlių optimizavimui.

4. Core Web Vitals

Core Web Vitals yra rodiklių rinkinys, kuris matuoja jūsų svetainės vartotojo patirtį. Jie apima:

Paveikslėlių optimizavimas gali žymiai paveikti LCP ir CLS. Optimizuodami savo paveikslėlius, galite pagerinti savo „Core Web Vitals“ balus ir suteikti geresnę vartotojo patirtį.

Dažniausios klaidos, kurių reikia vengti

Nors Next.js paveikslėlių optimizavimas yra galingas, svarbu žinoti apie kai kurias dažniausiai pasitaikančias klaidas, kurių reikia vengti:

Realūs Next.js paveikslėlių optimizavimo sėkmės pavyzdžiai

Daugybė įmonių sėkmingai įdiegė Next.js paveikslėlių optimizavimą, kad pagerintų savo svetainės našumą. Štai keletas pavyzdžių:

Šie pavyzdžiai rodo didelį poveikį, kurį Next.js paveikslėlių optimizavimas gali turėti svetainės našumui ir vartotojo patirčiai.

Išvada

Next.js paveikslėlių optimizavimas yra galingas įrankis, galintis žymiai pagerinti jūsų svetainės našumą ir vartotojo patirtį. Išnaudodami Image komponentą, suprasdami paveikslėlių optimizavimo strategijas ir vengdami dažniausiai pasitaikančių klaidų, galite sukurti žaibiškai greitas svetaines, kurios įtraukia vartotojus ir skatina konversijas.

Nepamirškite matuoti ir stebėti savo paveikslėlių optimizavimo našumo naudodami įrankius, tokius kaip Google PageSpeed Insights ir WebPageTest. Nuolat optimizuodami savo paveikslėlius, galite užtikrinti, kad jūsų svetainė teikia geriausią įmanomą patirtį jūsų vartotojams.

Pasinaudokite Next.js paveikslėlių optimizavimo galia ir atskleiskite visą savo svetainės potencialą!