Format obrazu AVIF dla stron internetowych zwiększa SEO, PageSpeed i doświadczenie użytkownika.

Mniej niż 0,1 procent wszystkich stron internetowych wykorzystuje format AVIF i korzysta z najlepszej możliwości dla formatów obrazów w celu mierzalnej poprawy prędkości strony internetowej, doświadczenia użytkownika i widoczności online w Google. Wszyscy inni operatorzy stron internetowych nie wykorzystują jeszcze potencjału, jaki oferuje format AVIF dla obrazów. Ten artykuł ma na celu zaradzenie temu i zachęcenie Cię do poważnego zainteresowania się formatem AVIF oraz najlepiej także jego wykorzystania dla obrazów na stronie internetowej.

Czy kiedykolwiek testowałeś URL swojej strony internetowej w Google PageSpeed Insights, aby sprawdzić, jak wygląda Twoja wydajność? Jeśli nie, przetestuj swoją własną stronę internetową.

Zgaduje, że aktualnie Twoja strona internetowa nie wyświetla jeszcze tej wartości, prawda?

Im niższa wartość, tym więcej trzeba zoptymalizować na stronie internetowej, aby poprawić swoją prędkość strony. Jeśli rozwiniesz rekomendacje Google dotyczące poprawy prędkości strony na dolnej części strony narzędzia testowego, możesz zauważyć, że jednym z punktów są nowoczesne formaty obrazów – szczególnie wtedy, gdy nadal wykorzystujesz formaty plików JPG lub PNG dla swoich obrazów.

To jeden z powodów, dlaczego Twoja strona internetowa jeszcze nie osiągnęła najlepszych wyników testów PageSpeed Insights i prawdopodobnie też nie zdała Core Web Vitals.

Zarówno obrazy na naszej stronie firmowej 4eck-media.de, jak i tutaj na TutKit.com, są ładowane w formacie AVIF – bardzo szybko, bardzo małe przy zachowaniu wysokiej jakości. A AVIF pomaga nam osiągnąć jak najwyższą prędkość strony.

Relatywnie nowy format obrazów internetowych jest niewielu znany, dlatego nadszedł czas, aby przedstawić nowoczesny format obrazów AVIF dla stron internetowych ze wszystkimi jego zaletami dla SEO, prędkości strony i doświadczenia użytkownika.

Spis treści artykułu AVIF:

Czym jest format obrazu AVIF?

AVIF to nowy format obrazu, który został opublikowany w roku 2020 przez Alliance for Open Media (AOMedia). Format ten opiera się na algorytmie kompresji bezstratnej AV1 i oferuje szereg korzyści w porównaniu z innymi popularnymi formatami obrazów, takimi jak JPEG i PNG oraz formatem internetowym WebP.

Obrazy AVIF są znacznie mniejsze niż obrazy JPEG przy takiej samej jakości obrazu. Wynika to z faktu, że AV1 oferuje znacznie bardziej efektywną kompresję. Dlatego obraz AVIF o tej samej jakości co obraz JPEG często może być nawet o 50% mniejszy.

Obrazy AVIF oferują również większą głębię kolorów niż obrazy JPEG. Dlatego obrazy AVIF mogą przechowywać nawet do 12-bitowych głębokości kolorów, podczas gdy obrazy JPEG obsługują tylko 8-bitową głębię kolorów. To prowadzi do większego zakresu kolorów i bardziej realistycznych kolorów w obrazach AVIF.

Ponadto obrazy AVIF mogą przechowywać kanały alfa. Kanały alfa są wykorzystywane do definiowania przezroczystości obrazów. Dlatego obrazy AVIF są idealne do użycia w aplikacjach graficznych, gdzie wymagana jest przezroczystość.

AVIF to format Open Source i jest obsługiwany przez wiele programów do obróbki obrazów oraz dostawców sprzętu. Większość popularnych programów do obróbki obrazów i przeglądarek już obsługuje obrazy AVIF. Dlatego nadszedł czas, aby ten nowoczesny format obrazów zdobył popularność!

