Serwuj obrazy w formatach nowej generacji – o taką poradę wzbogaci nas nowa wersja PageSpeed Insights, której każda kolejna wersja wymaga coraz nowszych technik optymalizacyjnych i jest tym samym coraz bardziej wymagająca od back-end i front-end deweloperów.

W tym artykule przybliżę temat formatów WebP, JPEG200, JPEG XR. Skąd się wzięły, czy warto stosować, no i najważniejsze – co my wszyscy z tego mamy?

Czym są formaty nowej generacji?

Tak jak już miałem okazję zdefiniować „format” w artykule dotyczącym szerokiej optymalizacji grafiki, przypomnę tylko, że format to nic innego jak sposób zapisu konkretnych informacji. W tamtym artykule można przeczytać czym się różnią tradycyjne formaty pomiędzy sobą i dlaczego zdjęcia zapisujemy w formacie JPG a zrzuty ekranu i wykresy w formacie PNG.

Wraz z rozwojem technologii cyfrowych, dochodzą kolejne formaty. Są one wypadkową potrzeb rynku, możliwości technologicznych i badań ponieważ w Informatyce (jak i w każdej innej dyscyplinie) – nigdy nie ma rozwiązań idealnych i zawsze coś można dopracować. Stąd się wzięły formaty MP4, Matroska w technice wideo oraz AAC w technice audio.

Wszyscy zapomnieli przez chwilę o grafikach i zdjęciach – wszak zajmują stosunkowo mało miejsca, jakość jest OK i nikt się nimi nie przejmował – do czasu. Rozwój Internetu, coraz bardziej obrazkowy jego charakter i rewolucja mobilna zaczęły stymulować większą motywację do opracowania nowych formatów graficznych, które mają być lepsze pod wszystkimi względami od swoich poprzedników.

Główne problemy obecnych formatów graficznych to fakt, że

  • mała wydajność kompresowania formatów graficznych powoduje, że strony ładują się wolno i marnują transfer Internetowy,
  • tradycyjne formaty stratne, takie jak JPEG, przy niskich parametrach jakościowych wygląda dość średnio,
  • kolejnym problemem jest konieczność decydowania czy w danym momencie wykorzystać JPEG, PNG czy GIF. Poprawna decyzja jest dokonywana stosunkowo rzadko przez osoby nietechniczne.

Przez co wchodząc na galerię lub blog modowy z wieloma zdjęciami nawet w przy obecnym rozwoju i prędkościach pasma Internetowego nadal musimy czekać na załadowanie się zdjęć. Formaty graficzne nowej generacji, dzięki większej uniwersalności i wyższej efektywności kompresji starają się naprawić powyższe problemy.

Przykłady formatów graficznych next-gen

Mamy obecnie 3 propozycje nowych formatów graficznych.

WebP

Format ten jest rozwijany przez Google. WebP pozwala na zapis zarówno statycznych jak i animowanych obrazów, co więcej potrafi kodować obrazy w trybie stratnym i bezstratnym.

Dodatkową zaletą zaletą tego formatu jest obsługa przezroczystości a przy tym lepsza wydajność kompresji w porównaniu do JPG – porównując faktyczną jakość obrazu a nie jakieś tabelki z parametrami.

WebP miał się stać standardem dla grafiki w Internecie i powoli zaczyna nim być. Serwisy Google Play, YouTube używają tego formatu, a twórcy wtyczek optymalizacyjnych oraz autorzy serwisów do kompresji zdjęć online wręcz prześcigają się w tworzeniu coraz to nowych narzędzi wykorzystujących ten format. To wspiera rozwój formatu, świadomość wśród użytkowników a popularyzacja nabiera dużego tempa.

Typ MIME: image/webp

Mimo to, przeszkodą w bezproblemowym korzystaniu z WebP jest niestety brak wsparcia przez parę przeglądarek – co widać w poniższej tabeli. Starsze programy do obróbki grafiki nie obsługuje zapisu do WebP.

Tabela Caniuse dla formatu WebP w 2021 roku

Prawie 80% pokrycia wszystkich użytkowników Internetu – kusi aby wykorzystywać tylko ten format bez technik progressive enhancement. Dodatkowo w uwagach widać, że Apple eksperymentuje z wprowadzeniem wsparcia WebP w Safari. To będzie idealny moment aby przekonwertować wszystkie zdjęcia do formatu WebP.

JPEG 2000

JPEG 2000 to standard zapisu obrazu, który przebiega podobnie do JPEG, jednak jest od niego dużo bardziej efektywny. Mimo, że opracowano go już w 2000 roku nie zyskał dużej popularności z powodu dużej złożoności obliczeniowej w porównaniu do swojego poprzednika – jak wiemy nie wpisuje się to za bardzo w klimat popularności urządzeń mobilnych. Rozszerzenia plików to .jp2, jpx, .jpm, .mj2.

Typy MIME:

  • image/jp2,
  • image/jpx,
  • image/jpm,
  • image/mj2

Wsparcie ze strony przeglądarek też nie jest czymś co spowodowałoby, że JPEG 2000 w najbliższym czasie zyska popularność.

Tabela Caniuse dla formatu JPEG 2000 w 2021 roku

Oczywiście Apple musi zrobić wszystko na odwrót i tak jak nie wspiera formatu WebP, tak nadal wspiera JPEG 2000, który raczej nie ma przyszłości biorąc pod uwagę alternatywy.

JPEG XR

