Obrázky sú dôležitou súčasťou každej webovej stránky alebo aplikácie. Pomáhajú k tomu, aby bol obsah pútavejší a vizuálne príťažlivejší.
Ak však obrázky nie sú správne optimalizované, môžu tiež spomaliť web alebo aplikáciu.
Prečo optimalizovať obrázky?
Existuje niekoľko dôvodov, prečo je dôležité optimalizovať obrázky.
- Môže pomôcť zlepšiť čas načítania stránky alebo aplikácie.
- Môže znížiť množstvo dát, ktoré klient potrebuje stiahnuť, čo môže ušetriť náklady na šírku pásma.
- Môže pomôcť zlepšiť celkový výkon stránky alebo aplikácie.
Ako optimalizovať obrázky v Next.js
Existuje niekoľko spôsobov, ako môžete optimalizovať obrázky v Next.js. Jedným z nich je použitie komponentu Image. Tento komponent automaticky optimalizuje výkon obrázkov.
Ďalším spôsobom optimalizácie obrázkov je použitie vstavaných možností spracovania obrázkov. Next.js dokáže automaticky meniť veľkosť, komprimovať a optimalizovať obrázky pre výkon.
Nakoniec môžete použiť knižnicu tretej strany, napríklad obrázok optimalizovaný pre reakcie. Táto knižnica poskytuje rôzne možnosti optimalizácie obrazu.
Používanie obrazového komponentu
Komponent Image je najjednoduchší spôsob, ako optimalizovať obrázky v Next.js. Ak ho chcete použiť, jednoducho importujte komponent z ďalší/obrázok balík.
Po importovaní komponentu ho môžete použiť ako ktorýkoľvek iný v Reacte. Komponent Obrázok má niekoľko rekvizít, ktoré môžete použiť na ovládanie spôsobu vykresľovania obrázkov.
importovať Obrázok od 'ďalší/obrázok'exportpredvolenáfunkciuMyImage() {
vrátiť (
<Obrázok
src="/my-image.jpg"
šírka ="200"
výška ="200"
kvalita ="100"
alt="Môj obraz"
/>
)
}
V tomto príklade komponent Image vykreslí obrázok so šírkou 200px a výškou 200px. Môžete použiť aj CSS resp rámec ako Tailwind na štýl aplikácie a obrázkov.
Niektoré z požadovaných rekvizít pre komponent Image sú šírka, výška, src a alt. Prop src je adresa URL obrázka, ktorý chcete použiť. Pomocou podpier šírky a výšky nastavte šírku a výšku obrázka v pixeloch. Alternatívna rekvizita je alternatívny text pre obrázok.
Niektoré voliteľné rekvizity pre komponent Image sú rozloženie, zavádzač, zástupný symbol a priorita. Návrh rozloženia určuje rozloženie obrázka. Na zadanie vlastného načítača obrázkov môžete použiť podperu zavádzača. Zástupný symbol určuje vlastný zástupný symbol obrázka. Priorita určuje prioritu obrázka.
Niektoré z výhod používania komponentu Image sú:
- Vylepšený výkon: Jednou z hlavných výhod používania komponentu Image je vyšší výkon. Komponent automaticky optimalizuje obrázky pre výkon.
- Automatická zmena veľkosti obrázka: Ďalšou výhodou použitia komponentu Image je automatická zmena veľkosti obrázka. Komponent dokáže automaticky zmeniť veľkosť obrázkov tak, aby sa zmestili na šírku a výšku rekvizít.
- Automatická kompresia obrázkov: Komponent Obrázok môže tiež automaticky komprimovať obrázky, aby sa zmenšila veľkosť súboru.
- Podpora lenivého načítania: Komponent Image tiež podporuje lenivé načítanie. To znamená, že obrázky načíta iba vtedy, keď sú viditeľné na obrazovke.
Používanie knižnice tretej strany
Ak potrebujete väčšiu kontrolu nad optimalizáciou obrázkov, môžete použiť knižnicu tretích strán, napr reagovať-optimalizovaný-obraz. Táto knižnica poskytuje rôzne možnosti optimalizácie obrazu.
Niektoré z funkcií obrazu optimalizovaného pre reakcie zahŕňajú:
- Optimalizujte obrázky na klientovi a serveri: Reag-optimized-image dokáže optimalizovať obrázky na klientovi a serveri. To znamená, že obrázky sú optimalizované pre výkon aj veľkosť súboru.
- Automatická zmena veľkosti obrázka: Reag-optimized-image dokáže automaticky zmeniť veľkosť obrázkov tak, aby sa zmestili na šírku a výšku rekvizít.
- Automatická kompresia obrázkov: Reag-optimized-image môže tiež automaticky komprimovať obrázky, aby sa zmenšila veľkosť súboru.
- Podpora lenivého načítania: Reagovat optimalizovaný obraz tiež podporuje lenivé načítanie. To znamená, že obrázky načíta iba vtedy, keď sú viditeľné na obrazovke.
- Podpora viacerých formátov obrázkov: Reag-optimized-image podporuje viacero obrazových formátov vrátane JPEG, PNG a WebP.
Ak chcete použiť obraz optimalizovaný pre reakcie, jednoducho nainštalujte knižnicu pomocou npm.
Po nainštalovaní knižnice ju môžete importovať do svojho projektu.
importovať Obr od 'react-optimized-image'exportpredvolenáfunkciuNextImg() {
vrátiť (
<Obr
src="/my-image.jpg"
veľkosti = {[400, 800]}
alt="Môj obraz"
/>
)
}
Môžete tiež použiť súbory SVG s obrazom optimalizovaným pre reakcie.
importovať {Svg} od 'react-optimized-image'exportpredvolenáfunkciuNextImg() {
vrátiť (
<Svg
src="/my-image.svg"
className=“vyplnená-červená”
/>
)
}
V tomto príklade sa používa podložka className na zadanie názvu triedy pre SVG. Tento názov triedy môžete použiť na úpravu SVG pomocou CSS alebo na interakciu s ním pomocou JavaScriptu.
Reag-optimized-image poskytuje oproti vstavaným možnostiam optimalizácie obrazu aj niekoľko ďalších výhod.
Jednou z výhod používania balíka oproti vstavaným funkciám je, že dokáže automaticky generovať rôzne veľkosti obrázkov. To znamená, že nemusíte vytvárať rôzne verzie toho istého obrázka.
Ďalšou výhodou je, že dokáže automaticky zobraziť vhodnú veľkosť obrázka pre zariadenie používateľa. To znamená, že zariadenia s obrazovkami s vysokým rozlíšením získajú obraz s vysokým rozlíšením a zariadenia s obrazovkami s nízkym rozlíšením získajú obraz s nízkym rozlíšením.
Nakoniec je obraz optimalizovaný pre reakcie úplne open-source projekt. To znamená, že môžete prispieť do knižnice, ak potrebujete konkrétnu funkciu alebo opravu chýb.
Ktorú metódu by ste mali použiť?
Ktorú metódu by ste teda mali použiť na optimalizáciu obrázkov v Next.js?
Ak potrebujete základnú optimalizáciu obrazu, môžete použiť vstavané možnosti spracovania obrazu. Toto je najjednoduchší spôsob, ako začať s optimalizáciou obrázkov.
Ak potrebujete väčšiu kontrolu nad optimalizáciou obrázkov, môžete použiť knižnicu tretej strany, ako je napríklad obrázok s optimalizovanou reakciou. Táto knižnica poskytuje pokročilejšie možnosti optimalizácie obrázkov.
Ak potrebujete absolútne najlepší výkon, potom môžete použiť kombináciu vstavaných možností spracovania obrazu a knižnice tretích strán. To vám poskytne to najlepšie z oboch svetov. Tento prístup sa však neodporúča pre začiatočníkov, pretože vyžaduje viac nastavení.
Zlepšite SEO pomocou optimalizovaných obrázkov
Optimalizáciou obrázkov na vašom webe alebo v aplikácii môžete zlepšiť svoje SEO. Algoritmus Google zohľadňuje rýchlosť načítania webových stránok a aplikácií. Ak sa váš web alebo aplikácia načítava pomaly, negatívne to ovplyvní vaše SEO.
Pomocou optimalizovaných obrázkov môžete zlepšiť rýchlosť načítania svojho webu alebo aplikácie, čo môže zlepšiť vaše SEO. Potom môžete tiež pridať protokol otvoreného grafu pre ešte lepší výkon.