Oto kilka korzyści AVIF względem innych popularnych formatów obrazów:

• Wyższe wskaźniki kompresji: Obrazy AVIF są znacznie mniejsze niż obrazy JPEG i PNG przy takiej samej jakości obrazu.
• Większa głębia kolorów: Obrazy AVIF obsługują nawet do 12-bitowej głębokości koloru, podczas gdy obrazy JPEG i PNG obsługują tylko 8-bitową głębokość koloru.
• Obsługa kanałów alfa: Obrazy AVIF mogą przechowywać przezroczystość, zastępując tym samym powód, dlaczego obecnie są stosowane obrazy PNG lub WebP na stronach internetowych.
• Format Open Source: AVIF to format Open Source i jest obsługiwany przez wiele programów do obróbki obrazów oraz dostawców sprzętu.
• AVIF to przekonujący format obrazów dla stron internetowych, który oferuje wiele zalet w porównaniu z innymi popularnymi formatami (w tym WEBP).

Można przewidzieć, że AVIF zacznie odgrywać coraz większą rolę w przechowywaniu i wyświetlaniu obrazów na stronach internetowych w przyszłości – szczególnie dlatego, że Google umieścił jego wykorzystanie bezpośrednio w rekomendacjach wyników PageSpeed Insights, a obecnie wszystkie popularne przeglądarki w nowszych wersjach obsługują AVIF.

Dlatego warto pospieszyć się z jego wdrożeniem na swojej stronie internetowej, aby już teraz korzystać z zalet dla SEO, prędkości strony i doświadczenia użytkownika.

Dlaczego AVIF przynosi korzyści dla SEO, prędkości strony i doświadczenia użytkownika?

Największa zaleta staje się najbardziej widoczna, gdy porównujemy obrazy w widoku. Na przykład wygenerowałem obraz z Midjourney przedstawiający stado klonów o rozdzielczości 1024x1024 w formacie PNG.

• Original-PNG: 1,43 MB
• Zoptymalizowany przez TinyPNG: 393 KB - zaoszczędzono 73 %

Oryginalny plik PNG został przekonwertowany za pomocą squoosh.app, a oto wynik:

• Zoptymalizowany przez Squoosh jako WebP: 84 kb - zaoszczędzono 94 procent
• Zoptymalizowany przez Squoosh jako AVIF: 42 kb - zaoszczędzono 97 procent

W rezultacie obraz AVIF, przy identycznej jakości wizualnej, jest tylko połową wielkości obrazu WebP. W wielu innych testach okazuje się, że artefakty kompresji, takie jak te występujące przy zbyt wysokiej kompresji plików JPG, zaczynają być widoczne dopiero gdy jakość spada poniżej 30 w stronę 20 lub niżej. Przy jakości 30, nawet elementy tekstowe w grafikach pikselowych pozostają ładnie ostre bez artefaktów kompresji.

Takie oszczędności w przypadku stron internetowych o dużej ilości zdjęć nie mogą być wystarczająco docenione.

AVIF dla lepszych wartości SEO, PageSpeed i User Experience

Google już w 2021 roku uczynił kluczowe wartości rdzenia (Core Web Vitals) witryny czynnikiem rankingowym. Należą do nich na przykład prędkość ładowania, czyli wartość określająca, jak szybko główna treść witryny buduje się dla użytkownika. Google podaje, że czasy do 2,5 sekundy są dobrą wartością, której właściciele witryn powinni dążyć dla swoich użytkowników.

Większe dane obrazów powodują dłuższe czasy ładowania. Core Web Vitals nie są wtedy spełnione.

