U ovom postu Navest ćemo vrste slika za web stranice. To je problem na koji se mora obratiti pažnja jer utiče na vrijeme potrebno za učitavanje stranica i prostora na disku na serveru. To je uvod u drugi u kojem ćemo spomenuti Linux alate za pripremu slika.
Rekao sam vam prije nekoliko dana da sam, na zahtjev starog prijatelja, privremeno nastavio web razvoj (aktivnost koju sam napustio jer nisam mogao podnijeti klijente) i to koristim da vam pričam o različitim rješenjima otvorenog koda.
Vrste slika za web stranice
Stranica ima dvije vrste osnovnog sadržaja, tekstualni i multimedijalni. Informacije o tom sadržaju putuju mrežom u bitnom formatu i pretraživač ih rekonstruiše odvajajući šta su reči od slike, videa ili zvuka.
U slučaju slika, Koriste se različiti formati koji sadrže informacije o lokaciji piksela, bojama, dimenzijama i algoritmu kompresije.
Najčešći formati slika na web stranicama su:
- APNG: Razvila ga je Mozilla kako bi dala mogućnosti animacije PNG formatu. Idealno za animacije koje nisu sinkronizirane s drugim resursima kao što je zvuk. Radi sa mnogo širom paletom boja od GIF-a.
- AVIF: Ne treba ga brkati sa AVI video formatom. Njegovo ime je akronim za AV1 format slike i kodira AV1 bitstreamove u HEIF (High Efficiency Image File Format) kontejner. Ima bolju kompresiju s gubicima od JPG-a i PNG-a i bolju kompresiju bez gubitaka od WebP-a. Podržava animacije i transparentnost. Kao negativnu točku, treba napomenuti da se slika mora u potpunosti preuzeti da bi se pogledala, iako se to nadoknađuje kraćim vremenom preuzimanja.
- bmp: Spominjem klasični Windows format slike, samo da vam kažem da ga nikada ne biste trebali koristiti. Iako postoje neki načini za smanjenje njihove veličine, obično su prilično teške slike.
- GIF: To je format kreiran za komprimiranje 8-bitne grafike bez gubitka. Idealan je za jednostavne animacije i slike na web stranicama namijenjenim mjestima sa sporim vezama, jer vam omogućava da prikažete cijelu sliku, ali u nižem kvalitetu kada nije završeno preuzimanje.
- JPEG: To je format kompresije s gubicima koji se široko koristi za fotografije, iako se ne preporučuje za grafikone ili dijagrame.
- PNG: Takođe se široko koristi, nudi kompresiju bez gubitaka, odlično rukovanje transparentnošću i širu paletu boja od GIF-a.
- svg: Umjesto piksela, ovaj format definira slike nizom naredbi koje ih grade. Idealan je za grafikone i dijagrame koji zahtijevaju precizan prikaz.
- TIFF: Nije široko korišten format jer stvara vrlo teške slike. Iako može biti korisno ako ono što želite da ugradite na stranicu su skenirane slike. Možete pohraniti više slika u jednu datoteku.
- WebP: Ovaj format za fotografije i animacije proizvodi manje datoteke sa ili bez kompresije od JPEG i PNF. Može se koristiti i za kreiranje animacija. Iako ga podržavaju svi moderni pretraživači, stariji nisu kompatibilni.
Koju sliku koristiti za svaki slučaj
- Fotografija: Idealno je koristiti JPEG ili WebP. U slučaju da je veličina kritična, bolje je koristiti drugi, ako želite osigurati kompatibilnost sa starijim pretraživačima, prvi.
- Ikone: Najbolji omjer kompatibilnosti i veličine nudi PNG. WebP se takođe može koristiti (uzimajući u obzir da ga podržavaju samo moderni pretraživači) ILI SVG ako želimo da koristimo vektorsku sliku koju ćemo prikazati uvećanu na drugom mestu na sajtu.
- Snimci ekrana: Uzimajući u obzir da u ovoj vrsti slika treba da se vidi tekst, najbolje je koristiti sliku sa kompresijom bez gubitaka kao što su PNG ili WebP. Možete testirati kako to izgleda koristeći JPEG.
- Dijagrami i grafikoni: Ovdje je, bez sumnje, najbolja opcija SVG, iako možemo staviti sliku u PNG formatu kao rezervnu kopiju.