Czym są obrazy w formatach nowej generacji i dlaczego warto je stosować?

W ostatnich latach popularność w temacie optymalizacji stron internetowych zyskują obrazy w formatach nowej generacji. W tym artykule wyjaśniam czym są te formaty, dlaczego warto je stosować i jak wdrożyć taką optymalizację obrazów na stronie internetowej opartej na platformie WordPress. Zapraszam do lektury.

Czym są formaty nowej generacji?

Standardowe obrazy, jakie znamy, mają zwykle rozszerzenie typu JPG, PNG, czy BMP. Formaty nowej generacji mają z kolei rozszerzenia np. AVIF lub WebP. Mówiąc w skrócie – tego typu formaty obrazów mają lepsze parametry kompresji i jakości i są zalecane do stosowania na stronach internetowych.

Obrazy w formacie WebP

Format WebP został opracowany przez firmę On2 Technologies (został zaprezentowany w 2010 roku), która została wykupiona przez Google, a sam format od czasu wykupu jest rozwijany właśnie przez giganta z Mountain View. Pierwszą przeglądarką obsługującą ten format był Chrome, zaś obecnie obsługuje go każda nowoczesna przeglądarka. Co ciekawe, cytując Wikipedię, „Rozmiar obrazów PNG przy kompresji bezstratnej WebP zmniejsza się o 26%. Przy kompresji stratnej obrazów JPG rozmiar zmniejsza się zależnie od jakości takiej kompresji. Przy zachowaniu jakości na poziomie 80% WebP rozmiar obrazów JPG zmniejsza się nawet o 85%”.

Obrazy w formacie AVIF

Format AVIF został opracowany przez Alliance for Open Media (AOMedia) – organizację non-profit skupiającą się na rozwoju otwartego oprogramowania. W porównaniu do WebP to dość świeży projekt, bo opracowany w 2019 roku. Podobnie jak w WebP, format AVIF zapewnia lepszą kompresję plików graficznych. Wsparcie przeglądarek dla AVIF wygląda nieco gorzej (na moment pisania tego artykułu):

Dlaczego należy stosować formaty nowej generacji na stronach internetowych?

Obrazy w formatach nowej generacji są lżejsze i lepiej zoptymalizowane. Pozwalają na szybsze wczytywanie strony internetowej, co jest jednym z kluczowych parametrów w takich działaniach jak pozycjonowanie stron, czy poprawa wyniku jakości kampanii Google Ads. Jeśli zweryfikujesz wydajność swojej strony internetowej w narzędziu typu PageSpeed Insights, prawdopodobnie natrafisz na taki komunikat:

W tym momencie warto zainteresować się wdrożeniem formatów nowej generacji na swojej stronie internetowej. Prawdopodobnie wykonanie tego działania poprawi nieco Twoje pozycje w wyszukiwarce Google, być może sprawi że obniży się średni koszt kliknięcia w reklamy Google Ads, a z pewnością pozytywnie wpłynie na UX strony (doświadczenie użytkownika z korzystania z niej).

Jak wdrożyć formaty nowej generacji na WordPressie?

Na szczęście wdrożenie formatów nowej generacji w przypadku platformy WordPress nie jest skomplikowane i przy odrobinie wysiłku możesz zrobić to nawet samodzielnie. Jeśli jednak nie czujesz się na siłach lub obawiasz się zepsucia strony, skontaktuj się ze mną, a pomogę Ci to wdrożyć.

• Wykonaj kopię zapasową serwisu i bazy danych
• Przejdź do panelu administracyjnego WordPress do zakładki Wtyczki
• Upewnij się że nie masz już zainstalowanej wtyczki do obsługi formatów nowej generacji – być może już ją masz, ale nie została skonfigurowana
• Jeśli nie znalazłeś w swoim panelu zainstalowanej już wtyczki, kliknij przycisk Dodaj nową w górnej części panelu
• W wyszukiwarce wtyczek wpisz np. frazę „webp”
• Sprawdź jakie są aktualnie polecane wtyczki, zainstaluj i włącz jedną z nich. Do celów instruktażowych wykorzystam wtyczkę o nazwie „Converter for Media – Optimize images | Convert WebP & AVIF”.
• Po instalacji wtyczki przejdź do jej ustawień (Ustawienia / Converter for media) – uwaga, inne wtyczki niż omawiana mogą mieć ustawienia w innym miejscu panelu
• Wybierz strategię formatowania (np. Optymalną) oraz rodzaj pliku wyjściowego (np. WebP), po czym zapisz zmiany guzikiem poniżej
• Uruchom masową optymalizację obrazów w całej bibliotece mediów
• Po pozytywnej optymalizacji sprawdź czy obrazy na Twojej stronie wyświetlają się poprawnie (najlepiej w trybie incognito)

To już wszystko, co należy zrobić aby wdrożyć formaty nowej generacji na stronie WordPress. Gratulacje!

Zobacz także

Co to jest certyfikat SSL i kiedy warto go mieć?

Kategorie: Strony internetowe E-commerce Reklama w internecie Inne tematy

Certyfikat SSL na stronie internetowej – w poniższym wideo i artykule podpowiadam co to właściwie jest, czy potrzebujesz go...

Czytaj więcej ArtykułWideo

Co umieścić w sekcji above the fold strony internetowej

Kategorie: Strony internetowe

Jeśli planujesz zlecić komuś budowę strony internetowej lub zrobić ją samodzielnie, sprawdź moje wskazówki odnośnie wyglądu i treści, które powinny być zawarte...

Czytaj więcej Artykuł

Nowoczesna strona internetowa – jaka powinna być?

Kategorie: Strony internetowe

Strona internetowa to narzędzie, bez którego obecnie nie może obyć się prawdopodobnie żadna działalność komercyjna ani publiczna. Także osoby...

Czytaj więcej Artykuł

Jak poprawnie umieszczać logo na stronie internetowej?

Kategorie: Strony internetowe

Jeśli posiadasz stronę internetową lub dopiero planujesz ją założyć, koniecznie zadbaj o poprawność dodania logo firmowego w górnej części strony. Z tego...

Czytaj więcej Artykuł

Freelancer WordPress – jak mogę Ci pomóc?

Kategorie: Strony internetowe

Systemy zarządzania treścią stron internetowych (CMS) ułatwiają zarządzanie witryną i pozwalają na jej łatwe aktualizowanie. Samo stworzenie strony oraz...

Czytaj więcej ArtykułWideo