Ponadto istnieje drugi problem. Gdy większe dane obrazów, oparte na przykład na formatach PNG lub JPEG, są umieszczone na stronie internetowej, może się zdarzyć, że treść tekstowa jest już załadowana, podczas gdy obraz buduje się wolniej. Może to prowadzić do tzw. kumulacyjnych zmian układu, czyli niewielkich przesunięć, które wraz z wyświetlaniem obrazu odsuwają dolne obszary witryny w dół, gdzie oczywiście powinny być. Google nie lubi takich kumulacyjnych zmian układu i sygnalizuje je jako błędy CLS, co oznacza, że Core Web Vitals również nie są spełnione.

Ponadto każdemu odwiedzającemu witrynę przyjemnie jest, gdy strony szybko się ładują, a treści są natychmiast dostępne po kliknięciu. Ponadto możesz umieszczać obrazy o lepszej jakości na stronie internetowej, bez konieczności dalekiego kompresowania, co grozi pojawieniem się artefaktów kompresji. Rozmiar pliku pozostaje mały nawet przy konwersji bezstratnej lub zwykłej kompresji w porównaniu z PNG lub JPEG. Format AVIF zwiększa zatem doświadczenie użytkownika z wielu punktów widzenia. Google zmusza nas zatem, poprzez zdanie Core Web Vitals, do podjęcia działań na rzecz naszych użytkowników, aby ci nie byli zirytowani odwiedzając naszą witrynę.

Możesz więc zrobić coś dla poprawy doświadczenia użytkownika, PageSpeedu i jakości technicznej swojej witryny, co wszystko będzie miało pozytywny wpływ na twoją widoczność online.

Wsparcie przeglądarek dla obrazów w formacie AVIF

Szczególnie gdy chodzi o najnowsze techniki, każdy właściciel witryny jest nieco niechętny i chętnie czeka jeszcze kilka miesięcy. Z jednej strony nie chce być beta-testerem jakichkolwiek głównych wersji wydań, na przykład systemów sklepowych czy systemów zarządzania treścią, z drugiej strony nigdy nie jest pewny, czy nie będzie problemów z określonymi przeglądarkami lub urządzeniami.

W przypadku formatu obrazu AVIF istotne jest faktyczne wsparcie przeglądarek dla tego formatu. Strona caniuse.com udziela na ten temat informacji: https://caniuse.com/avif

Prawie 85 procent światowego użytkowania przeglądarek już obsługuje AVIF. W Niemczech jest to wciąż 80,33 % ... no cóż, Niemcy, gdzie dziury w sieci komórkowej są częścią codzienności, a niektóre regiony wciąż cierpią na wolne Internet (moja region również: podczas gdy w biurze mam Gigabit, w domowym biurze osiągam zaledwie 9 Mbit/s).

Widzisz zatem, że AVIF jest już od jakiegoś czasu obsługiwany w najważniejszych przeglądarkach.

Ile witryn już korzysta z formatu AVIF?

Podobnie jak caniuse.com, w3tech.com udziela statystycznych informacji na temat korzystania z określonych technologii. Tak jest również w przypadku formatów obrazów stosowanych w witrynach.

Procent witryn korzystających z (stan na wrzesień 2023 r.): 

• PNG: 82,1%
• JPEG: 78 %
• SVG: 55,2 %
• GIF: 21,7 %
• WebP: 9,2 %
• ICO i BMP: po 0,2 %
• AVIF: 0,1 % (zaokrąglone)
  

Aktualnie mniej niż 0,07 procent wszystkich witryn internetowych korzysta z formatu AVIF. Whaaat? To naprawdę bardzo mało. Ale hej, to jest szansa dla Ciebie, aby stać się czołową technologią w stosowaniu nowoczesnych formatów obrazów. Na wykresie po prawej stronie można zauważyć, że korzystanie z niego wzrasta miesiąc po miesiącu ... obecnie w promilach. Na pewno wkrótce to przyspieszy.

