Formáty obrázkov: raster, vektor, priehľadnosť a čo naozaj patrí na web

Keď si od klienta vyžiadame logo, dostaneme ho v priemere trikrát. Prvý raz ako JPG vyrezaný zo starého webu, druhý raz ako fotku vizitky a až na tretí pokus ako súbor, s ktorým sa dá pracovať. Nie je to nikoho chyba: prípon obrázkov je dnes zo dvadsať a nikde nie je napísané, ktorá je na čo. Tak to tu rozpíšeme, a to od toho jediného rozdelenia, na ktorom naozaj záleží.

Raster a vektor: jediné rozdelenie, na ktorom záleží

Rastrový obrázok je mriežka pixelov. Súbor v ňom hovorí: pixel na pozícii 418, 203 má takúto farbu. A potom to isté povie ešte milión ráz. Veľkosť je v ňom zapečená: keď ho zväčšíte, musí niekto dopočítať pixely, ktoré nikdy neboli odmerané, a výsledkom je mazanica.

Vektorový obrázok sú pokyny. Z tohto bodu veď krivku sem, uzavri ju a vyplň touto farbou. Nikde v ňom nie je napísané, aký je veľký, lebo to prístroj dopočíta až v momente kreslenia. Preto je ostrý pri šestnástich pixeloch aj na bilborde.

Najlepšie sa to ukáže na našom vlastnom logu. Značka MeaOvis vľavo hore na tejto stránke sú štyri krivky. V HTML je to 596 bajtov SVG zapísaných priamo do stránky, takže prehliadač si ho ani nepýta zvlášť. Ten istý zápis obslúži tridsaťšesť pixelov v menu aj akúkoľvek inú veľkosť.

Pre porovnanie sme tú istú značku vykreslili do PNG s priehľadným pozadím:

PNG rastie s druhou mocninou veľkosti, SVG nerastie vôbec. Pri tisícke pixelov je rastrová verzia dvadsaťtrikrát väčšia a na ďalšej väčšej obrazovke aj tak zmäkne. To je celý ten rozdiel v jednej tabuľke.

A teraz tá menej príjemná polovica: vektor na fotku nefunguje. Vektorový formát opisuje tvary, no fotka žiadne tvary neobsahuje. Je to zmeraná intenzita svetla v milióne bodov. Vašu recepciu nikto nenakreslí krivkami, a keby to niekto skúsil, súbor bude väčší než fotka a bude vyzerať ako plagát.

Z toho vychádza jednoduché pravidlo. Čo je nakreslené, patrí do vektoru. Čo je odfotené, patrí do rastra. Väčšina chýb, ktoré vidíme, vznikne tým, že kresba skončí v rastri.

Priehľadnosť, alebo prečo vám logo v JPG nepomôže

JPG nemá alfa kanál. Nie že by ho zvládal slabo, on ho jednoducho nemá. Každý JPG je plný štvoruholník, a tam, kde logo „nič nemá", má JPG bielu. Položte ho na tmavé pozadie a máte bielu škatuľu okolo loga. Toto je najčastejší dôvod, prečo logo na webe vyzerá zle, a nedá sa to opraviť ničím iným než iným súborom.

PNG alfa kanál má: osem bitov na pixel, teda 256 úrovní priehľadnosti. To stačí na mäkké hrany aj na tiene.

Takže tá večná otázka „JPG alebo PNG" sú v skutočnosti otázky dve. Je to fotka, alebo kresba? A potrebuje to priehľadné pozadie? Pri fotke beriete rodinu JPG, pri kresbe PNG, a keď treba priehľadnosť, PNG bez debaty.

Je tam ešte tretia vec, na ktorú sa zabúda. JPG je stratový, PNG nie je. Pri každom otvorení a uložení JPG o niečo príde. Trikrát uložené logo cez JPG a hrany už majú sivé okraje. PNG vráti presne tie pixely, ktoré ste doň vložili.

Za bezstratovosť sa platí veľkosťou. Odmerali sme to na skutočnej fotke z nášho vlastného webu, 1200 × 801 pixelov, z projektu pre Optik Petrík:

Presné príkazy sú v technickej prílohe dole, aby si to vedel zopakovať každý. Čísla závisia od fotky: stena sa komprimuje inak než lístie. Poradie zostáva.