JPEG XR to następca zarówno formatu JPEG jak i wspomnianego wyżej JPEG 2000. Jeszcze lepiej kompresuje obrazy rastrowe i co ciekawe, podobnie jak WebP wspiera kompresję bezstratną, kanał alfa (czyli stopniowaną przezroczystość) i 48-bitową głębię kolorów. Rozszerzenia plików JPEG XR to: .jxr, .hdp, .wdp

Typy MIME: image/vnd.ms-photo

Mimo, że opracowany w 2009 roku JPEG XR wydaje się być idealnym konkuretem dla WebP w internetowej rywalizacji o miano standardu graficznego nowej generacji, wsparcie na dzień dzisiejszy ze strony przeglądarek jest słabe.

Tabela Caniuse dla formatu JPEG XR w 2021 roku

Tylko przeglądarki Microsoftu wspierają ten format i tak jak w przypadku JPEG 2000, nie zanosi się aby i w tej kwestii miałoby się coś wkrótce zmienić.

Zalety formatów nowej generacji

Każdy z wymienionych formatów zwiększa jakość obrazu lub zmniejsza rozmiar pliku (lub robi i jedno i drugie jednocześnie). W Internecie nie ma cenniejszego zasobu niż transfer i miejsce na dysku – tym bardziej w dużych i skalowalnych portalach serwujących mnóstwo zdjęć.

Wady nowych formatów

Lepsze i bardziej wysublimowane techniki kompresji to zazwyczaj większe obciążenie dla procesora – podczas jego odczytu, przetwarzana i zapisu. Biorąc pod uwagę, że urządzenia klienckie i tak dysponują jednostkami obliczeniowymi kilkakrotnie przewyższającymi codzienne potrzeby, wadę tę można spokojnie pominąć chyba, że obciążenie (a tym samym czas pracy baterii) jest dla nas parametrem, który chcielibyśmy oszczędzać.

Kompatybilność WebP, JPEG 2000, JPEG XR w przeglądarkach

Przeglądając tabele kompatybilności/wsparcia, można odnieść wrażenie, że producenci specjalnie tak dobrali formaty, aby JPEG i PNG z uwagi na swoje szerokie wparcie były jeszcze przez jakiś czas niezastąpione a temat opracowania „formatu przyszłości” był ciągle otwarty.

To nie powinno zniechęcać nas – twórców – do wykorzystywania ich zalet już teraz. Autorzy specyfikacji HTML przewidzieli tego typu sytuacje i od dłuższego czasu możemy wykorzystać liczne techniki, które pozwalają zarówno wykorzystać nowe formaty jak i zachować 100% kompatybilności strony internetowej. O jakich technikach mowa?

Progressive Enhancement

Jedną z nich jest progressive enhancement, która polega na nadbudowaniu kolejnej warstwy strony internetowej, która będzie obsługiwana tylko w nowszych przeglądarkach. W przypadku formatów graficznych możemy wykorzystać tag picture wprowadzony w HTML5:

<picture> 
   <source type="image/webp" srcset="obrazek.webp">
   <source type="image/vnd.ms-photo" srcset="obrazek.jxr">
   <source type="image/jp2" srcset="obrazek.jp2">
   <img src="obrazek.jpg" alt="Obrazek">
 </picture>

Działa to tak, że w Chrome i Microsoft Edge pokaże się zdjęcie WebP, w Safari pokaże się JP2 itd… Kolejność ma tutaj znaczenie bo brany jest pod uwagę pierwszy obsługiwany format. Uwaga: Ta właściwość type z poprawnymi typami MIME musi być dodana, bez tego to nie działa.

Istnieje też technika serwowania zdjęć w wielu formatach z wykorzystaniem .htaccess, która polega na tym, że sprawdzamy na poziomie serwera czy przeglądarka obsługuje dany format i jeżeli tak to przepisujemy wszystkie adresy „w locie” aby użytkownik do przeglądarki otrzymał webp – mimo że w kodzie źródłowym strony mamy zwykły JPG albo PNG.

Kod, który próbuje przepisać adres na plik .webp w tym samym folderze wygląda tak:

<IfModule mod_setenvif.c>
  SetEnvIf Request_URI ".(jpe?g|png)$" REQUEST_image
</IfModule>
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+).(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

Tłumacząc to na polski wygląda to tak: dla wszystkich plików JPEG i PNG, sprawdź czy przeglądarka obsługuje WebP. Jeżeli tak to sprawdź czy istnieje plik w tym samym folderze o rozszerzeniu WebP. Jeżeli tak, przepisz adres pliku na WebP.

Ta metoda to coś w rodzaju triku, jest mniej elastyczna ale za to nie trzeba edytować kodu. Jest też mniej elegancka i jeżeli to możliwe zawsze należy wykorzystywać pierwszą technikę z wykorzystaniem znacznika picture.

Podsumowanie

Jak widać w śród nowych formatów, standardem staje się WebP. Przy nim formaty JPEG 2000 i JPG XR są co najwyżej ciekawostką, która zainteresuje informatyka lub grafika komputerowego. Prace nad wsparciem WebP w przeglądarkach Safari wydaje się być ostateczną przeszkodą przed tym aby o PNG i JPG (w kontekście Internetu) można było już wkrótce zapomnieć. Malejąca ilość użytkowników przeglądarki Internet Explorer i Edge powoduje, że Microsoft wkrótce nie będzie miał głosu w ustalaniu standardów internetowych i prędzej czy później (mając na względzie swoje interesy) też wprowadzi wsparcie dla open-sourcowego projektu WebP w swoich przeglądarkach.

Źródła

Oceń artykuł na temat: Formaty graficzne nowej generacji
Średnia : 4.7 , Maksymalnie : 5 , Głosów : 23