Interesujące jest to, że niecałe 10 procent wszystkich witryn internetowych stosuje zalecenia Google dotyczące nowoczesnych formatów internetowych. Wszyscy inni dokonują kompromisów w zakresie PageSpeed i doświadczenia użytkownika, a prawdopodobnie także nie spełniają podstawowych wskaźników jakości stron, co negatywnie wpływa na widoczność online.

AVIF kontra WebP - który jest lepszy dla Twojej strony internetowej?

Zróbmy jeszcze jedno bezpośrednie porównanie dla zobrazowania. Obraz po prawej stronie z sekcji nagłówka TutKit.com miał przed konwersją na format AVIF jako plik PNG ponad 600 KB z powodu przezroczystości.

Obecnie jest wyświetlany systemowo jako plik WebP o rozmiarze 159 KB (nasze rozwiązanie rezerwowe!). Nawet jeśli teraz zostanie zoptymalizowany za pomocą narzędzia takiego jak TINYPNG, które również potrafi kompresować pliki WebP, pozostaniemy przy 128 KB. Zmniejszenie o 20 procent przynajmniej jest osiągnięte.

Jako plik AVIF, który standardowo jest u nas wyświetlany, obraz ten ma teraz jedynie 94 KB, czyli zaledwie 59 procent rozmiaru pliku WebP rezerwowego. We wszystkich testach AVIF znacząco pokonał format WebP pod względem wielkości plików przy zachowaniu tej samej jakości optycznej.

Dlaczego warto używać AVIF zamiast WebP?

• AVIF może obsługiwać przezroczystości i zachowuje lepszą jakość obrazu pomimo większej kompresji i mniejszego rozmiaru pliku.
• Wsparcie dla AVIF w przypadku wszystkich popularnych przeglądarek wynosi już prawie 85 procent. Tendencja wzrostowa.
• Twoja strona internetowa będzie wczytywać się jeszcze szybciej dzięki AVIF w porównaniu do WebP. Szczególnie przy witrynach z dużą ilością obrazów, takich jak sklepy internetowe z kategoriami, gdzie umieszczonych jest wiele produktowych zdjęć, to jest zaleta. Podobnie jak w przypadku witryn, gdzie obrazy muszą być wyświetlane wysokiej jakości (witryny portfolio, referencje itp.), zapewniasz wysoką jakość optyczną przy niskim rozmiarze pliku.

Co ciekawe, caniuse.com pisze bezpośrednio na stronie WebP: „AVIF and JPEG XL are designed to supersede WebP.“ AVIF i JPEG XL mają zastąpić WebP. 

Zanim zastanowisz się, czy warto stawiać na AVIF zamiast WebP, ponieważ JPEG XL również bierze udział w wyścigu, mogę Cię uspokoić od razu. Zgodność z przeglądarkami w przypadku JPEG XL wynosi zaledwie 0,08 procent.

W Squoosh można już konwertować obrazy na format JPEG XL, który „tylko” zbliżone wartości ma do WebP (patrz obraz poniżej). 

AVIF jest i pozostaje zwycięzcą pod względem formatu. Postaw na niego w najbliższym czasie i wykorzystaj wszystkie zalety również dla swoich stron internetowych!

Squoosh.app - najlepsze narzędzie do konwersji JPG, PNG, WebP na AVIF

Kiedyś w zespole korzystaliśmy z narzędzia online TinyJPG lub TinyPNG do optymalizacji plików JPG, PNG lub nawet WebP do użycia na stronach internetowych, teraz jestem wielkim fanem Squoosh od Google. 

Squoosh to darmowy konwerter obrazów opracowany przez Google. Narzędzie działa jako usługa online, ale również lokalnie na Twoim komputerze lub serwerze (node.js!). Może konwertować obrazy na różne formaty, w tym JPEG, PNG, GIF i WebP. I co najlepsze: konwertuje Twoje obrazy również na format AVIF.