Všimnite si ten rozdiel medzi JPG a WebP. Je to štvrtina veľkosti pri tej istej fotke a bez viditeľného rozdielu. Na mobilnom pripojení je to presne ten rozdiel medzi stránkou, ktorá sa načíta, a stránkou, z ktorej ľudia odídu skôr, než ju uvidia.

Formáty, ktoré patria na web

SVG je text, a to má aj svoju odvrátenú stranu

SVG sa dá otvoriť v textovom editore a prečítať. Odtiaľ pochádzajú všetky jeho výhody: farbu mu zmeníte v CSS, dá sa vpísať priamo do stránky bez ďalšieho načítania a komprimuje sa spolu s ňou.

Lenže z toho istého dôvodu môže SVG obsahovať skript. Súbor s príponou obrázka, ktorý vie spustiť kód v prehliadači návštevníka, nie je obrázok, je to program. Preto SVG nahraté cudzím človekom nikdy nepodávame ďalej tak, ako prišlo. Vo formulároch, kde ľudia nahrávajú súbory, ho buď neberieme, alebo ho prečistíme. Je to drobnosť, na ktorú sa dá naraziť aj na veľkých weboch.

WebP alebo AVIF

Oba majú priehľadnosť, oba zvládnu animáciu a oba unesú metadáta rovnako dobre ako JPG. AVIF je menší, ale kóduje sa pomalšie a jeho podpora je novšia, aj keď dnes už tiež nad deväťdesiatimi percentami.

My zatiaľ posielame WebP. Jeden súbor, žiadne cúvanie, žiadne dva varianty na každý obrázok. Pri veľkosti stránok, ktoré staviame, by sa tých pár kilobajtov navyše nevyplatilo zaplatiť dvojnásobkom súborov na správu. Pri e-shope s tisíckou produktov je ten výpočet opačný a tam už AVIF so záložným WebP zmysel dáva.

Aby to bolo úplné: obrázky na zdieľanie, teda to, čo sa zobrazí, keď niekto hodí odkaz na náš web do správy, ponechávame v JPG. Čítajú ich siete, nie prehliadače, a tie moderné formáty nemusia zvládnuť.

GIF už nemá dôvod existovať

GIF má 256 farieb na snímku a kompresiu navrhnutú v roku 1987. Tá istá fotka, ktorú sme merali vyššie, má v GIF 271 kB a vyzerá pritom znateľne horšie než 86 kB vo WebP, lebo sa jej farby musia zaokrúhliť na dvestopäťdesiatšesť.

Pri animáciách je to ešte výraznejšie. Nahraté okno aplikácie má v GIF pokojne desaťnásobok toho, čo by malo ako video. Keď niekde GIF ešte vidíte, zvyčajne je to preto, že to tá platforma inak nevezme.

ICO nie je formát, je to obálka

ICO je kontajner, v ktorom sedí niekoľko rastrových veľkostí naraz. V našom favicon.ico sú tri: 48 × 48, 32 × 32 a 16 × 16, všetky 32-bitové, celkovo 15 086 B. Tá istá značka ako favicon.svg má 2 654 B a funguje v akejkoľvek veľkosti.

Držíme oboje. Staršie prehliadače SVG favicon nepoznajú a /favicon.ico si vyžiadajú aj vtedy, keď na ňu nikto neodkazuje.

JPEG XL: ten zaujímavý, na ktorý sa ešte nedá staviť

Technicky je najlepší z celého zoznamu. Je menší než AVIF pri rovnakej kvalite, zvládne postupné načítanie a dokáže niečo, čo nevie nikto iný: existujúci JPG prekomprimuje bezstratovo a vie z neho vyrobiť späť presne ten istý pôvodný súbor. Archív starých fotiek sa tým zmenší bez toho, že by sa na obrázkoch čokoľvek zmenilo.

Zapnutý je v Chrome od verzie 155 a vo Firefoxe od verzie 158, teda v tých, ktoré ľuďom prichádzajú práve teraz. Safari ho má čiastočne od verzie 17. Edge ho nemá. Celková podpora je okolo šesťdesiatich percent.

To je na sledovanie, nie na stavanie. Šesťdesiat percent znamená, že štyrom ľuďom z desiatich by sa obrázok nezobrazil, takže by aj tak musel existovať druhý súbor. Keď sa Edge pridá, prepočítame to znova.

