Zapytaj dowolnego programistę, co spowalnia większość stron, a odpowiedź prawie zawsze jest ta sama. Obrazy. Optymalizacja obrazów pod internet to proces zmniejszania rozmiaru plików bez utraty jakości wizualnej, tak by podstrony ładowały się szybciej i nie wyglądały gorzej. Jedno niezkompresowane zdjęcie może mieć kilka megabajtów. Ten sam obraz, odpowiednio sformatowany i skompresowany, może mieć poniżej 100 kilobajtów, bez widocznej różnicy na ekranie. Ten artykuł pokazuje, jakich formatów plików używać, jak działa kompresja, kiedy zmieniać rozmiar przed wgraniem, jak wpisuje się w to lazy loading i co daje największą praktyczną różnicę w szybkości ładowania podstron.
Obrazy to największy pojedynczy składnik wagi podstrony na większości stron. Podstrona z pięcioma niezoptymalizowanymi zdjęciami może ważyć dziesięć razy więcej, niż musi. Ta waga przekłada się bezpośrednio na wolniejsze ładowanie, gorszy wynik Largest Contentful Paint i odwiedzających, którzy wychodzą, zanim podstrona zdąży się wyświetlić. Dlaczego szybkość ładowania wpływa na Twoją firmę i pozycje w wyszukiwarce, wyjaśnia artykuł o tym, dlaczego szybkość strony ma znaczenie.
Dlaczego obrazy spowalniają strony?
Gdy odwiedzający otwiera podstronę, przeglądarka pobiera wszystkie jej zasoby, zanim ją wyświetli. Obrazy są zwykle największymi z tych zasobów. Każdy obraz wymaga osobnego żądania, a przeglądarka musi poczekać na ich zakończenie, zanim w pełni wyświetli treść.
Jak obrazy wpływają na wskaźniki ładowania
- Obrazy bezpośrednio wpływają na Largest Contentful Paint (LCP). Jeśli największym widocznym elementem podstrony jest zdjęcie główne, LCP to czas, w jakim ten obraz w pełni się załaduje
- Niezoptymalizowane obrazy zwiększają całkowitą wagę podstrony, co opóźnia każdy inny wskaźnik na osi ładowania
- Na połączeniach mobilnych efekt jest wzmocniony. Zdjęcie główne o wadze 3 MB, które ładuje się w dwie sekundy na łączu stacjonarnym, może potrzebować ośmiu lub więcej sekund w przeciętnej sieci komórkowej
- Wiele dużych obrazów pogłębia problem. Galeria lub strona produktu z dziesięcioma niezkompresowanymi zdjęciami może być trudna w użyciu na wolniejszych połączeniach
Jakich formatów plików używać do obrazów w internecie?
JPEG
- Standardowy format dla fotografii i obrazów z gradientami i wieloma kolorami
- Obsługuje kompresję stratną, czyli część danych obrazu jest trwale usuwana, by zmniejszyć rozmiar pliku
- Obsługiwany przez wszystkie przeglądarki i urządzenia bez wyjątku
- Ustawienie jakości od 75 do 85 daje pliki mniejsze o 60 do 80 procent od oryginału, bez widocznej utraty jakości w większości fotografii
PNG
- Format dla obrazów, które potrzebują przezroczystego tła, w tym logo, ikon i grafik z płaskimi obszarami koloru
- Używa kompresji bezstratnej, czyli żadne dane nie są usuwane, a obraz zostaje zachowany dokładnie
- Pliki PNG są znacznie większe niż JPEG dla fotografii. Używaj PNG tylko gdy potrzebna jest przezroczystość, a do zdjęć używaj JPEG lub WebP
WebP
- Nowoczesny format stworzony, by zastąpić i JPEG, i PNG, z lepszą kompresją przy równoważnej jakości
- Obrazy WebP są zwykle o 25 do 35 procent mniejsze niż równoważne pliki JPEG
- Obsługuje kompresję stratną i bezstratną oraz przezroczystość
- Obsługiwany przez wszystkie główne przeglądarki. Jeśli Twój kreator stron nie konwertuje obrazów na WebP automatycznie, przekonwertuj je ręcznie przed wgraniem
AVIF
- Nowszy format, który daje lepszą kompresję niż WebP, często o 50 procent mniejszy niż JPEG przy porównywalnej jakości
- Obsługa w przeglądarkach rośnie, ale nie jest jeszcze powszechna. Używaj AVIF tam, gdzie jest obsługiwany, z automatycznym powrotem do WebP lub JPEG dla przeglądarek, które go nie obsługują
Czym jest kompresja obrazów i jak działa?
Kompresja zmniejsza rozmiar pliku przez usuwanie lub upraszczanie danych obrazu. Są dwa rodzaje, a różnica decyduje o tym, kiedy użyć którego.
Kompresja stratna
- Trwale usuwa część danych obrazu, by uzyskać mniejszy plik
- Usuwane dane są wybierane według tego, czego ludzkie oko najmniej prawdopodobnie zauważy, zwykle subtelnych zmian koloru i drobnych szczegółów faktury
- Używana w JPEG i stratnym WebP
- Ustawienie jakości od 75 do 85 daje dramatycznie mniejsze pliki, a obrazy wyglądają identycznie jak niezkompresowany oryginał w większości praktycznych zastosowań
- Unikaj ponownego zapisywania już skompresowanego JPEG przy niższej jakości. To nakłada artefakty kompresji i z każdym zapisem pogarsza obraz
Kompresja bezstratna
- Zmniejsza rozmiar pliku bez usuwania jakichkolwiek danych obrazu. Każdy piksel jest zachowany dokładnie
- Używana w PNG i bezstratnym WebP
- Oszczędność rozmiaru jest mniejsza niż przy kompresji stratnej, ale bez żadnej utraty jakości
- Najlepsza dla diagramów produktów, zrzutów ekranu, grafik z dużą ilością tekstu lub każdego obrazu, w którym artefakty kompresji byłyby widoczne lub niedopuszczalne
Czy trzeba zmieniać rozmiar obrazów przed wgraniem?
Rozmiar pliku i wymiary w pikselach to osobne sprawy, a obie wpływają na szybkość ładowania. Kompresja obrazu o szerokości 4000 pikseli nie pomaga, jeśli przeglądarka musi go wyświetlić tylko w szerokości 800 pikseli. Przeglądarka pobiera pełny obraz 4000 pikseli i skaluje go w oknie, marnując transfer i spowalniając podstronę dla każdego odwiedzającego.
Jak poprawnie dobrać rozmiar obrazów przed wgraniem
- Ustal maksymalną szerokość, w jakiej obraz będzie kiedykolwiek wyświetlany. Dla obrazów na pełną szerokość na komputerze to zwykle 1440 do 1920 pikseli
- Dla obrazów w kolumnach lub kartach wyświetlana szerokość jest mniejsza, często 400 do 800 pikseli
- Zmień rozmiar obrazu do jego maksymalnego rozmiaru wyświetlania przed wgraniem
- Dla ekranów retina i o wysokiej gęstości pomnóż szerokość wyświetlania przez 1,5 do 2. Obraz karty o szerokości 400 pikseli zyskuje na pliku źródłowym o szerokości 600 do 800 pikseli, by wyglądać ostro na ekranach retina
Czym jest lazy loading i jak wpływa na optymalizację obrazów?
Lazy loading opóźnia pobieranie obrazów, które nie są jeszcze widoczne w oknie przeglądarki. Zamiast ładować wszystkie obrazy na podstronie naraz, przeglądarka ładuje obrazy dopiero wtedy, gdy odwiedzający przewijają blisko nich. Na podstronach z wieloma obrazami to znacznie zmniejsza początkową wagę podstrony i poprawia Time to Interactive dla treści widocznej bez przewijania.
- Lazy loading jest natywnie obsługiwany we wszystkich głównych przeglądarkach przez atrybut
loading="lazy"w znacznikach obrazów - Nie stosuj lazy loadingu do obrazów above the fold. Zdjęcie główne i każda treść widoczna bez przewijania powinny ładować się od razu
- Stosuj lazy loading do wszystkich obrazów poniżej linii zgięcia, w tym galerii produktów, miniatur bloga i sekcji z dużą liczbą obrazów dalej na podstronie
Pełne omówienie tego, jak działa lazy loading i kiedy go używać, znajdziesz w artykule o tym, czym jest lazy loading i jak działa.
Czym są obrazy responsywne i dlaczego mają znaczenie?
Obraz responsywny to taki, który serwuje plik o innym rozmiarze zależnie od rozmiaru ekranu odwiedzającego. Zamiast wysyłać obraz 1920 pikseli na każde urządzenie, także do odwiedzającego na telefonie o szerokości ekranu 375 pikseli, obrazy responsywne pozwalają przeglądarce zażądać tylko tego, czego potrzebuje.
Jak obrazy responsywne skracają czas ładowania na telefonie
- Odwiedzający na telefonie dostaje wersję obrazu o szerokości 400 pikseli zamiast pełnego pliku na komputer, co dramatycznie zmniejsza rozmiar pobierania
- Obrazy responsywne używają atrybutu
srcset, by zdefiniować wiele plików źródłowych o różnych szerokościach, tak by przeglądarka mogła wybrać odpowiedni - Kreatory stron, które robią to automatycznie, oszczędzają Ci ręcznego generowania wielu rozmiarów obrazów
- Obrazy responsywne bezpośrednio poprawiają Core Web Vitals na telefonach, gdzie optymalizacja obrazów ma największy wpływ na LCP
Omówienie Core Web Vitals i tego, jak oceniany jest LCP, znajdziesz w artykule o tym, czym są Core Web Vitals.
Jak optymalizować obrazy krok po kroku?
Przed wgraniem
- Zmień rozmiar obrazu do właściwych wymiarów wyświetlania
- Wybierz właściwy format: WebP dla fotografii i ogólnej grafiki, PNG tylko gdy potrzebna jest przezroczystość
- Skompresuj, używając jakości od 75 do 85 dla formatów stratnych
- Sprawdź rozmiar pliku. Typowy obraz internetowy powinien mieć poniżej 200 KB. Zdjęcia główne na komputerze mogą mieć do 400 KB; wszystko powyżej warto przejrzeć przed wgraniem
Po wgraniu
- Dodaj opisowy tekst alternatywny (alt text) do każdego obrazu. To ważne dla dostępności i przyczynia się do widoczności w wyszukiwarce. Pełny przewodnik znajdziesz w artykule o tym, jak używać obrazów na stronie
- Zastosuj lazy loading do wszystkich obrazów poniżej linii zgięcia
- Uruchom test szybkości po dodaniu nowych obrazów. Jeden niezoptymalizowany obraz może zniweczyć wszystkie inne poprawki szybkości na podstronie
Na bieżąco
- Sprawdzaj nowe obrazy przed każdym wgraniem. Niezoptymalizowane obrazy łatwo prześlizgują się przy pracy w pośpiechu
- Uruchom test szybkości po opublikowaniu każdej większej partii nowych obrazów
- Przejrzyj starsze obrazy, jeśli strona powstała przed obecnymi praktykami optymalizacji. Stare biblioteki obrazów to częste i pomijane źródło problemów z szybkością
Przewodnik po testowaniu wydajności całej strony znajdziesz w artykule o tym, jak przetestować szybkość strony.
Jak WEMASY obsługuje optymalizację obrazów
Kreator stron WEMASY automatycznie kompresuje i konwertuje obrazy przy wgrywaniu. Obrazy są serwowane w formacie WebP tam, gdzie przeglądarka to obsługuje, z formatami zapasowymi dla starszych urządzeń. Przy wgraniu generowanych jest wiele rozmiarów, więc odwiedzający na telefonie dostają pliki o odpowiednim rozmiarze bez ręcznej konfiguracji.
Lazy loading jest domyślnie stosowany do obrazów poniżej linii zgięcia na wszystkich podstronach zbudowanych w WEMASY. Tekst alternatywny możesz dodać w edytorze obrazów na platformie. Wyniki szybkości podstron, w tym LCP, są widoczne w panelu analityki WEMASY, a problemy związane z obrazami są oznaczane dla każdej podstrony razem z konkretnymi zaleceniami.
Zobacz, co jest w zestawie, w kreatorze stron WEMASY, albo sprawdź opcje planów na stronie z cennikiem.
Najczęściej zadawane pytania
Czym jest optymalizacja obrazów pod internet?
Optymalizacja obrazów pod internet to proces zmniejszania rozmiaru pliku obrazu przy zachowaniu akceptowalnej jakości wizualnej na ekranie. Obejmuje wybór właściwego formatu pliku, skompresowanie obrazu do odpowiedniego poziomu jakości, zmianę rozmiaru do rzeczywistych wymiarów wyświetlania oraz stosowanie technik takich jak lazy loading i obrazy responsywne, tak by odwiedzający pobierali tylko tę wersję pliku, której potrzebuje ich urządzenie i połączenie. W kreatorze stron WEMASY ustawisz to bezpośrednio na swojej stronie.
Jaki jest najlepszy format obrazu na stronę?
WebP to najlepszy format dla większości obrazów w internecie. Daje znacznie lepszą kompresję niż JPEG przy porównywalnej jakości wizualnej, obsługuje przezroczystość jak PNG i jest obsługiwany przez wszystkie główne przeglądarki. Dla obrazów wymagających przezroczystego tła i dokładności co do piksela właściwym wyborem jest PNG. AVIF daje jeszcze lepszą kompresję niż WebP, ale ma bardziej ograniczoną obsługę w przeglądarkach i działa najlepiej z automatycznym formatem zapasowym.
O ile kompresja obrazów może zmniejszyć rozmiar pliku?
Kompresja stratna przy jakości od 75 do 85 zwykle zmniejsza rozmiar JPEG o 60 do 80 procent, bez widocznej różnicy jakości w większości fotografii. Konwersja z JPEG na WebP przy tej samej jakości zmniejsza rozmiar pliku o kolejne 25 do 35 procent. Zdjęcie, które zaczyna się od 4 MB, można często zmniejszyć do poniżej 150 KB dzięki połączeniu właściwej zmiany rozmiaru, konwersji formatu i ustawień kompresji.
Czy optymalizacja obrazów wpływa na SEO?
Tak. Niezoptymalizowane obrazy to jedna z najczęstszych przyczyn słabego wyniku Largest Contentful Paint, który jest Core Web Vital używanym przez wyszukiwarki jako sygnał rankingowy. Podstrony z dużymi, niezkompresowanymi obrazami często mają słabe wyniki LCP w porównaniu z podstronami, które mają tę samą treść w zoptymalizowanej formie. Dodatkowo opisowy tekst alternatywny przy obrazach przyczynia się do widoczności w wyszukiwarce grafiki i ogólnej dostępności podstrony.
Czy używać lazy loadingu do wszystkich obrazów?
Nie. Lazy loading należy stosować tylko do obrazów poniżej linii zgięcia, czyli treści niewidocznej po pierwszym otwarciu podstrony. Obrazy above the fold, w tym zdjęcie główne lub każdy wyróżniający się obraz blisko góry podstrony, powinny ładować się od razu. Stosowanie lazy loadingu do obrazów above the fold opóźnia LCP, co pogarsza wyniki Core Web Vitals i doświadczenie odwiedzających.
Jak duże powinny być obrazy na stronie?
Typowy obraz internetowy powinien mieć poniżej 200 KB. Zdjęcia główne i obrazy na pełną szerokość na komputerze mogą mieć do 400 KB bez znaczącego wpływu na czas ładowania, pod warunkiem że są w formacie WebP i odpowiednio skompresowane. Obrazy używane w kartach, miniaturach i mniejszych kontenerach powinny mieć rozmiar dopasowany do rzeczywistej szerokości wyświetlania. Serwowanie obrazu 1920 pikseli w kontenerze 400 pikseli marnuje transfer każdego odwiedzającego na każdym urządzeniu.