Obrazy w formatach nowej generacji – JPEG 2000, JPEG XR i WebP

Kategoria wpisu Frontend, Grafika, Kurs CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Kilka tygodni temu zaktualizowa艂am moje portfolio 馃. Co jak dla mnie jest sporym sukcesem bo jako艣 nigdy specjalnie czasu nie mia艂am, ale nie do ko艅ca chcia艂a si臋 chwali膰 moim sukcesem. W ramach poprawy wydajno艣ci mojej nowej strony postanowi艂am sprawdzi膰 szybko艣膰 jej 艂adowania.

Wykorzysta艂am do tego celu narz臋dzie https://developers.google.com/speed/聽S艂u偶y ono do analizy szybko艣ci 艂adowania si臋 ro偶nych element贸w na stronie. Og贸lny wynik by艂 ca艂kiem niez艂y 馃檪 i nie odbiega艂 od tego co oczekiwa艂am (mam problemy z serwerem).

Obrazy w formatach nowej generacji wed艂ug Google

Aplikacja r贸wnie偶 doradzi艂a mi bym zast膮pi艂a ilustracje na mojej stronie obrazami nowej generacji – gdy偶 maj膮 one du偶o lepsz膮 kompresj臋. Takimi plikami s膮 w艂a艣nie JPEG 2000, JPEG XR i WebP.

Na pocz膮tek warto te偶 tu wspomnie膰, 偶e tak naprawd臋 nie s膮 to nowe formaty (np. WebP – powsta艂 w 2010 roku). Nie mniej jednak s膮 to inne formaty ni偶 te z kt贸rych na co dzie艅 korzystamy.

Zapewne wi臋kszo艣膰 z was mia艂a okazj臋 ju偶 natkn膮膰 si臋 na obrazy w formacie JPEG 2000, JPEG XR i WebP. Wydaje mi si臋, 偶e sama najcz臋艣ciej wpada艂am na pliki WebP (ale kto to wie).馃

jakie formaty obraz贸w na stron臋 internetow膮

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, Adobe Photoshop CS6, Adobe 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 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

Pliki w standardzie WebP

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. 馃様

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. Co w efekcie mo偶e mie膰 r贸偶ne skutki jak np. brak zdj臋cia na stronie.

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. Dodatkowo sam Google zach臋ca do ich umieszczania na na stronach bardziej „nowoczesnych” kent贸w.聽

藕r贸d艂a:

https://pl.wikipedia.org/wiki/JPEG_2000
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=pl
https://pl.wikipedia.org/wiki/JPEG_XR
https://pl.wikipedia.org/wiki/WebP

Dodaj komentarz

Tw贸j adres email nie zostanie opublikowany. Pola, kt贸rych wype艂nienie jest wymagane, s膮 oznaczone symbolem *