Konwerter obrazów Squoosh wykorzystuje różne techniki zmniejszania rozmiaru obrazu, nie wpływając negatywnie na jakość. Obejmuje to kompresję informacji kolorystycznych, zmniejszanie rozdzielczości i usuwanie nadmiarowych danych.

Wystarczy przeciągnąć obraz i ustawić żądany format. Kilka kliknięć i obraz jest gotowy, skonwertowany i zoptymalizowany.

Tak to wygląda, gdy dodajesz obraz WebP i przekształcasz go zarówno w AVIF (po lewej) jak i JPEG XL (po prawej) do konwersji i kompresji. Za pomocą suwaka możesz porównać, która jakość jest odpowiednia, aby zachować widoczną jakość. Domyślnie jedna ze stron zawsze jest plikiem wyjściowym do porównania. Masz więc pełną kontrolę nad wynikiem.

Skorzystaj także z Squoosh do pielęgnacji treści i rozwoju stron internetowych, aby zmniejszyć rozmiar swoich obrazów dzięki nowoczesnym formatom internetowym, takim jak WebP lub AVIF, oraz poprawić czasy ładowania swoich witryn. Możesz również zmniejszyć rozmiar plików JPG - podobnie jak w przypadku TinyJPG - jeśli chcesz np. udostępnić je w mediach społecznościowych. Zaletą w porównaniu z TinyJPG jest to, że masz pełną kontrolę nad kompresją i możesz eksperymentować z różnymi ustawieniami optymalizacji, aby osiągnąć najlepszą jakość przy jak najmniejszym rozmiarze.

Oto kilka zalet Squoosh:

• Obsługuje różnorodne formaty obrazów, które można przekonwertować 
• Wykorzystuje różne techniki zmniejszania rozmiaru obrazów.
• Umożliwia podgląd skompresowanych obrazów
• Oferuje szereg ustawień optymalizacji
• Narzędzie jest bezpłatne i łatwe w obsłudze.

Jednym z minusów, pomimo wszystkich pozytywnych cech, jest to, że Squoosh aktualnie może przetwarzać zawsze tylko jeden obraz i nie obsługuje przetwarzania wsadowego. Mam nadzieję, że ta funkcja zostanie dodana w przyszłości.

Konwersja wsadowa po stronie serwera w ramach frameworków PHP obrazów z JPG i PNG na AVIF i WebP

Na TutKit.com przekonwertowaliśmy nasze obrazy, które były osadzone w portalu jako pliki JPG i PNG - aż ponad 14 000 pojedynczych plików - na serwerze do formatu AVIF oraz jako zapasowe dla starszych przeglądarek do formatu WebP. Technicznie rozwiązaliśmy również kwestię, aby nasi edytorzy mogli nadal przesyłać obrazy do portalu jako JPG lub PNG, zgodnie z tym, do czego przyzwyczaili się nasi projektanci, oraz aby były one tagowane metadanymi. System automatycznie osadza obrazy w formacie AVIF przy wyjściu i jako zapasowy dla wszystkich starych (lub nieobsługujących) przeglądarek wyświetla je w formie WebP.

Aby zrealizować to po stronie serwera, użyj najnowszych wersji oprogramowania. Nowe funkcje imagecreatefromavif i imageavif dla formatu AVIF są dostępne tylko w PHP 8.1+ i gdy rozszerzenie GD zostało zbudowane z obsługą AVIF. Wymaga to wersji libavif 0.8.2 lub nowszej.

Uważaj także na kompatybilność z systemami operacyjnymi. AVIF jest dostępny w pakietach libavif-dev/libavif-devel w repozytoriach:

• od Ubuntu 21.04  
• od Debiana 11 
• od Alpine 3.13 
• od Fedory 34