Formáty, ktoré na web nepatria, a aj tak ich dostávame

Pomáha rozdeliť si ich podľa toho, na čo vlastne sú. Sú tri skupiny a mieša sa to neustále.

• Pracovné. PSD, AI, Affinity. Vrstvy, masky, história úprav. Nie je to obrázok, je to projekt, a patrí grafikovi.
• Výmenné a tlačové. PDF, EPS, TIFF. Pre tlačiareň, výrobcu reklamy, vyšívačku.
• Doručovacie. SVG, WebP, AVIF, JPG, PNG. Pre návštevníka.

Na web ide výhradne tá tretia skupina. Tu je zvyšok a prečo:

Pri HEIC stojí za to doplniť, prečo to tak je. Nie je to nedbanlivosť prehliadačov: HEIC má vnútri kodek HEVC a ten má zložitý patentový balík. Práve preto sme ho museli zvlášť doriešiť pre MeaReal a MeaCara. Človek, ktorý fotí byt telefónom, nemá dôvod vedieť, čo je kodek, a nemá sa to dozvedieť chybovou hláškou. Podrobne je to v článku Čo o vás prezradí fotka.

Čo nám poslať, keď od vás chceme logo

Táto časť je tu preto, že ju pri každom projekte hovoríme znova.

1. Ideálne vektor. SVG, AI alebo EPS. Z vektoru vyrobíme každú veľkosť, favicon, tlač aj vyšívanie, a nikdy sa to nerozsype.
2. Keď máte len raster, pošlite ten najväčší PNG s priehľadným pozadím, aký existuje. Nie JPG stiahnutý z vlastného webu, nie snímku obrazovky a nie fotku vizitky. Z tých troch sa už nedá nič zachrániť.
3. Keď nemáte nič, povedzte to rovno. Prekresliť logo zo štyristopixelového JPG do vektoru je hodina alebo dve práce. Je to lacnejšie ako zistiť o tri mesiace neskôr, že výrobca tabule na predajňu nemá z čoho vychádzať.

Pri fotkách je to naopak jednoduché: pošlite originály z fotoaparátu alebo z telefónu, čo najväčšie a neupravené. Zmenšovanie a formát doriešime my. Fotka, ktorú ste už raz zmenšili pre Facebook, sa späť zväčšiť nedá.

Na záver

Keď si z článku odnesiete jednu vetu, nech je to táto: čo je nakreslené, patrí do vektoru, čo je odfotené, do rastra, a pracovný súbor nejde na web nikdy.

A keď chcete vedieť, čo na obrázkoch posiela váš vlastný web a koľko to váži, vypíše to audit webu zdarma bez toho, aby ste museli hľadať prípony ručne.

Technická príloha

Tu je to, čo by článok inak zdržiavalo, ale bez čoho sa tie čísla nedajú overiť.

Ako sme merali

Zdroj bola jedna fotka z tohto webu, 1200 × 801 pixelov, prevedená do PNG. Z toho istého PNG potom vznikli všetky ostatné súbory:

sips -s format jpeg -s formatOptions 80 orig.png --out a.jpg
sips -s format heic -s formatOptions 80 orig.png --out a.heic
cwebp -q 80 orig.png -o a.webp
avifenc -q 60 --speed 4 orig.png a.avif

Dve poznámky k poctivosti tých čísel. Číselné stupnice kvality nie sú medzi formátmi porovnateľné, preto je pri AVIF uvedených 60 a nie 80; nastavenia sú vypísané práve preto, aby bolo vidieť, čo sa s čím porovnáva. A zdrojová fotka už raz stratovou kompresiou prešla, takže bezstratové PNG je o niečo väčšie, než by vyšlo z originálu z fotoaparátu. Poradie formátov a rádové rozdiely to nemení.

Veľkosti PNG pre logo vznikli vykreslením favicon.svg do zadanej veľkosti, teda z toho istého vektoru.

Čo je alfa kanál a prečo práve osem bitov

Každý pixel má tri čísla: koľko je v ňom červenej, zelenej a modrej. Alfa je štvrté číslo a hovorí, nakoľko je ten pixel vôbec prítomný. Nula je úplne priehľadný, 255 úplne krycí.

