Spis treści

    Obrazy są ważną częścią każdej strony internetowej. Odgrywają dużą rolę w tym, jak użytkownicy odbierają Twoją witrynę. Mogą też wpływać na ranking SEO.

    Które formaty obrazów są więc najlepsze dla SEO? Jest to pytanie, z którym zmaga się wielu właścicieli witryn. Do rozważenia jest tutaj wiele czynników. W tym artykule poznamy nowe formaty obrazów, które mogą być obecnie wykorzystywane i sprawdzimy w jaki sposób mogą one pomóc poprawić Core Web Vitals Twojej strony. Pośrednio więc także zwiększyć skuteczność pozycjonowania strony.

    nowoczesne formaty obrazow dla seo

    Czynniki Core Web Vitals są jednymi z ważniejszych czynników rankingowych używanych przez Google, a elementami, które się do nich przyczyniają są rozmiary i formaty Twoich obrazów.

    W tym artykule omówimy wybrane z nowszych formatów obrazów, które mogą pomóc w poprawieniu wyników Twojej witryny pod względem wyniku Core Web Vitals. Te nowe formaty to MozJPEG, JPEG XL, WebP i AVIF.

    Który więc format powinieneś wybrać? Dowiedzmy się!

    Search Engine Optimization

    Search Engine Optimization, czyli w skrócie “SEO”, to proces poprawy widoczności i pozycji strony internetowej na stronach wyników wyszukiwania (SERP). Osiąga się to poprzez optymalizację strony internetowej pod kątem pewnych kluczowych czynników (on-site) i działań off-site (m.in. związanym z pozyskiwaniem linków). Jednym z czynników należących do grupy on-site są obrazy.

    Formaty obrazków na stronach

    Powiedzieliśmy już czym jest pozycjonowanie stron internetowych (w uproszczeniu SEO), a także dlaczego optymalizacja obrazów ma znaczenie. Pod pojęciem optymalizacji możemy mówić m.in. o formacie, rozmiarze czy sposobie ładowania grafik. W tym artykule skupimy się na pierwszym z nich.

    Obrazek JPEG

    Format obrazu JPEG został stworzony w 1992 roku i charakteryzuje się zdolnością do zmniejszenia rozmiaru plików przy jednoczesnym zachowaniu wysokiego poziomu jakości. Jest on dziś wciąż powszechnie stosowany, ponieważ oferował dobrą równowagę między rozmiarem pliku a jakością obrazu.

    Jednak format JPEG nie jest tak wydajny jak niektóre z nowszych dostępnych formatów, więc jest to nie zawsze jest to najlepszy wybór dla SEO. Obrazy JPG mogą być dość duże, co może negatywnie wpłynąć na czas ładowania strony.

    MozJPEG

    Według Mozilli, WebP i JPEG XR nie stanowiły znaczącego skoku w stosunku do dobrze zoptymalizowanego JPEG. Jedynie HEVC (H.265) okazał się w badaniu znacząco lepszy, ale jest to format opatentowany, który ze względu na swój status nie może być swobodnie wykorzystywany.

    W odpowiedzi na to Mozilla stworzyła w 2014 roku bibliotekę MozJPEG jako ulepszona wersję formatu obrazu JPEG. Oferuje ona lepszą kompresję i wyższą jakość niż format JPEG, co czyni go ciekawym wyborem dla SEO. Jest przy tym w pełni kompatybilny ze standardem JPEG i prawie wszystkimi dekoderami JPEG.

    Biblioteka MozJPEG nie była szeroko wykorzystywana aż do czasu wprowadzenia wersji 3, która w znaczący sposób poprawiła kilka niedoskonałości poprzednika (m.in. poprawa jakości obrazu, szersza kompatybilność). Po szczegóły odsyłam tutaj.

    JPEG XL

    Format obrazu JPEG XL został wprowadzony w 2021 roku jako ulepszona wersja formatu obrazu JPEG. Oferuje on lepszą kompresję, wyższą jakość i szybsze dekodowanie niż format JPEG. Nie jest jednak jeszcze powszechnie obsługiwany przez przeglądarki i urządzenia. Według portalu CanIUse formatu JPEG XL nie wspiera domyślnie żadna z przeglądarek internetowych.

    Pomimo tego JPEG XL jest bardzo interesującym formatem z doskonałym czasem dekodowania i jakością. Jego bolączką jest powszechność.

    AVIF

    AVIF (Audio Video Interleaved Format) to nowy format obrazów, który został stworzony przez Alliance for Open Media w 2019 roku. Oferuje on lepszą jakość i szybsze dekodowanie niż format JPEG. Nie jest jednak jeszcze powszechnie obsługiwany przez przeglądarki i urządzenia. Według portalu CanIUse AVIF poprawie format ten może wyświetlić  71.62% użytkowników internetu.

    Obsługa formatu AVIF w systemie Windows wymaga zainstalowania bezpłatnego kodeka AV1 Video Extension i Rozszerzenia obrazów HEIF (obie rzeczy są dostępne w Microsoft Store).

    WebP

    WebP, czyli WebP Image Format, to nowy format obrazów opracowany przez Google w 2010 roku. Oferuje on lepszą jakość i szybsze dekodowanie niż format JPEG. Nie jest to JPEG XL, ale jego zaletą jest to, że jest już powszechnie obsługiwany przez przeglądarki i urządzenia. Według portalu CanIUse WebP poprawie format ten może wyświetlić prawie 97% użytkowników.

    To przy bardzo dobrej kompresji i całkiem dobrej jakości. Ustępuje on jednak jakością m.in. JPEG XL.

    Rozmiar obrazków w zależności od formatu

    Czas na testy rozmiaru obrazków. Test nie jest doskonały, ale pokazuje pewne zależności. W celu przyspieszenia procesu w każdym wypadku kompresja była skonfigurowana na 80% (tam gdzie było to możliwe).

    Kompresji zostało poddane zdjęcie o rozmiarze 1661 x 1661 w formacie JPEG. Początkowy rozmiar obrazka wynosił 1,30 MB.

    Oto wyniki kompresji w zależności od formatu (zachęcam, żeby przeczytać uwagi pod spodem):

    • WebP 81,8 KB
    • MozJPEG 124 KB
    • JPEG 154 KB
    • JXL 110 KB
    • AVIF 57 KB
    • JP2 2,27 MB

    Powyższy ranking celowo ułożyłem w innej kolejności. WebP był poza najlepszą kompresją formatem, który od razu działał na start. Nie było konieczności instalowania czegokolwiek. Dużym atutem jest też istnienie gotowych wtyczek do automatycznej konwersji wgrywanych obrazków.

    Drugie miejsce zajął MozJPEG – akceptowalny rozmiar i powszechność 100%. Niestety minusem jest konieczność ręcznej kompresji. Korzystałem tutaj z biblioteki w wersji 4.0.3. Dla wygody użyłem MozJPEG.GUI.

    Nr 3 bez większych komentarzy – standardowy JPEG.

    Miejsce czwarte zajął JPEG XL (JXL). Najlepsza jakość i mała powszechność. Raczej jako format uzupełniający. Niemniej jednak najbardziej perspektywiczny. Wybierając JPEG XL przeczytaj jak używać kilku formatów jednocześnie. Np. możemy użyć znacznika picture z kolejnymi elementami src i img.

    AVIF dostarczył najwięcej problemów. Wymagał doinstalowania dodatkowych narzędzi. Programy do przeglądania zdjęć wyświetlały czerwony pasek na zdjęciach w formacie AVIF. W przeglądarce było natomiast okej. Konwersji do AVIF musiałem dokonać online.

    Test jakości obrazka po kompresji

    Idealnie było zrobić jeszcze test przyjmując stały rozmiar obrazka wynikowego. Taki jak tutaj. Zatem do dzieła. Z uwagi na to, że w narzędziu najczęściej (poza formatem JPEG) można ustawić jedynie stopień kompresji, nie zaś rozmiar wynikowy ograniczę się tutaj to kilku najlepszych formatów: WebP, MozJPEG, JPEG, JXL oraz AVIF.

    Analizowana będzie grafika z tłem wypełnionym wielokolorowym gradientem oraz tekstem. Startowa grafika ma 740 KB i rozmiar 1697 x 727 pikseli. W wyniku chcę uzyskać plik o wielkości 30 KB.

    • JXL: bardzo dobra czytelność tekstu i jakość obrazka
    • AVIF: bardzo dobra czytelność tekstu i jakość obrazka; nieznacznie inne kolory
    • WebP: bardzo dobra czytelność tekstu i jakość obrazka, drobne problemy z płynnością gradientu, obserwowalne problemy na rogach prostokąta
    • MozJPEG: dobra czytelność tekstu, problemy z płynnością gradientu, problemy na rogach prostokąta
    • JPEG: przeciętna czytelność, gradient traci płynność, widoczne paski, duże problemy na rogach prostokąta

    W tym starciu zwyciężył WebP. Formaty JXL i AVIF charakteryzowały się najlepszą jakością, ale co z tego, gdy nie są szeroko wspierane.

    Jaki format obrazu wybrać?

    Webp jest obecnie najlepszym formatem obrazu dla strony internetowej, ponieważ oferuje dobrą kompresję i jest szeroko obsługiwany. Oznacza to, że użytkownik zobaczy poprawny obrazek, co jest dobrym kompromisem pomiędzy szybkością wczytywania strony, jakością obrazu i dostępnością.

    Jeśli obrazki są kluczową częścią serwisu, to dodatkowo warto rozważyć wprowadzenie formatów JXL lub AVIF przy użyciu metody opisanej w pomocy Google’a (Centrum wyszukiwarki Google).

    Jeśli rozmawiamy o najlepszym formacie do zdjęć pod kątem pozycjonowania stron internetowych, to nie sposób byłoby nie wziąć pod uwagę oficjalnego stanowiska Google.

    Grafika Google obsługuje obrazy w tych formatach: BMP, GIF, JPEG, PNG, WebP i SVG.

    https://developers.google.com/search/docs/appearance/google-images?hl=pl

    Kolejna rzecz, która przemawia na rzecz formatów WebP i JPEG.

    Optymalizacja obrazków na www

    Obrazy są ważną częścią Twojej strony internetowej i powinny być zoptymalizowane dla najlepszego doświadczenia użytkownika. Istnieje wiele różnych formatów obrazów do wyboru, z których każdy ma swoje zalety.

    Użyj formatu, który zapewni najlepsze wyniki dla Twoich użytkowników i pomoże poprawić Twoje Core Web Vitals.

    Chcesz dowiedzieć się więcej? Skontaktuj się z nami już dziś! Możemy pomóc Ci w optymalizacji zdjęć i poprawić ranking Twojej strony w wyszukiwarkach. Zachęcamy też do kompleksowej usługi pozycjonowania twojej strony internetowej. Do usłyszenia!

    Porozmawiajmy!

    Piotr Starzyński
    Piotr Starzyński

    Witam serdecznie! Mam na imię Piotr Starzyński i miło mi Cię spotkać w branży pozycjonowania. W SEO pracuję oficjalnie od 2006 roku, zaś analityką zajmuję się od kilku lat. Mam na koncie około 400 wdrożeń analityki dla stron klientów, setki projektów SEO oraz kilkadziesiąt projektów analityki dla aplikacji mobilnych. W Up&More odpowiadam za pracę zespołu Search Engine Optimization oraz Analityki internetowej. Jeśli masz ochotę współpracować ze mną, zapraszam Cię do kontaktu!