Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Obrazy są ważną częścią każdej strony internetowej lub aplikacji. Pomagają uczynić treść bardziej wciągającą i atrakcyjną wizualnie.

Jeśli jednak obrazy nie są odpowiednio zoptymalizowane, mogą również spowolnić działanie witryny lub aplikacji.

Dlaczego warto optymalizować obrazy?

Istnieje kilka powodów, dla których optymalizacja obrazów jest ważna.

  • Może pomóc poprawić czas ładowania strony lub aplikacji.
  • Może zmniejszyć ilość danych, które klient musi pobrać, co może zaoszczędzić na kosztach przepustowości.
  • Może pomóc poprawić ogólną wydajność witryny lub aplikacji.

Jak zoptymalizować obrazy w Next.js

Istnieje kilka sposobów optymalizacji obrazów w Next.js. Jednym z nich jest użycie komponentu Image. Ten składnik automatycznie optymalizuje obrazy pod kątem wydajności.

Innym sposobem optymalizacji obrazów jest wykorzystanie wbudowanych możliwości przetwarzania obrazu. Next.js może automatycznie zmieniać rozmiar, kompresować i optymalizować obrazy pod kątem wydajności.

instagram viewer

Na koniec możesz użyć biblioteki innej firmy, takiej jak reagujący zoptymalizowany obraz. Ta biblioteka zapewnia różnorodne możliwości optymalizacji obrazu.

Korzystanie z komponentu obrazu

Komponent Image to najprostszy sposób na optymalizację obrazów w Next.js. Aby go użyć, po prostu zaimportuj komponent z pliku następny/obraz pakiet.

Po zaimportowaniu komponentu możesz go używać jak każdego innego w React. Komponent Image ma kilka rekwizytów, których można użyć do kontrolowania sposobu renderowania obrazów.

import Obraz z „następny/obraz”

eksportdomyślnyfunkcjonowaćMój obraz() {
powrót (
<Obraz
źródło="/my-image.jpg"
szerokość="200"
wysokość="200"
jakość="100"
alt="Mój obraz"
/>
)
}

W tym przykładzie składnik Image renderuje obraz o szerokości 200 pikseli i wysokości 200 pikseli. Możesz także użyć CSS lub framework taki jak Tailwind stylizować aplikację i obrazy.

Niektóre z wymaganych rekwizytów dla komponentu Image to width, height, src i alt. Właściwość src to adres URL obrazu, którego chcesz użyć. Użyj rekwizytów szerokości i wysokości, aby ustawić szerokość i wysokość obrazu w pikselach. Alt prop jest alternatywnym tekstem dla obrazu.

Niektóre opcjonalne rekwizyty dla komponentu Image to layout, loader, symbol zastępczy i priorytet. Właściwość układu określa układ obrazu. Możesz użyć właściwości modułu ładującego, aby określić niestandardowy moduł ładujący obraz. Symbol zastępczy określa niestandardowy symbol zastępczy obrazu. Priorytet określa priorytet obrazu.

Oto niektóre z zalet korzystania z komponentu Image:

  • Poprawiona wydajność: Jedną z głównych zalet korzystania z komponentu Image jest poprawa wydajności. Komponent automatycznie optymalizuje obrazy pod kątem wydajności.
  • Automatyczna zmiana rozmiaru obrazu: Kolejną zaletą korzystania z komponentu Image jest automatyczna zmiana rozmiaru obrazu. Komponent może automatycznie zmieniać rozmiar obrazów, aby dopasować je do szerokości i wysokości rekwizytów.
  • Automatyczna kompresja obrazu: Komponent Obraz może również automatycznie kompresować obrazy, aby zmniejszyć rozmiar pliku.
  • Obsługa leniwego ładowania: Komponent Image obsługuje również ładowanie z opóźnieniem. Oznacza to, że ładuje obrazy tylko wtedy, gdy są widoczne na ekranie.

Korzystanie z biblioteki innej firmy

Jeśli potrzebujesz większej kontroli nad optymalizacją obrazu, możesz użyć biblioteki innej firmy, takiej jak obraz zoptymalizowany pod kątem reakcji. Ta biblioteka zapewnia różnorodne możliwości optymalizacji obrazu.