Osem bitov dá 256 úrovní a to je dosť na mäkký prechod aj na tieň. PNG má aj lacnejšiu podobu, paletu s jednou priehľadnou farbou, kde pixel buď je alebo nie je a nič medzi tým neexistuje. Odtiaľ pochádzajú tie zubaté okraje starých PNG.

GIF má jedine tú lacnú podobu, teda jeden jediný bit priehľadnosti. Práve preto má animovaný GIF na farebnom pozadí okolo seba svetlý obrys.

Prečo v JPG priehľadnosť neexistuje

JPEG vznikol v roku 1992 na fotografie a jeho stavba to presne odráža. Obrázok si rozloží na jasovú zložku a dve farebné, časť farebnej podrobnosti zahodí, lebo oko ju nevidí, a zvyšok komprimuje v blokoch osem na osem pixelov.

V takej stavbe nie je kam zapísať, že pixel tam nie je. Nie je to vynechaná funkcia, ale dôsledok toho, na čo bol formát navrhnutý. To isté zahadzovanie farebnej podrobnosti je dôvod, prečo tenká červená linka na bielom pozadí vyzerá v JPG zašpinene.

Kontajner, kodek a prípona nie sú to isté

Toto rozlíšenie vysvetľuje väčšinu zmätku okolo moderných formátov. Kontajner je obálka, kodek je spôsob, akým sú obrazové dáta vnútri stlačené, a prípona hovorí o obálke, nie o obsahu.

• HEIC je kontajner HEIF s kodekom HEVC vnútri.
• AVIF je ten istý rod kontajnera s kodekom AV1.
• WebP je kontajner RIFF s kodekom VP8 pri stratovom a VP8L pri bezstratovom variante.
• AI má vnútri PDF, nie nejaký vlastný Adobe vektor.

Praktický dôsledok: dva súbory s rovnakou príponou sa môžu správať rozdielne a prípona sama nestačí na rozhodnutie, či to prehliadač zobrazí.

Prípony, ktoré sa pletú

Ako sa obrázok ponúkne s možnosťou cúvnuť

Keď chcete poslať moderný formát a zároveň mať záložný pre prehliadače, ktoré ho nepoznajú, robí sa to prvkom picture. Prehliadač zoberie prvý zdroj, ktorému rozumie, a zvyšok preskočí:

<picture>
  <source srcset="/img/recepcia.avif" type="image/avif">
  <source srcset="/img/recepcia.webp" type="image/webp">
  <img src="/img/recepcia.jpg" alt="Recepcia predajne"
       width="1200" height="801" loading="lazy" decoding="async">
</picture>

Na tomto webe to nepoužívame a je správne povedať prečo. Posielame jeden WebP, lebo pri necelej polstovke stránok v každom jazyku a necelej tridsiatke obrázkov by sme tromi súbormi na každý obrázok zaplatili viac práce a viac miest na chybu, než koľko by sa ušetrilo kilobajtov. Pri e-shope sa ten výpočet obracia a vtedy tri varianty na obrázok zmysel dávajú.

Atribúty width="1200" height="801" tam majú byť vždy, aj keď obrázok v CSS rozťahujete inak. Prehliadač si z nich dopredu vyhradí miesto a stránka pod čitateľom neposkočí, keď sa obrázok dotiahne.

A jedna vec, ktorá sa stáva aj nám

Pri písaní tohto článku sme si prešli vlastnú zložku s obrázkami a našli v nej sms-api.af: pracovný súbor Affinity s veľkosťou 1,1 MB, ktorý tam nemá čo robiť. Na server sa nikdy nedostal, lebo ho nasadzovanie neberie, takže sa nič nestalo.

Ale je to presne tá chyba, o ktorej je celý tento článok, a stáva sa aj ľuďom, ktorí to vedia. Pracovné súbory majú mať vlastnú zložku mimo toho, čo ide na web.

Súvisiace čítanie

Čo všetko je vo fotke zapísané okrem obrazu: Čo o vás prezradí fotka: poloha, rýchlosť pohybu aj sériové číslo prístroja.

Prečo na veľkosti obrázkov tak záleží: Core Web Vitals ľudskou rečou: LCP, INP a CLS.

A keď chcete vedieť, ako je na tom váš web teraz: Audit webu zdarma.