Oto ocena PageSpeed dla widoku mobilnego strony TutKit.com. Podczas gdy dla widoków na komputerze stacjonarnym można łatwo uzyskać wartość powyżej 90, dla widoków mobilnych jest to naprawdę wymagające. Nadal pracujemy nad poprawą tej wartości w kierunku 100, ponieważ wiemy, że PageSpeed jest korzystny dla doświadczenia użytkownika i przekłada się na nasze sukcesy w dziedzinie SEO.

To, co wydaje się tak proste w integracji AVIF w nasz framework PHP Laravel, ostatecznie przekładało się na ponad 60 zgłoszeń w naszym narzędziu JIRA związanych z konwersją i integracją (w tym badaniami, rozwijaniem, naprawą błędów, testowaniem). Podczas gdy wtyczki znacząco ułatwiają pracę w klasycznym systemie CMS, takim jak WordPress, przy rozległym dostosowaniu indywidualnym, takim jak nasze, może to zająć nawet trzy tygodnie, jak w naszym przypadku. Zastosowanie AVIF zdecydowanie przynosi korzyści! 

By the way: być może niedługo napiszę artykuł wyjaśniający, dlaczego portale takie jak TutKit.com wolą korzystać z frameworka PHP niż z WordPressa lub innych systemów CMS.

Wtyczki umożliwiające korzystanie z AVIF w WordPress

System CMS WordPress domyślnie nie obsługuje na wrzesień 2023 roku przesyłania obrazów w formacie AVIF - w przeciwieństwie do CMS Contao, który od wersji 5.0.0 wspiera format AVIF. Dlatego obecnie konieczne są dwa kroki przy użyciu WordPress, aby móc wyświetlać obrazy w formacie AVIF.

1. Umożliwienie obsługi plików AVIF w WordPress
2. Konwersja obrazów z formatu JPG/PNG/WEBP na AVIF

Istnieje kilka wtyczek WordPress umożliwiających korzystanie z obrazów AVIF na stronach WordPress. Oto trzy wtyczki, które warto sprawdzić: 

• AVIF Support: Ta wtyczka umożliwia przesyłanie i wyświetlanie obrazów AVIF na stronach WordPress. Obsługuje również automatyczną konwersję obrazów JPEG i PNG na obrazy AVIF.
• Converter for Media: Ta wtyczka konwertuje wszystkie obrazy w twojej bibliotece mediów WordPress na obrazy AVIF. Oferuje również szereg opcji dostosowania jakości obrazu i stopnia kompresji.
• ShortPixel Image Optimizer: Ta wtyczka optymalizuje obrazy w twojej bibliotece mediów WordPress, w tym konwertując je na obrazy AVIF. Oferuje również wiele innych funkcji poprawiających jakość i wydajność obrazów.

Te wtyczki są świetnym sposobem na korzystanie z korzyści płynących z obrazów AVIF na stronach WordPress.

Tutaj znajdziesz Wtyczkę wsparcia AVIF - obecnie ma tylko 1 956 pobrań i mniej niż 800 instalacji - widać, że AVIF jest jeszcze całkowicie nieznany dla użytkowników WordPress.

AKTUALIZACJA 05.04.2024: Wersja WordPress 6.5 wreszcie także obsługuje AVIF! Dlatego wtyczki wsparcia będą potrzebne tylko dla starszych wersji WordPress. Dlatego tym bardziej warto zaktualizować WordPress do wersji 6.5 i nowszej.

Wtyczka Local Image Sharp dla witryn Strapi

Sami stosujemy AVIF także na naszej stronie internetowej firmy 4eck-media.de, która wykorzystuje system zarządzania treścią Strapi oparty na node.js. Wtyczka Local Image Sharp dla Strapi umożliwia wykorzystanie obrazów AVIF na stronach internetowych Strapi. Wtyczka korzysta z narzędzia przetwarzania obrazów sharp, aby konwertować obrazy na obrazy AVIF.

Wtyczka Local Image Sharp oferuje szereg funkcji, w tym:

