Przeciągnij obraz lub kliknij, aby wybrać
PNG, JPEG, WebP, GIF, BMP, AVIF
Jak to działa
Symbol zastępczy to coś, co zajmuje miejsce obrazu, dopóki ten się pobiera. Pełni dwie różne funkcje: rezerwuje dokładnie tyle miejsca, ile zajmie obraz, dzięki czemu otaczający tekst nie przeskakuje w chwili jego pojawienia się, oraz pokazuje coś przypominającego docelową treść, przez co oczekiwanie wydaje się krótsze niż przy szarym prostokącie.
Istnieją trzy rodziny rozwiązań. Zwięzłe skróty (BlurHash i ThumbHash) streszczają obraz w tak krótkim ciągu tekstu, że można go zapisać w kolumnie bazy danych obok reszty rekordu; przeglądarka go dekoduje i rysuje rozmycie. Data URI (miniatura LQIP i SVG) niosą już zakodowany obraz wewnątrz HTML-a lub CSS-a, więc nie potrzebują żadnego JavaScriptu. A jednolity kolor to najtańszy symbol zastępczy ze wszystkich: siedem znaków.
To, co się opłaca, zależy od tego, skąd bierze się HTML. Jeśli obrazy pochodzą z bazy danych i wypisujesz je setkami, skrót jest najlżejszy w przeliczeniu na rekord. Jeśli generujesz strony statyczne albo korzystasz z frameworka, który już obsługuje symbole zastępcze, data URI pozwala uniknąć dopisywania kodu dekodującego. Wszystkie wartości, które tu widzisz, są obliczane w Twojej przeglądarce: obraz nie trafia na żaden serwer.
Przykłady
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjDługość BlurHasha zależy wyłącznie od liczby składowych, a nie od rozmiaru ani zawartości obrazu: przy 4 × 3 to zawsze 28 znaków, przy 3 × 3 – 22, a przy 5 × 4 – 44.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHThumbHash zajmuje od 17 do 25 bajtów, czyli od 24 do 36 znaków w Base64. Dokładny rozmiar zależy od proporcji obrazu oraz od tego, czy ma on przezroczystość, ponieważ format koduje także kanał alfa.lqip 24 px webpdata:image/webp;base64,UklGRi…Miniatura WebP o szerokości 24 px zwykle mieści się poniżej 1 KB. Osadzona w HTML-u nie generuje dodatkowego żądania, ale powiększa dokument, który nie jest buforowany osobno.Przypadki użycia
- Zapisać BlurHash lub ThumbHash w tabeli obrazów, aby lista albo strumień z nieskończonym przewijaniem pokazywał coś od pierwszej chwili.
- Uzupełnić atrybut blurDataURL w next/image lub placeholder w NgOptimizedImage, gdy obraz nie jest statycznym importem.
- Uniknąć przesunięcia układu (CLS) w kartach produktów lub artykułów, łącząc symbol zastępczy z atrybutami width i height.
- Osadzić symbol zastępczy w statycznym HTML-u, wiadomości e-mail lub szablonie, w którym nie można uruchomić JavaScriptu dekodującego.
- Wykorzystać ten sam BlurHash w sieci i w aplikacjach mobilnych, dla których istnieją dekodery w Swift, Kotlinie i Flutterze.
- Użyć koloru średniego jako tła kontenera, gdy budżet bajtów nie pozwala nawet na miniaturę.
Najczęstsze pytania
BlurHash czy ThumbHash?
ThumbHash odwzorowuje obraz wierniej przy mniejszej liczbie bajtów, zachowuje przezroczystość i przechowuje proporcje, więc do narysowania go nie trzeba nawet znać oryginalnego rozmiaru. BlurHash jest starszy i mniej dokładny, ale ma implementacje dla znacznie większej liczby platform i języków. Jeśli zaczynasz od zera – ThumbHash; jeśli masz już dekodery BlurHash w swoim stosie, nie ma powodu do migracji.
Czy to poprawia LCP?
Nie bezpośrednio. Symbol zastępczy poprawia odczuwaną szybkość, a razem z width i height eliminuje przesunięcie układu, ale metryka LCP nadal jest mierzona w chwili, gdy właściwy obraz zostanie narysowany. Co więcej: jeśli główny obraz jest elementem LCP, nie nadawaj mu loading="lazy" ani nie odkładaj go za symbolem zastępczym; lepiej oznacz go fetchpriority="high", żeby przeglądarka pobrała go wcześniej. Symbole zastępcze są dla obrazów poza pierwszym ekranem.
Ilu składowych warto użyć w BlurHashu?
Cztery na trzy sprawdza się przy obrazach poziomych, a trzy na cztery przy pionowych. Każda dodatkowa składowa dokłada dwa znaki i odrobinę szczegółu, ale powyżej sześciu czy siedmiu różnica przestaje być widoczna gołym okiem, bo wynik i tak wyświetlany jest w rozmyciu.
Skrót czy data URI?
Skrót zajmuje kilkadziesiąt bajtów na obraz i jest idealny, gdy na jednej stronie jest ich wiele, ale wymaga kodu po stronie klienta, który go zdekoduje. Data URI nie wymaga niczego, choć waży od dziesięciu do pięćdziesięciu razy więcej i podróżuje wewnątrz HTML-a, który nie jest buforowany osobno. Przy kilku wyróżnionych obrazach lepszy jest data URI, przy długich listach – skrót.
Dlaczego używać SVG zamiast bezpośrednio miniatury?
Ponieważ rozmycie nakłada przeglądarka podczas rysowania SVG. Dzięki temu można wyjść od znacznie mniejszej miniatury bez widocznych bloków pikseli przy powiększeniu, a wynik wygląda równie gładko w każdym rozmiarze. SVG ustawia też kanał alfa na nieprzezroczysty, żeby rozmycie nie uczyniło krawędzi przezroczystymi.
Czy istnieje limit rozmiaru symbolu zastępczego?
To zależy od narzędzia. NgOptimizedImage w Angularze wypisuje ostrzeżenie w konsoli, gdy data URI symbolu zastępczego przekroczy 4000 znaków, ponieważ od tego momentu ciężar HTML-a zaczyna przeważać nad korzyścią. To dobry ogólny punkt odniesienia: jeśli Twoja miniatura przekracza tę wartość, zmniejsz szerokość lub jakość.