Zalecane formaty obrazów na stronę internetową przez Google!

Zalecane formaty obrazów na stronę internetową przez Google!
Czas czytania 3 minuty

Tematem o jakim chce dziś napisać są zalecane przez Google formaty plików graficznych (next-gen formats). Czyli formaty graficzne, które zdaniem Firmy Google mają największy potencjał.

Wprowadzenie

Temat sam wpadł mi w ręce kiedy aktualizowałam moje portfolio. Bo jak sami wiedzie mówi stare przysłowie – szewc bez butów chodzi. A w dużym skrócie było co robić (sprawdzać, aktualizować i wprowadzać nowe rozwiązania)! Dlatego aktualizacja mojego portfolio przynajmniej dla mnie była sporym wyczynem! Choć dla osoby z zewnątrz, bez wiedzy o specyfikacjach już tak średnio.

Tak naprawdę jakoś nigdy specjalnie na to nie miałam czasu, w końcu zawsze jest coś innego do robienia – każdy to zna. Jednak skoro już się zmusiłam do pracy to postanowiłam zrobić to dobrze, a przynajmniej w miarę poprawnie. Jedną z czynności jakie wtedy wykonałam było sprawdzenie wydajności strony. Dużo osób na to uwagi nie zwraca a to spory błąd mogący istotnie wpłynąć na ocenę zawartości strony przez odbiorcę.

Do weryfikacji wykorzystałam narzędzie PageSpeed Insights. Służy ono do analizy szybkości ładowania się rożnych elementów na stronie, ale nie tylko. Ogólny wynik dla mojej strony okazał się całkiem niezły i nie odbiegał od tego co oczekiwałam (mam problemy z serwerem).

Zalecane formaty obrazów przez Google (next-gen formats)

Aplikacja również doradziła mi bym zastąpiła ilustracje na mojej stronie obrazami następnej generacji (next-gen formats) – gdyż mają one dużo lepszą kompresję (szybciej się ładują na stronę internetową). Takimi formatami są:

Jeszcze jakiś temu formatów tych było więcej jednak nie wszytki z nich były poprawnie obsługiwane przez przeglądarki internetowe. Nie zdziwiła bym się gdyby ta lista za jakiś czas również uległa zmianie.

Na początek warto też tu wspomnieć, że tak naprawdę nie są to nowe formaty (np. WebP – powstał w 2010 roku, czyli format ten już liczy sobie kilka lat). Nie mniej jednak są to inne formaty niż te z których na co dzień korzystamy. Czyli formaty takie jak JPG, PNG! Były one też jeszcze niedawno praktycznie nie obsługiwane przez większość przeglądarek.

Zapewne większość z was miała okazję już natknąć się na obrazy w formacie AVIF i WebP. Aktualnie na stronach najczęściej można spotkać pliki w formacie WebP. Właściwie to nie wiem czy z AVIF miałam do czynienia kiedykolwiek.

jakie formaty obrazów na stronę internetową
jakie formaty obrazów na stronę internetową, który typ grafiki nadaje się do animacji

Pliki w standardzie WebP – co warto o nich wiedzieć

Ten format z kolei został stworzony przez Google. Obsługiwany jest więc przez większość ich produktów (np. systemy android, Chrome ). Wydaje mi się, że aktualnie jest to też najpopularniejszy typ plików z całej tej grupy.

Zdjęcia generowane w tym formacie jakościowo przypominają te w JPG jednak są dużo od nich lżejsze.  Istotną rzeczą jaką warto o nich wiedzieć jest że:

  • pliki WebP obsługują przezroczystość, podobnie jak PNG
  • pliki WebP obsługują animacje, do tej pory robiło się to głównie z pomocą GIF (odsyłam do obrazka powyżej)

Wygląda na to, że ten plik to taka mała rewolucja. Niestety póki co nie jest obsługiwany przez większość przeglądarek. ?


Jeszcze kilka lat temu Google Polecał także inne formaty takie jak: JPEG 2000, JPEG XR

Obrazy w standardzie JPEG 2000

Jest to nieco lepsza wersja standardowego rozszerzenia JPG. Chociaż trudno mi to ocenić bo mój komputer nie rozpoznaje plików tego formatu.

Do otwarcia potrzeba:

  • Apple QuickTime Player,
  • Adobe Acrobat XI,
  • Photoshop CS6,
  • Photoshop Elements 11,
  • Adobe Illustrator CS6,
  • CorelDRAW Graphics Suite X6,
  • Corel PaintShop Pro X5

Zaletą plików typu JPEG 2000 jest nieco lepsza jakość obrazu w stosunku do JPG przy zachowaniu tego samego stopnia kompresji. Obrazy zapisywane w tym standardzie stanowią również konkurencję dla PNG. Ponieważ obraz może zostać skompresowany bezstratne.

Pliki w tym standardzie wykorzystywane są głównie do przechowywania skompresowanego obrazu bitmapowego nie są więc przynajmniej na na razie powszechnie używane.

Standard ten posiada kila wersji rozszerzeń – .JPF, .JPX, .JP2, .J2C, .J2K, .JPC

Pliki graficzne w standardzie JPEG XR

JPEG XR znany również pod nazwami HD Photo, Windows Media Photo to jak nietrudno się domyślić format stworzony przez firmę Microsoft w celu zastąpienia JPEG i JPEG 2000.

Format ten ma dużo lepszą konwersję. W związku z tym, że jest to dość nowy format nie jest on jednak obsługiwany przez wszystkie przeglądarki internetowe.

O tym formacie możecie poczytać nieco szerzej na stronie https://docs.microsoft.com/en-us/windows/desktop/wic/jpeg-xr-codec

Obsługa zdjęć w przeglądarkach według Google

Zestawianie na 24.06.2019

FormatPrzezroczystośćAnimacjaPrzeglądarka
GIFTakTakWszystkie
PNGTakNieWszystkie
JPEGNieNieWszystkie
JPEG XRTakTakIE
WebPTakTakChrome, Opera, Android
źródło: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=pl

Obsługa formatów przez przeglądarki

Podsumowanie

Na pewno pliki „nowej generacji” są dosyć ciekawe jednak ja bym je osobiście zaczęła wprowadzać z lekką rezerwą. W końcu nie każda przeglądarka je jeszcze obsługuje (przypominam, że tak naprawdę to nie są nowe formaty). Co w efekcie może mieć różne skutki jak np. brak zdjęcia na stronie. Dlatego jeśli nie czujecie się przekonani i wolicie pozostać przy sprawdzonych formatach warto byście przeczytali ten wpis.

Oczywiście nikomu nie zabraniam testowania tych formatów samą mnie one kuszą. W końcu lepsze jest wrogiem dobrego. A nam zależy na szybkości strony. Warto tu także wspomnieć, że ostatnimi czasy dużo większą popularnością cieszy się format SVG. Pliki tego typu wyświetlają się we wszystkich nowych przeglądarkach. Z pewnością daje to więc temu formatowi przewagę.

źródła: