0Pricing
Frontend Academy · Lekcja

Optymalizacja obrazów: lazy loading i formaty WebP

Proszę dodawać loading=lazy do obrazów, udostępniać nowoczesne formaty WebP i AVIF, używać responsywnych obrazów z srcset i sizes oraz ustawiać jawne width i height, aby zapobiegać przesunięciom układu.

Optymalizacja obrazów: lazy loading i formaty WebP to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Obrazy stanowią większość rozmiaru strony

Mediana rozmiaru strony internetowej wynosi około 2 MB, a obrazy odpowiadają za mniej więcej połowę tej wartości. Optymalizacja obrazów to zadanie o największym wpływie na wydajność.

Nowoczesne formaty: WebP i AVIF

WebP zajmuje o 25–35% mniej miejsca niż JPEG przy podobnej jakości i jest obsługiwany przez wszystkie nowoczesne przeglądarki. AVIF zajmuje jeszcze mniej miejsca (redukcja o 50%), ale jego kodowanie trwa dłużej. Należy używać obu formatów z rozwiązaniem zastępczym.

Element picture

Należy użyć <picture>, aby serwować AVIF, jeśli jest obsługiwany, następnie WebP, a na końcu JPEG jako ostateczne rozwiązanie zastępcze.

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>

Natywne leniwe ładowanie

Należy dodać loading="lazy" do obrazów znajdujących się poniżej obszaru widocznego bez przewijania. Przeglądarka odroczy ich ładowanie do momentu, gdy obraz zbliży się do obszaru widoku — nie jest potrzebny JavaScript.

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

Responsywne obrazy z użyciem srcset i sizes

Należy serwować mniejsze obrazy na mniejszych ekranach. srcset zawiera listę obrazów kandydujących wraz z ich szerokościami, a sizes informuje przeglądarkę, jaką szerokość ma obraz przy każdym punkcie przełamania.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

Dlaczego należy jawnie ustawiać width i height

Przeglądarka rezerwuje miejsce na podstawie atrybutów width i height, zapobiegając przesunięciu układu po pojawieniu się obrazu. Nowoczesne przeglądarki automatycznie obliczają aspect-ratio na podstawie tych atrybutów.

decoding="async"

Należy dodać decoding="async", aby umożliwić przeglądarce dekodowanie obrazu poza głównym wątkiem i zwolnić go do renderowania pozostałej zawartości.

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

CDN-y obrazów

CDN-y obrazów (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) przekształcają obrazy na bieżąco: zmieniają ich rozmiar, konwertują je do WebP/AVIF, kompresują i serwują z pamięci podręcznych na brzegu sieci.

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Komponent Image w Next.js

Komponent <Image> w Next.js obsługuje responsywne srcset, konwersję do WebP, leniwe ładowanie i zastępczy obraz z efektem rozmycia od razu po instalacji.

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

Kompresowanie plików JPEG i PNG

Jeśli nie można przejść na WebP, należy przynajmniej skompresować obrazy: do pojedynczych plików można użyć Squoosh (squoosh.app), do przetwarzania wsadowego ImageOptim, a w skrypcie kompilacji — sharp.

SVG dla ikon i logo

Należy używać SVG do ikon, logo i dowolnych grafik wektorowych. Pliki SVG idealnie się skalują, zajmują niewiele miejsca i można je stylować za pomocą CSS. Małe pliki SVG warto umieszczać bezpośrednio w dokumencie, aby uniknąć dodatkowego żądania HTTP.

Szybki sprawdzian

Jaki atrybut HTML informuje przeglądarkę, aby odroczyła ładowanie obrazu do momentu, gdy zbliży się on do obszaru widoku?

Podsumowanie: optymalizacja obrazów

Należy używać nowoczesnych formatów (AVIF, WebP) za pośrednictwem elementu picture. Obrazom poniżej obszaru widocznego bez przewijania należy dodać loading="lazy", a głównemu obrazowi — fetchpriority="high". Należy jawnie ustawiać width i height, aby zapobiegać CLS. Do responsywnych obrazów należy używać srcset/sizes. CDN-y obrazów automatyzują przekształcanie plików. Komponent Image w Next.js obsługuje wszystkie te funkcje. SVG należy stosować do ikon.

Często zadawane pytania

Czy lekcja „Optymalizacja obrazów: lazy loading i formaty WebP” jest bezpłatna?

Tak — pełny tekst „Optymalizacja obrazów: lazy loading i formaty WebP” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Optymalizacja obrazów: lazy loading i formaty WebP”?

Proszę dodawać loading=lazy do obrazów, udostępniać nowoczesne formaty WebP i AVIF, używać responsywnych obrazów z srcset i sizes oraz ustawiać jawne width i height, aby zapobiegać przesunięciom ukła… Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Optymalizacja obrazów: lazy loading i formaty WebP”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Core Web Vitals: LCP, FID, CLS
  2. Audytowanie i ocenianie za pomocą Lighthouse
  3. Optymalizacja obrazów: lazy loading i formaty WebP
  4. Dzielenie kodu i leniwe trasy
← Powrót do Frontend Academy