Niektóre funkcje obrazu zoptymalizowanego pod kątem reakcji obejmują:

  • Zoptymalizuj obrazy na kliencie i serwerze: React-optimized-image może optymalizować obrazy na kliencie i serwerze. Oznacza to, że obrazy są zoptymalizowane pod kątem wydajności oraz rozmiaru pliku.
  • Automatyczna zmiana rozmiaru obrazu: Reaguj-zoptymalizowany-obraz może automatycznie zmieniać rozmiar obrazów, aby dopasować je do szerokości i wysokości rekwizytów.
  • Automatyczna kompresja obrazu: React-optimized-image może również automatycznie kompresować obrazy, aby zmniejszyć rozmiar pliku.
  • Obsługa leniwego ładowania: React-optimized-image obsługuje również leniwe ładowanie. Oznacza to, że ładuje obrazy tylko wtedy, gdy są widoczne na ekranie.
  • Obsługa wielu formatów obrazów: React-optimized-image obsługuje wiele formatów obrazów, w tym JPEG, PNG i WebP.

Aby użyć obrazu zoptymalizowanego pod kątem reakcji, po prostu zainstaluj bibliotekę za pomocą npm.

Po zainstalowaniu biblioteki możesz zaimportować ją do swojego projektu.

import Img z „Obraz zoptymalizowany pod kątem reakcji”

eksportdomyślnyfunkcjonowaćNastępnyImg() {
powrót (
<Img
źródło="/my-image.jpg"
rozmiary={[400, 800]}
alt="Mój obraz"
/>
)
}

Możesz także użyć plików SVG z obrazem zoptymalizowanym pod kątem reakcji.

import {Svg} z „Obraz zoptymalizowany pod kątem reakcji”

eksportdomyślnyfunkcjonowaćNastępnyImg() {
powrót (
<Św
źródło="/my-image.svg"
nazwa klasy=“wypełniony-czerwony”
/>
)
}

W tym przykładzie użyto właściwości className do określenia nazwy klasy dla pliku SVG. Możesz użyć tej nazwy klasy, aby stylizować plik SVG za pomocą CSS lub wchodzić z nim w interakcję za pomocą JavaScript.

React-optimized-image zapewnia również kilka innych korzyści w porównaniu z wbudowanymi możliwościami optymalizacji obrazu.

Jedną z zalet korzystania z pakietu w porównaniu z wbudowanymi funkcjami jest to, że może on automatycznie generować obrazy o różnych rozmiarach. Oznacza to, że nie musisz tworzyć różnych wersji tego samego obrazu.

Kolejną korzyścią jest to, że może automatycznie serwować odpowiedni rozmiar obrazu dla urządzenia użytkownika. Oznacza to, że urządzenia z ekranami o wysokiej rozdzielczości otrzymają obraz o wysokiej rozdzielczości, a urządzenia z ekranami o niskiej rozdzielczości — obraz o niskiej rozdzielczości.

Wreszcie obraz zoptymalizowany pod kątem reakcji jest całkowicie projekt open-source. Oznacza to, że możesz współtworzyć bibliotekę, jeśli potrzebujesz określonej funkcji lub poprawki błędów.

Którą metodę powinieneś zastosować?

Którą metodę należy zastosować do optymalizacji obrazów w Next.js?

Jeśli potrzebujesz podstawowej optymalizacji obrazu, możesz skorzystać z wbudowanych możliwości przetwarzania obrazu. To najłatwiejszy sposób na rozpoczęcie optymalizacji obrazu.

Jeśli potrzebujesz większej kontroli nad optymalizacją obrazu, możesz użyć biblioteki innej firmy, takiej jak zoptymalizowany obraz pod kątem reakcji. Ta biblioteka zapewnia bardziej zaawansowane możliwości optymalizacji obrazu.

Jeśli potrzebujesz absolutnie najlepszej wydajności, możesz użyć kombinacji wbudowanych możliwości przetwarzania obrazu i biblioteki innej firmy. To da ci to, co najlepsze z obu światów. Jednak to podejście nie jest zalecane dla początkujących, ponieważ wymaga większej konfiguracji.

Popraw SEO dzięki zoptymalizowanym obrazom

Optymalizując obrazy w witrynie lub aplikacji, możesz poprawić swoje SEO. Algorytm Google bierze pod uwagę szybkość ładowania stron i aplikacji. Jeśli Twoja witryna lub aplikacja ładuje się wolno, wpłynie to negatywnie na SEO.

Dzięki zoptymalizowanym obrazom możesz skrócić czas ładowania swojej witryny lub aplikacji, co może poprawić Twoje SEO. Następnie możesz również dodać protokół otwartego wykresu, aby uzyskać jeszcze lepszą wydajność.