• Automatyczna konwersja obrazów na obrazy AVIF
• Dostosowanie jakości obrazów i współczynnika kompresji
• Obsługa różnych formatów obrazów

Aby zainstalować wtyczkę, pobierz ją ze Sklepu wtyczek Strapi i zainstaluj ją tak jak każdą inną wtyczkę Strapi.

Skonfigurowaliśmy nasz system tak, aby nadal wysyłać obrazy do systemu Strapi jako pliki JPG lub PNG. System konwertuje obrazy na AVIF i WEBP w sześciu różnych rozdzielczościach, aby na urządzeniach (komputer stacjonarny, tablet, telefon komórkowy) wyświetlać odpowiednio dostosowane obrazy w formacie AVIF. Dla starszych przeglądarek mamy również rozwiązanie zapasowe z obrazami WebP, które zostaną wyświetlone.

Najlepiej użyć tagu <picture>, który zawiera tagi <source> i <img>, aby wyświetlić obrazy w odpowiednich wymiarach i dwóch formatach AVIF i WebP z pliku źródłowego JPEG lub PNG.

Obrazy w nowym formacie internetowym były obok pamięci podręcznej jednym z najważniejszych elementów zapewniających świetną wydajność naszej strony internetowej firmy:

Uwaga dotycząca miniatur i danych strukturalnych

Ponieważ do dziś Google Obrazy nie obsługuje formatu AVIF, w schemacie Markup "image" nadal podajemy plik JPG. Podobnie miniatura meta, którą wskazujemy na każdej stronie produktu, aby Google mógł również zaoferować podgląd obrazu w wyszukiwarce, nadal zawiera format JPG.

Na wszelki wypadek. W forach już były doniesienia o osobie, której widoczność obrazów online zniknęła po przejściu na AVIF. Nie potwierdzamy tego doświadczenia. Widoczność online u nas pozostała stała, ale ilość zapytań Crawlingu Google'a dla obrazów wzrosła. Co ciekawe, widzimy, że Googlebot przeszukuje obrazy WebP, które są gotowe do użycia jako zapas dla starszych przeglądarek. Google wydaje się teraz przeszukiwać obrazy WebP do indeksowania.

Dlatego moją radą byłoby, aby w metadanych do miniatur oraz danych strukturalnych nadal używać pliku JPG.

Narzędzia i oprogramowanie do obróbki obrazów AVIF

Obrazy są często i chętnie edytowane, dlatego zgodność z formatem AVIF jest oczywiście pożądana w popularnych programach do obróbki obrazów. Czasami pobieramy obraz do edycji ze strony internetowej, aby wprowadzić zmiany. W takim przypadku dobrze jest, gdy twoje ulubione oprogramowanie do obrazów może go otworzyć, co stanowi najważniejszą funkcję zgodności z AVIF. Nawet jeśli zostanie zapisany w innym formacie, można go ponownie przekonwertować na format AVIF za pomocą Squoosh lub innych narzędzi.

Oto lista oprogramowania do obróbki obrazów kompatybilnego z AVIF (stan na wrzesień 2023 r.):

• Gimp: Może importować, edytować i eksportować AVIF od wersji 2.10.22.
• Photopea: Może importować i edytować AVIF, ale nie może eksportować. Możliwe jest zapisanie w innym formacie pliku.
• Affinity Photo: Brak obsługi formatu AVIF
• Photoshop: Brak obsługi, ale istnieje wtyczka, która dodaje funkcjonalność.

Wtyczka AVIF dla Photoshopa

Tutaj znajdziesz wtyczkę, która umożliwia Photoshopowi otwieranie plików AVIF.
https://github.com/0xC0000054/avif-format

Pobranie jest możliwe w karcie „Releases” na tej stronie.

Po pobraniu pliku ZIP, umieść plik Av1Image.8bi w folderze, w którym Photoshop szuka wtyczek. Dla standardowych instalacji folder ten to:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Lub ten folder: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

