Ne paslaptis, kad vienu svarbiausių dalykų puslapių optimizacijoje yra grafiniai atvaizdai. Tam dauguma didžiųjų korporacijų metų metus praleidžia kuriant optimalius formatus, kad pakeistų esamus geresniais ir pradžiugintų kūrėjus bei naudotojus. Deja, bet grafinių formatų pasaulyje metai iš metų niekas nesikeičia:
Pabandysime išsiaiškinti, kodėl JPEG 2000, JPEG-XR ir WebP vis dar bando pasivyti populiariuosius formatus ir ar iš ties jie tokie geri, kaip nurodoma.
JPEG 2000
Puikus suspaudimo formatas. Palaiko suspaudimą ir su kokybės praradimu, ir be jos, o taip pat skaidrumą ir suspaudimo laipsniškumą. Gaunamas 20 % geresnis suspaudimas nei su JPEG, o pagrindinis bruožas yra artefaktų su sunkiojo suspaudimo trūkumas.
Trūkumas - prasta parama ir dėl to gaunamas mažas paplitimas interneto erdvėje.
JPEG-XR
Suspaudžia nuotraukas daug geriau ir greičiau nei JPEG 2000. Galimas lossless variantas. Todėl palaikomas įvairių laipsnių skaidrumo ir laipsniškumo suspaudimas. Suspaudžia 50…75 % geriau, nei JPEG, o ir išlaikoma padori kokybė. Taip nurodoma. Žemiau pateikiame eksperimento paveikslėlį, kuriame patikrintas ar kokybės faktas ne iš piršto laužtas.
Palaikymas - tik IE 9 naršyklės ar senesnių versijų.
JPEG 2000
Puikus suspaudimo formatas. Palaiko suspaudimą ir su kokybės praradimu, ir be jos, o taip pat skaidrumą ir suspaudimo laipsniškumą. Gaunamas 20 % geresnis suspaudimas nei su JPEG, o pagrindinis bruožas yra artefaktų su sunkiojo suspaudimo trūkumas.
Trūkumas - prasta parama ir dėl to gaunamas mažas paplitimas interneto erdvėje.
JPEG-XR
Suspaudžia nuotraukas daug geriau ir greičiau nei JPEG 2000. Galimas lossless variantas. Todėl palaikomas įvairių laipsnių skaidrumo ir laipsniškumo suspaudimas. Suspaudžia 50…75 % geriau, nei JPEG, o ir išlaikoma padori kokybė. Taip nurodoma. Žemiau pateikiame eksperimento paveikslėlį, kuriame patikrintas ar kokybės faktas ne iš piršto laužtas.
Palaikymas - tik IE 9 naršyklės ar senesnių versijų.
WebP
Tai visiškai atviras formatas. Palaiko lossy, o taip pat ir lossless bei suspaudžia paveikslėlius 30…40 % geriau nei JPEG. Vienintelis minusas, lyginant su prieš tai aptartais dviem formatais, - nepalaiko progresinio suspaudimo. Bet daug geriau palaiko naršykles ir turi daug šviesesnę ateitį.
Palaikymas
Nepaisant akivaizdžių privalumų nei JPEG 2000, nei JPEG-XR, nei WebP kol kas negali užimti vietos tarp pačių populiariausių interneto erdvės formatų. Kodėl? Nes negali "susikalbėti". Taigi apžvelgiam šių formatų palaikymą:
Tai visiškai atviras formatas. Palaiko lossy, o taip pat ir lossless bei suspaudžia paveikslėlius 30…40 % geriau nei JPEG. Vienintelis minusas, lyginant su prieš tai aptartais dviem formatais, - nepalaiko progresinio suspaudimo. Bet daug geriau palaiko naršykles ir turi daug šviesesnę ateitį.
Palaikymas
Nepaisant akivaizdžių privalumų nei JPEG 2000, nei JPEG-XR, nei WebP kol kas negali užimti vietos tarp pačių populiariausių interneto erdvės formatų. Kodėl? Nes negali "susikalbėti". Taigi apžvelgiam šių formatų palaikymą:
Naudojimas
Neteisingai:
<img src="myimage.webp"/>
Taip paveikslėlis atsidarys tik tam tikroje naršyklėje.
Teisingai:
<picture>
<source srcset='myimage.jxr' type='image/vnd.ms-photo'>
<source srcset='myimage.jp2' type='image/jp2'>
<source srcset='myimage.webp' type='image/webp'>
<img srcset='myimage-quant.png' alt='myimage'> </picture>
<source srcset='myimage.jxr' type='image/vnd.ms-photo'>
<source srcset='myimage.jp2' type='image/jp2'>
<source srcset='myimage.webp' type='image/webp'>
<img srcset='myimage-quant.png' alt='myimage'> </picture>
<picture> palaikymą turi tik Chrome, Opera ir naujausia Firefox versija. Bet su picturefill pagalba galima ir kitose naršyklėse. Po skripto užkrovimo pridėkite <head> vietoje:
<script async=true src=/path/to/js/picturefill.js></script>
Suveiks WebP ir SVG formatuose. Kitiems formatams iš kart po tag <script> pridedam:
<script async=true src=/path/to/picturefill.js></script>
<script async=true src=/path/to/jxr.js></script>
<script async=true src=/path/to/jp2.js></script>
<script async=true src=/path/to/jxr.js></script>
<script async=true src=/path/to/jp2.js></script>
Galiausiai paveikslėlis atveriamas skirtingose naršyklėse.
Lyginame JPEG-XR ir Webp
Tuo atveju buvo surinkti skirtingi JPEG paveikslėliai iš įvairių vietų. Ir kiekvienas buvo suspaustas WebP ir JPEG-XR formatais.
Vidutinis JPEG-XR suspaudimas buvo 48 %, o WebP - 60 %. Jeigu peržiūrėti kiekvieną paveikslėlį atskirai, tai 80 % atvejų WebP su užduotim susidoroja 10...25 % geriau nei JPEG-XR.
Kaip matome duomenys skiriasi nuo tų, kurie nurodyti.
Išvada
- JPEG 2000, JPEG-XR ir WebP - naujoviški formatai, kurie negavę deramo pripažinimo internetinėje erdvėje;
- Nei viena naršyklė nepalaiko nors dviejų iš šių formatų;
- Kiekvieną apžvelgtą formatą galime panaudoti pasinaudoję picturefill;
- Priešingai deklaruojamų nudorymų WebP suspaudžia paveikslėlius 10...25 % geriau nei JPEG-XR.
Komentarų nėra:
Rašyti komentarą