Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Obrázky jsou důležitou součástí každé webové stránky nebo aplikace. Pomáhají k tomu, aby byl obsah poutavější a vizuálně přitažlivější.

Pokud však obrázky nejsou správně optimalizovány, mohou také zpomalit web nebo aplikaci.

Proč optimalizovat obrázky?

Existuje několik důvodů, proč je důležité obrázky optimalizovat.

  • Může pomoci zlepšit dobu načítání webu nebo aplikace.
  • Může snížit množství dat, které klient potřebuje ke stažení, což může ušetřit náklady na šířku pásma.
  • Může pomoci zlepšit celkový výkon webu nebo aplikace.

Jak optimalizovat obrázky v Next.js

Existuje několik způsobů, jak můžete optimalizovat obrázky v Next.js. Jedním z nich je použití komponenty Image. Tato součást automaticky optimalizuje obrázky pro výkon.

Dalším způsobem optimalizace obrázků je použití vestavěných funkcí pro zpracování obrázků. Next.js dokáže automaticky měnit velikost, komprimovat a optimalizovat obrázky pro výkon.

instagram viewer

Nakonec můžete použít knihovnu třetí strany, jako je reagovat optimalizovaný-image. Tato knihovna poskytuje řadu možností optimalizace obrazu.

Použití Image Component

Komponenta Image je nejjednodušší způsob, jak optimalizovat obrázky v Next.js. Chcete-li jej použít, jednoduše importujte komponentu z další/obrázek balík.

Jakmile komponentu naimportujete, můžete ji použít jako kteroukoli jinou v Reactu. Komponenta Image má několik rekvizit, které můžete použít k ovládání způsobu vykreslování obrázků.

import obraz z 'další/obrázek'

vývoznívýchozífunkceMůj obrázek() {
vrátit se (
<obraz
src="/my-image.jpg"
šířka="200"
výška ="200"
kvalita ="100"
alt="Můj obraz"
/>
)
}

V tomto příkladu komponenta Obrázek vykreslí obrázek o šířce 200px a výšce 200px. Můžete také použít CSS popř framework jako Tailwind styl vaší aplikace a obrázků.

Některé z požadovaných rekvizit pro komponentu Obrázek jsou šířka, výška, src a alt. Prop src je adresa URL obrázku, který chcete použít. Pomocí podpěr šířky a výšky nastavte šířku a výšku obrázku v pixelech. Alt prop je alternativní text obrázku.

Některé volitelné rekvizity pro komponentu Image jsou rozvržení, zavaděč, zástupný symbol a priorita. Rozvržení prop určuje rozvržení obrázku. Pomocí podpěry zavaděče můžete určit vlastní zavaděč obrázků. Zástupný symbol určuje vlastní zástupný symbol obrázku. Priorita prop určuje prioritu obrázku.

Některé z výhod používání komponenty Image jsou:

  • Zlepšený výkon: Jednou z hlavních výhod použití komponenty Image je vyšší výkon. Komponenta automaticky optimalizuje obrázky pro výkon.
  • Automatická změna velikosti obrázku: Další výhodou použití komponenty Image je automatická změna velikosti obrázku. Komponenta může automaticky měnit velikost obrázků tak, aby odpovídaly šířce a výšce podpěr.
  • Automatická komprese obrázků: Komponenta Image může také automaticky komprimovat obrázky, aby se zmenšila velikost souboru.
  • Podpora líného načítání: Komponenta Image také podporuje líné načítání. To znamená, že načte obrázky pouze tehdy, když jsou viditelné na obrazovce.

Používání knihovny třetích stran

Pokud potřebujete větší kontrolu nad optimalizací obrazu, můžete použít knihovnu třetích stran jako reagovat-optimalizovaný-obraz. Tato knihovna poskytuje řadu možností optimalizace obrazu.

