Nowoczesne formaty obrazów pomocne w SEO

Optymalizacja obrazów jest kluczowym elementem SEO, wpływającym na szybkość ładowania strony i ranking w wyszukiwarkach. Nowoczesne formaty obrazów, takie jak WebP, AVIF i JPEG XL, oferują lepszą kompresję i jakość niż tradycyjny JPEG.

WebP, obsługiwany przez 97% przeglądarek, jest obecnie najlepszym kompromisem między jakością, rozmiarem pliku i kompatybilnością. AVIF zapewnia najlepszą kompresję, redukując 1,30 MB obraz do zaledwie 57 KB, ale jest wspierany przez 71,62% przeglądarek. JPEG XL oferuje doskonałą jakość, ale nie jest jeszcze powszechnie obsługiwany. Google Images oficjalnie wspiera formaty BMP, GIF, JPEG, PNG, WebP i SVG.

Wybór odpowiedniego formatu obrazu może znacząco poprawić Core Web Vitals, co bezpośrednio wpływa na SEO i pozycję strony w wynikach wyszukiwania. Ekspercki audyt SEO może pomóc w identyfikacji obszarów do optymalizacji, w tym w doborze najlepszych formatów obrazów dla Twojej strony.

Co to jest Search Engine Optimization i dlaczego optymalizacja obrazów jest ważna?

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. Optymalizacja obrazów jest istotna, ponieważ wpływa na szybkość ładowania strony, co jest jednym z czynników rankingowych Google. Według badań przeprowadzonych przez Moz, strony z szybszym czasem ładowania mają tendencję do osiągania wyższych pozycji w wynikach wyszukiwania.

Jakie są najpopularniejsze formaty obrazów używane w SEO?

Najpopularniejsze formaty obrazów w kontekście SEO to:

1. JPEG: Format stworzony w 1992 roku, oferujący dobry kompromis między jakością a rozmiarem pliku.
2. PNG: Idealny dla grafik z przezroczystością.
3. GIF: Używany głównie dla prostych animacji.
4. SVG: Skalowalny format wektorowy, idealny dla logo i ikon.
5. WebP: Nowszy format opracowany przez Google w 2010 roku, oferujący lepszą kompresję niż JPEG.

1. 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.

2. 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.

3. 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ść.

4. 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).

5. 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.

Jak różne formaty obrazów wpływają na rozmiar pliku?

Czas na testy rozmiaru obrazków (jak duże były pliki obrazów po zmianie formatu). 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 pliku obrazu (zachęcam, żeby przeczytać uwagi pod spodem):

1. WebP: 81,8 KB
2. MozJPEG: 124 KB
3. JPEG: 154 KB
4. JXL: 110 KB
5. AVIF: 57 KB
6. JP2: 2,27 MB

Powyższy ranking celowo ułożyłem w innej kolejności. Obraz WebP był najmniejszy i najbardziej kompatybilny (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.

Jakie były wyniki testu 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.

Który format obrazu jest najlepszy dla SEO?

WebP jest obecnie najlepszym kompromisem między jakością, kompresją i wsparciem przeglądarek. Według danych z Can I Use, WebP jest obsługiwany przez prawie 97% użytkowników internetu. Dla stron, gdzie obrazy są kluczowe, warto rozważyć dodatkowe użycie formatów JXL lub AVIF.

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.

Jakie nowe formaty obrazów mogą poprawić SEO?

Nowe formaty obrazów, które mogą znacząco poprawić SEO, to:

1. MozJPEG: Ulepszona wersja JPEG stworzona przez Mozillę w 2014 roku.
2. JPEG XL: Wprowadzony w 2021 roku, oferuje lepszą kompresję i jakość niż standardowy JPEG.
3. AVIF: Stworzony przez Alliance for Open Media w 2019 roku, zapewnia wysoką jakość przy małych rozmiarach plików.
4. WebP: Choć nie jest najnowszy, wciąż jest uważany za nowoczesny format z szerokim wsparciem przeglądarek.

Jakie formaty obrazów wspierają przeglądarki internetowe?

Wsparcie przeglądarek jest kluczowe dla efektywności SEO. Według Can I Use:

1. JPEG (JPG): 100% wsparcia
2. PNG: 100% wsparcia
3. GIF: 100% wsparcia
4. SVG: 98.5% wsparcia
5. WebP: 97% wsparcia
6. AVIF: 71.62% wsparcia
7. JPEG XL: Brak domyślnego wsparcia w przeglądarkach

Jakie są oficjalne rekomendacje Google dotyczące formatów obrazów?

Google Obrazy (Google Images) oficjalnie obsługuje następujące formaty:

• BMP
• GIF
• JPEG
• PNG
• WebP
• SVG

Ta informacja potwierdza, że WebP i JPEG są bezpiecznymi wyborami dla SEO.

Jak zoptymalizować obrazy na stronie internetowej?

Aby zoptymalizować obrazy na swojej stronie www zastosuj się do 6 wskazówek poniżej:

1. Wybierz odpowiedni format (WebP jako podstawowy wybór).
2. Kompresuj obrazy przed przesłaniem na serwer.
3. Używaj responsywnych obrazów.
4. Implementuj lazy loading dla obrazów poza widokiem.
5. Dodawaj alternatywny tekst (alt text) do obrazów.
6. Używaj opisowych nazw plików.

Optymalizacja obrazów jest kluczowa dla poprawy Core Web Vitals, co bezpośrednio wpływa na SEO. Wybór odpowiedniego formatu, takiego jak WebP, może znacząco poprawić wydajność strony i jej pozycję w wynikach wyszukiwania.

Audyt SEO a optymalizacja obrazów

Holistyczny audyt SEO to kluczowy element w procesie optymalizacji strony internetowej, w tym optymalizacji obrazów. Nasz zespół ekspertów SEO wykonuje drobiazgową analizę Twojej witryny, identyfikując obszary wymagające poprawy, w tym formaty i rozmiary używanych obrazów.

W ramach audytu SEO sprawdzamy aktualne formaty obrazów i możliwości ich optymalizacji, rozmiary plików i potencjał kompresji, implementację atrybutów alt i tytułów obrazów, wykorzystanie responsywnych obrazów, wdrożenie lazy loading dla obrazów oraz wpływ obrazów na Core Web Vitals. Na podstawie wyników audytu, przygotowujemy spersonalizowane rekomendacje dotyczące optymalizacji obrazów, które mogą znacząco poprawić wydajność Twojej strony i jej pozycję w wynikach wyszukiwania.

Skontaktuj się z nami, aby dowiedzieć się, jak nasz audyt SEO może pomóc w optymalizacji obrazów i ogólnej poprawie widoczności Twojej strony w wyszukiwarkach.