V tomto príspevku Uvedieme zoznam typov obrázkov pre webové stránky. Je to problém, ktorému je potrebné venovať pozornosť, pretože ovplyvňuje čas potrebný na načítanie stránok a miesto na disku na serveri. Je to prológ ďalšieho, v ktorom spomenieme linuxové nástroje na prípravu obrázkov.
Pred niekoľkými dňami som vám povedal, že na žiadosť starého priateľa som dočasne obnovil vývoj webu (činnosť, ktorú som opustil, pretože som nemohol vystáť klientov) a používam to na to, aby som vám povedal o rôznych open source riešeniach.
Typy obrázkov pre webové stránky
Stránka má dva typy základného obsahu, textový a multimediálny. Informácie o tomto obsahu putujú po sieti v bitovom formáte a prehliadač ich rekonštruuje oddelenie toho, čo sú slová od obrázkov, videa alebo zvuku.
V prípade obrázkov, Používajú sa rôzne formáty, ktoré obsahujú informácie o umiestnení pixelov, farbách, rozmeroch a kompresnom algoritme.
Najpoužívanejšie obrazové formáty na webových stránkach sú:
- APNG: Bol vyvinutý spoločnosťou Mozilla, aby umožnil animáciu formátu PNG. Ideálne pre animácie, ktoré nie sú synchronizované s inými zdrojmi, ako je zvuk. Pracuje s oveľa širšou paletou farieb ako GIF.
- AVIF: Nemal by sa zamieňať s formátom videa AVI. Jeho názov je skratkou pre AV1 Image Format a kóduje AV1 bitstream do kontajnera HEIF (High Efficiency Image File Format). Má lepšiu stratovú kompresiu ako JPG a PNG a lepšiu bezstratovú kompresiu ako WebP. Podporuje animácie a transparentnosť. Ako negatívny bod je potrebné poznamenať, že obrázok sa musí stiahnuť celý, aby ho bolo možné zobraziť, aj keď je to kompenzované kratším časom sťahovania.
- bmp: Spomínam klasický obrazový formát Windows, len aby som vám povedal, že by ste ho nikdy nemali používať. Hoci existuje niekoľko spôsobov, ako zmenšiť ich veľkosť, zvyčajne ide o dosť ťažké obrázky.
- GIF: Je to formát vytvorený na kompresiu 8-bitovej grafiky bez straty. Je ideálny pre jednoduché animácie a obrázky na weboch určených pre miesta s pomalým pripojením, pretože umožňuje zobraziť celý obrázok, ale v nižšej kvalite, keď sa nedokončí sťahovanie.
- JPEG: Ide o stratový kompresný formát široko používaný pre fotografie, aj keď sa neodporúča pre grafy alebo diagramy.
- PNG: Tiež široko používaný, ponúka bezstratovú kompresiu, vynikajúce spracovanie priehľadnosti a širšiu paletu farieb ako GIF.
- svg: Namiesto pixelov tento formát definuje obrázky pomocou série príkazov, ktoré ich vytvárajú. Je ideálny pre grafy a diagramy, ktoré vyžadujú presné znázornenie.
- TIFF: Nie je to široko používaný formát, pretože generuje veľmi ťažké obrázky. Aj keď to môže byť užitočné, ak to, čo chcete vložiť na stránku, sú naskenované obrázky. Do jedného súboru môžete uložiť viacero obrázkov.
- WebP: Tento formát pre statické obrázky a animácie vytvára menšie súbory s kompresiou alebo bez nej ako JPEG a PNF. Dá sa použiť aj na vytváranie animácií. Hoci ho podporujú všetky moderné prehliadače, staršie nie sú kompatibilné.
Aký obrázok použiť pre každý prípad
- Fotografovanie: Ideálne je použiť JPEG alebo WebP. V prípade, že je veľkosť kritická, je lepšie použiť druhý, ak chcete zabezpečiť kompatibilitu so staršími prehliadačmi, prvý.
- Ikony: Najlepšiu kompatibilitu a pomer veľkosti ponúka PNG. Dá sa použiť aj WebP (berúc do úvahy, že ho podporujú len moderné prehliadače) ALEBO SVG, ak chceme použiť vektorový obrázok, ktorý ukážeme zväčšený inde na stránke.
- Snímky obrazovky: Ak vezmeme do úvahy, že v tomto type obrázkov potrebujeme, aby bol text viditeľný, je najlepšie použiť obrázok s bezstratovou kompresiou, ako je PNG alebo WebP. Ako to vyzerá, si môžete vyskúšať pomocou JPEG.
- Diagramy a grafy: Tu je bezpochyby najlepšou voľbou SVG, aj keď ako zálohu môžeme vložiť obrázok vo formáte PNG.