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.

Z tego artykułu dowiesz się:

• czym są formaty nowej generacji?
• dlaczego warto stosować obrazy w formatach nowej generacji na stronach www?
• jak wdrożyć formaty nowej generacji na stronie opartej na WordPress?

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

Zakup strony internetowej – krok po kroku

Kategorie: Strony internetowe

Jeśli planujesz założyć stronę internetową to z tego filmu dowiesz się czego możesz się spodziewać w trakcie współpracy z...

Czytaj więcej ArtykułWideo

Consent Mode, czyli tryb uzyskiwania zgody – jak informować o plikach cookies?

Kategorie: Strony internetowe

Zbieranie danych o użytkownikach strony internetowej czy sklepu internetowego znacznie ułatwia procesy marketingowe – im więcej wiemy o potencjalnym...

Czytaj więcej ArtykułWideo

Instrukcja Google Analytics 3 (podstawy)

Kategorie: Strony internetowe E-commerce Przydatne narzędzia

Ten film i artykuł dotyczy starej wersji Google Analytics 3 (Universal Analytics). Zapraszam do obejrzenia instrukcji Google Analytics 4...

Czytaj więcej ArtykułWideo

Stan witryny w WordPress – dlaczego warto tu zaglądać?

Kategorie: Strony internetowe

Jeśli korzystasz z WordPressa i posiadasz wersję minimum 5.2, w Twoim panelu administracyjnym znajdziesz ekran Stan witryny. W tym...

Czytaj więcej WideoArtykuł

Menu na stronie internetowej – przegląd popularnych rozwiązań

Kategorie: Strony internetowe

Nawigacja na stronach internetowych ewoluuje wraz z rozwojem technologii. Kilkanaście lat temu 99% stron internetowych składało się z kolumny...

Czytaj więcej Artykuł