Czym jest format WebP?
Format WebP to sposób zapisywania obrazów opracowany specjalnie z myślą o internecie. Pozwala przechowywać zdjęcia, grafiki z przezroczystym tłem, a nawet proste animacje, zwykle w plikach lżejszych niż odpowiadające im obrazy JPG, PNG lub GIF. Dzięki temu przeglądarka ma mniej danych do pobrania, strona szybciej pokazuje zdjęcia, a użytkownik krócej czeka na wyświetlenie całej zawartości. WebP jest więc ceniony nie tylko przez SEO-wców, lecz także przez web developerów, projektantów UX i administratorów stron. W tym poradniku wyjaśniamy, co to jest format WebP, gdzie się go używa oraz dlaczego nie wystarczy zamienić końcówki pliku, aby strona nagle zaczęła działać szybciej.
- Format WebP – co to jest?
- Dlaczego WebP jest używany na stronach?
- Jak prawidłowo używać obrazów WebP?
WebP łączy kilka możliwości w jednym formacie. Może przechowywać fotografie z kompresją stratną, grafiki bezstratne, przezroczyste tło oraz animacje. Nie oznacza to jednak, że jeden poziom kompresji będzie odpowiedni dla każdego rodzaju obrazu.
Format WebP – co to jest i gdzie się go używa?
WebP to format obrazu przeznaczony przede wszystkim do publikacji w sieci. Został opracowany przez Google jako lżejsza alternatywa dla popularnych plików JPG i PNG.
Rozpoznasz go po rozszerzeniu .webp, na przykład zdjecie-produktu.webp.
Format obsługuje dwa główne rodzaje kompresji.
- Kompresja stratna zmniejsza plik przez usunięcie części informacji, których człowiek zwykle nie zauważa podczas oglądania obrazu. Sprawdza się przede wszystkim w fotografiach, banerach i dużych ilustracjach.
- Kompresja bezstratna zachowuje dane obrazu, dlatego lepiej pasuje do logo, ikon, zrzutów ekranu oraz grafik zawierających tekst i ostre krawędzie.
WebP potrafi również przechowywać przezroczystość. Może więc zastąpić PNG w grafikach pozbawionych tła, choć przed publikacją warto porównać jakość i wagę obu plików. W przypadku niewielkiego logo różnica będzie symboliczna. Przy setkach zdjęć produktów oszczędność robi się już wyraźna.
Najczęściej spotkasz WebP w:
- zdjęciach produktów w sklepach internetowych,
- miniaturach artykułów i wpisów blogowych,
- banerach, ilustracjach i zdjęciach w tle,
- logo, ikonach oraz grafikach z przezroczystością.
WebP nie jest natomiast formatem przygotowanym do profesjonalnego druku ani przechowywania plików źródłowych do dalszej obróbki. Fotograf lub grafik powinien zachować oryginał w odpowiednim formacie, a wersję WebP traktować jako kopię przygotowaną do wyświetlania na stronie.
Dlaczego SEO, UX i web developerzy lubią format WebP?
Przeglądarka musi pobrać każdy obraz znajdujący się na stronie. Jeżeli pojedyncze zdjęcie waży 1 MB, a podstrona zawiera ich dziesięć, użytkownik może pobrać kilka lub kilkanaście megabajtów danych, zanim zobaczy całą zawartość. Na szybkim łączu problem bywa trudny do zauważenia. Na telefonie, słabszym Wi-Fi albo przeciążonej sieci różnica staje się odczuwalna.
Lżejszy obraz WebP skraca czas pobierania pliku i ogranicza zużycie transferu. To właśnie dlatego format ten interesuje specjalistów od UX. Użytkownik szybciej widzi zdjęcie produktu, baner lub ilustrację otwierającą artykuł. Nie musi patrzeć na puste miejsce ani czekać, aż strona zakończy wczytywanie ciężkich plików.
Dla SEO znaczenie jest pośrednie. Google nie premiuje strony tylko dlatego, że zdjęcia mają końcówkę .webp. Liczy się rezultat: sprawniejsze ładowanie, dobra wydajność na urządzeniach mobilnych i brak obrazów ważących po kilka megabajtów. Więcej zależności pomiędzy serwerem, plikami i czasem odpowiedzi opisaliśmy w poradniku wyjaśniającym, jak prędkość ładowania wpływa na stronę internetową.
Web developer patrzy na format jeszcze inaczej. Lżejsze zasoby to mniejsze obciążenie transferu, pamięci podręcznej i infrastruktury obsługującej witrynę. Przy niewielkim blogu będą to drobne oszczędności. W sklepie posiadającym tysiące zdjęć produktów każdy niepotrzebny kilobajt jest przesyłany wielokrotnie.
WebP nie zastępuje pełnej optymalizacji obrazów. Grafika zapisana w tym formacie nadal może być zbyt duża, mieć niepotrzebnie wysoką rozdzielczość albo zostać skompresowana tak mocno, że na zdjęciu pojawią się rozmycia i artefakty.
Jak prawidłowo używać obrazów WebP?
Najpierw dopasuj wymiary grafiki do miejsca, w którym będzie wyświetlana. Jeżeli kontener na stronie ma szerokość 800 pikseli, zwykle nie ma sensu przesyłać do niego zdjęcia o szerokości 5000 pikseli i pozostawiać zmniejszania przeglądarce. Plik nadal trzeba pobrać w pełnym rozmiarze.
Dopiero później wybierz format i poziom kompresji. Fotografia nie musi wyglądać identycznie po powiększeniu do 400%, aby dobrze prezentowała się w artykule. Z drugiej strony logo, tekst umieszczony na grafice oraz drobne elementy interfejsu szybko ujawniają zbyt agresywne ustawienia.
Warto trzymać się prostej kolejności:
- przytnij obraz i ustaw potrzebne wymiary,
- usuń zbędne dane oraz skompresuj plik,
- zapisz wersję WebP i porównaj ją z oryginałem,
- sprawdź wygląd strony na komputerze i telefonie.
Na stronie WordPress obrazy WebP można przesyłać bezpośrednio do biblioteki mediów. Konwersję istniejących plików da się również zautomatyzować za pomocą wtyczki, mechanizmu dostępnego na serwerze albo usługi CDN. Automatyzacja jest wygodna, lecz trzeba sprawdzić, czy system zachowuje oryginały, nie powiela bez potrzeby wielu wersji pliku i rzeczywiście dostarcza użytkownikowi lżejszy obraz.
Przy dodawaniu grafik pomocny będzie również poradnik pokazujący, jak poprawnie dodawać obrazy w WordPressie.
Nie zapominaj o opisie. Nazwa pliku oraz atrybut ALT obrazka powinny wyjaśniać, co przedstawia grafika. Samo zapisanie zdjęcia jako WebP nie dostarcza wyszukiwarce informacji o jego zawartości i nie poprawia dostępności strony dla osób korzystających z czytników ekranu.
Tworzysz nową stronę lub chcesz przyspieszyć działający serwis? Zarejestruj własną domenę, wybierz szybki hosting dla WordPressa albo skorzystaj z bezpłatnej migracji strony do SEOHOST.pl. Lekkie obrazy pomagają, ale dopiero połączenie ich z wydajnym serwerem, pamięcią podręczną i prawidłową konfiguracją daje odczuwalny efekt.