Některé z funkcí obrazu optimalizovaného pro reakce zahrnují:

  • Optimalizace obrázků na klientovi a serveru: Reag-optimized-image dokáže optimalizovat obrazy na klientovi a serveru. To znamená, že obrázky jsou optimalizovány pro výkon i velikost souboru.
  • Automatická změna velikosti obrázku: Reag-optimized-image dokáže automaticky změnit velikost obrázků tak, aby odpovídaly šířce a výšce rekvizit.
  • Automatická komprese obrazu: Reag-optimized-image může také automaticky komprimovat obrázky, aby se zmenšila velikost souboru.
  • Podpora líného načítání: Reagovat optimalizovaný obraz také podporuje líné načítání. To znamená, že načte obrázky pouze tehdy, když jsou viditelné na obrazovce.
  • Podpora více formátů obrázků: Reag-optimized-image podporuje více obrazových formátů, včetně JPEG, PNG a WebP.

Chcete-li použít reakční optimalizovaný obraz, jednoduše nainstalujte knihovnu pomocí npm.

Jakmile knihovnu nainstalujete, můžete ji importovat do svého projektu.

import Obr z 'react-optimized-image'

vývoznívýchozífunkceNextImg() {
vrátit se (
<Obr
src="/my-image.jpg"
velikosti={[400, 800]}
alt="Můj obraz"
/>
)
}

Můžete také použít soubory SVG s obrazem optimalizovaným pro reakci.

import {Svg} z 'react-optimized-image'

vývoznívýchozífunkceNextImg() {
vrátit se (
<Svg
src="/my-image.svg"
className=“plněné-červené”
/>
)
}

Tento příklad používá prop název třídy k určení názvu třídy pro SVG. Tento název třídy můžete použít ke stylování SVG pomocí CSS nebo s ním pracovat pomocí JavaScriptu.

Reagovat optimalizovaný obraz také poskytuje několik dalších výhod oproti vestavěným funkcím optimalizace obrazu.

Jednou z výhod použití balíčku oproti vestavěným funkcím je, že může automaticky generovat různé velikosti obrázků. To znamená, že nemusíte vytvářet různé verze stejného obrázku.

Další výhodou je, že dokáže automaticky zobrazit vhodnou velikost obrázku pro zařízení uživatele. To znamená, že zařízení s obrazovkami s vysokým rozlišením získají obraz s vysokým rozlišením a zařízení s obrazovkami s nízkým rozlišením získají obraz s nízkým rozlišením.

Konečně, obraz optimalizovaný pro reakce je zcela open-source projekt. To znamená, že můžete přispívat do knihovny, pokud potřebujete konkrétní funkci nebo opravu chyb.

Jakou metodu byste měli použít?

Jakou metodu byste tedy měli použít k optimalizaci obrázků v Next.js?

Pokud potřebujete základní optimalizaci obrazu, můžete využít vestavěné možnosti zpracování obrazu. Toto je nejjednodušší způsob, jak začít s optimalizací obrázků.

Pokud potřebujete větší kontrolu nad optimalizací obrazu, můžete použít knihovnu třetí strany, jako je reagovat-optimalizovaný-image. Tato knihovna poskytuje pokročilejší možnosti optimalizace obrazu.

Pokud potřebujete absolutně nejlepší výkon, pak můžete použít kombinaci vestavěných schopností zpracování obrazu a knihovny třetích stran. To vám dá to nejlepší z obou světů. Tento přístup se však začátečníkům nedoporučuje, protože vyžaduje více nastavení.

Zlepšete SEO pomocí optimalizovaných obrázků

Optimalizací obrázků na vašem webu nebo v aplikaci můžete zlepšit své SEO. Algoritmus Google bere v úvahu rychlost načítání webových stránek a aplikací. Pokud se váš web nebo aplikace načítá pomalu, bude to mít negativní dopad na vaše SEO.

S optimalizovanými obrázky můžete zlepšit dobu načítání vašeho webu nebo aplikace, což může zlepšit vaše SEO. Poté můžete také přidat protokol otevřeného grafu pro ještě lepší výkon.