Photoshop musi być zamknięty. Następnie uruchom ponownie Photoshop, aby wtyczka mogła zostać załadowana. Następnie możesz otworzyć pliki AVIF bezpośrednio za pomocą funkcji przeciągnij i umieść lub dialogu Otwórz w Photoshopie.

Wyświetlanie obrazów AVIF w systemie Windows

Jeśli pobieram obrazy z witryny internetowej, ponieważ chcę je edytować lub potrzebuję w inny sposób, chcę, aby mój przeglądarka plików umożliwiała otwieranie i wyświetlanie tych plików. Na Windowsie 10 jest to możliwe, ale wymagane jest do tego rozszerzenie. Po kliknięciu na plik AVIF, otrzymasz komunikat o błędzie.

W komunikacie o błędzie jest dostępny link. Po jego kliknięciu zostaniesz przeniesiony do Microsoft Store po rozszerzenie AVIF. Pobierz je. Jest to zaledwie 1,61 MB.

Po zainstalowaniu obrazy w formacie AVIF można otwierać i wyświetlać również w przeglądarce plików w systemie Windows.

Zamiast animacji GIF, lepsze animacje AVIF na stronach internetowych

Istnieje tutaj konwerter online do zamiany animacji GIF na animacje AVIF. https://mconverter.eu/convert/gif/avif/

Podczas gdy mój testowy plik GIF waży 787 KB, animacja jako AVIF waży zaledwie 411 KB.

Moje osobiste podsumowanie

Moim zdaniem AVIF to najlepsza opcja obecnie dostępnych nowoczesnych formatów obrazów do integracji na stronach internetowych. Korzyści w zakresie kompresji i jakości obrazu są przekonujące. żaden inny format obrazu nie łączy tych cech i tak bardzo przyspiesza czasy ładowania. Obecnie nadal zbyt wielu właścicieli stron internetowych nie wykorzystuje formatu AVIF, chociaż wsparcie przeglądarek jest obecne w ponad 85% przypadków i technicznie nie ma przeszkód, aby nadal korzystać z formatu WebP jako zastępczego. SEO zmienia się. AVIF sam w sobie oczywiście nie wystarczy, aby osiągnąć najlepsze wyniki w zapewnieniu szybkości ładowania w narzędziach PageSpeed-Insights; należy wziąć pod uwagę inne czynniki techniczne. Jeśli chodzi o integrację nowoczesnych formatów obrazów, używając AVIF możesz uzyskać lepsze rezultaty w porównaniu do WebP.

Sam optymalizowany treść nie będzie już wystarczający, ponieważ z powodu SI Internet jest zasypywany treściami, co powoduje, że wiele witryn konkurowanie na równi pod względem zawartości, aby być widocznymi w Internecie. SEO techniczne i w szczególności spełnianie Core Web Vitals stają się coraz bardziej ważnym czynnikiem rankingowym i tym samym decydującym czynnikiem rozstrzygającym, ponieważ Google stara się zapewnić użytkownikom jak najlepsze doświadczenia. AVIF jest - obok innych czynników - częścią rozwiązania, aby przyspieszyć czasy ładowania, poprawić doświadczenia użytkownika i perspektywicznie poprawić widoczność online.

Dowiedz się więcej o SEO, doświadczeniu użytkownika, designie i trendach technicznych

Jeśli ogólnie interesują Cię te obszary dotyczące SEO, doświadczenia użytkownika, narzędzi SI i nowych technologii internetowych, dowiesz się więcej na naszych szkoleniach i w innych artykułach tutaj, na blogu.

Teraz twoja kolej

Jeśli uważasz, że ten wpis był dla ciebie wartościowy, prosimy o napisanie recenzji na Google. Każda recenzja wspiera nas. Jeśli potrzebujesz pomocy w korzystaniu z formatu AVIF w swoim projekcie internetowym, skontaktuj się z nami przez naszą stronę agencji.