A képek minden webhely vagy alkalmazás fontos részét képezik. Segítenek a tartalom vonzóbbá és vizuálisan vonzóbbá tételében.
Ha azonban a képek nincsenek megfelelően optimalizálva, lelassíthatják a webhelyet vagy alkalmazást.
Miért érdemes a képeket optimalizálni?
Van néhány oka annak, hogy miért fontos a képek optimalizálása.
- Segíthet javítani a webhely vagy az alkalmazás betöltési idejét.
- Csökkentheti az ügyfélnek letöltendő adatmennyiséget, ami megtakaríthatja a sávszélesség költségeit.
- Segíthet javítani a webhely vagy az alkalmazás általános teljesítményét.
Hogyan optimalizáljuk a képeket a Next.js-ben
A Next.js-ben többféleképpen is optimalizálhatja a képeket. Az egyik az Image komponens használata. Ez az összetevő automatikusan optimalizálja a képeket a teljesítmény érdekében.
A képek optimalizálásának másik módja a beépített képfeldolgozási képességek használata. A Next.js képes automatikusan átméretezni, tömöríteni és optimalizálni a képeket a teljesítmény érdekében.
Végül használhat harmadik féltől származó könyvtárat, például a react-optimized-image-et. Ez a könyvtár számos képoptimalizálási lehetőséget kínál.
Az Image Component használata
Az Image összetevő a legegyszerűbb módja a képek optimalizálásának a Next.js-ben. Használatához egyszerűen importálja az összetevőt a következő/kép csomag.
Miután importálta az összetevőt, ugyanúgy használhatja, mint a React bármely más részét. Az Image komponensnek van néhány kelléke, amelyek segítségével szabályozhatja, hogyan jelenítse meg a képeket.
import Kép tól től 'következő/kép'exportalapértelmezettfunkcióMyImage() {
Visszatérés (
<Kép
src="/my-image.jpg"
szélesség="200"
magasság="200"
minőség="100"
alt="Az én képem"
/>
)
}
Ebben a példában az Image összetevő 200 képpont széles és 200 képpont magas képet jelenít meg. Használhatja a CSS ill olyan keretrendszer, mint a Tailwind az alkalmazás és a képek stílusához.
Az Image komponens néhány szükséges kelléke a szélesség, magasság, src és alt. Az src prop a használni kívánt kép URL-je. A szélességi és magassági támaszokkal állítsa be a kép szélességét és magasságát pixelben. Az alt prop a kép alternatív szövege.
Az Image összetevő néhány opcionális kelléke az elrendezés, a betöltő, a helyőrző és a prioritás. Az elrendezési javaslat határozza meg a kép elrendezését. Egyéni képbetöltő megadásához használhatja a betöltő propot. A helyőrző javaslat egyéni képhelyőrzőt határoz meg. A prioritási javaslat határozza meg a kép prioritását.
Az Image komponens használatának néhány előnye:
- Jobb teljesítmény: Az Image komponens használatának egyik fő előnye a jobb teljesítmény. Az összetevő automatikusan optimalizálja a képeket a teljesítményhez.
- Automatikus képméretezés: Az Image komponens használatának másik előnye az automatikus képméretezés. Az összetevő automatikusan átméretezheti a képeket, hogy illeszkedjenek a szélességi és magassági kellékekhez.
- Automatikus képtömörítés: Az Image komponens automatikusan tömörítheti a képeket a fájlméret csökkentése érdekében.
- Lusta betöltés támogatása: Az Image komponens is támogatja a lusta betöltést. Ez azt jelenti, hogy csak akkor tölti be a képeket, ha azok láthatók a képernyőn.
Harmadik féltől származó könyvtár használata
Ha nagyobb szabályozásra van szüksége a képoptimalizálás felett, használhat harmadik féltől származó könyvtárat, például reagálni-optimalizált-kép. Ez a könyvtár számos képoptimalizálási lehetőséget kínál.
A reagálásra optimalizált kép néhány jellemzője:
- Képek optimalizálása a kliensen és a szerveren: A react-optimized-image képes optimalizálni a kliensen és a szerveren lévő képeket. Ez azt jelenti, hogy a képek teljesítményre és fájlméretre is optimalizálva vannak.
- Automatikus képméretezés: A react-optimized-image képes automatikusan átméretezni a képeket, hogy illeszkedjenek a szélességi és magassági kellékekhez.
- Automatikus képtömörítés: A react-optimized-image képes automatikusan tömöríteni is a képeket a fájlméret csökkentése érdekében.
- Lusta betöltés támogatása: A react-optimized-image a lusta betöltést is támogatja. Ez azt jelenti, hogy csak akkor tölti be a képeket, ha azok láthatók a képernyőn.
- Több képformátum támogatása: A react-optimized-image többféle képformátumot támogat, beleértve a JPEG-et, PNG-t és WebP-t.
A react-optimized-image használatához egyszerűen telepítse a könyvtárat az npm segítségével.
Miután telepítette a könyvtárat, importálhatja azt a projektbe.
import Img tól től 'react-optimized-image'exportalapértelmezettfunkcióKövetkezőImg() {
Visszatérés (
<Img
src="/my-image.jpg"
méretek={[400, 800]}
alt="Az én képem"
/>
)
}
SVG-fájlokat is használhat reakcióoptimalizált képpel.
import {Svg} tól től 'react-optimized-image'exportalapértelmezettfunkcióKövetkezőImg() {
Visszatérés (
<Svg
src="/my-image.svg"
osztálynév=“töltött-piros”
/>
)
}
Ez a példa a className prop segítségével adja meg az SVG osztály nevét. Ezt az osztálynevet használhatja az SVG stílusozásához CSS-szel, vagy interakcióba léphet vele JavaScript használatával.
A react-optimized-image néhány egyéb előnnyel is rendelkezik a beépített képoptimalizálási lehetőségekkel szemben.
A csomag használatának egyik előnye a beépített szolgáltatásokkal szemben, hogy automatikusan képes különböző méretű képeket generálni. Ez azt jelenti, hogy nem kell ugyanannak a képnek különböző verzióit létrehoznia.
További előnye, hogy automatikusan képes kiszolgálni a felhasználó eszközének megfelelő méretű képet. Ez azt jelenti, hogy a nagy felbontású képernyővel rendelkező készülékek nagy felbontású, a kis felbontású képernyőkkel rendelkező készülékek pedig kis felbontású képet kapnak.
Végül a reagálásra optimalizált kép egy teljesen nyílt forráskódú projekt. Ez azt jelenti, hogy hozzájárulhat a könyvtárhoz, ha konkrét funkcióra vagy hibajavításra van szüksége.
Melyik módszert érdemes használni?
Tehát melyik módszert használja a képek optimalizálásához a Next.js-ben?
Ha alapvető képoptimalizálásra van szüksége, akkor használhatja a beépített képfeldolgozási lehetőségeket. Ez a legegyszerűbb módja annak, hogy elkezdje a képoptimalizálást.
Ha nagyobb szabályozásra van szüksége a képoptimalizálás felett, használhat harmadik féltől származó könyvtárat, például a react-optimized-image-et. Ez a könyvtár fejlettebb képoptimalizálási lehetőségeket biztosít.
Ha az abszolút legjobb teljesítményre van szüksége, akkor használhatja a beépített képfeldolgozó képességek és a harmadik féltől származó könyvtár kombinációját. Ez mindkét világból a legjobbat nyújtja. Ez a megközelítés azonban nem ajánlott kezdőknek, mivel több beállítást igényel.
Javítsa a SEO-t optimalizált képekkel
A webhelyén vagy az alkalmazásában lévő képek optimalizálásával javíthatja a keresőoptimalizálást. A Google algoritmusa figyelembe veszi a webhelyek és alkalmazások betöltési sebességét. Ha webhelye vagy alkalmazása lassan töltődik be, az negatív hatással lesz a keresőoptimalizálására.
Az optimalizált képekkel javíthatja webhelye vagy alkalmazása betöltési idejét, ami javíthatja a SEO-t. Ezt követően nyitott gráf protokollt is hozzáadhat a még jobb teljesítmény érdekében.
