Exemple obișnuite de tipuri de imagini pe web includ GIF, JPG, și PNG. Fișiere SVG. Aceste formate diferite oferă designerilor web diverse opțiuni pentru optimizarea atractivității vizuale a unui site web.
Imagini GIF
Utilizați fișiere GIF pentru imagini care au un număr mic și fix de culori. Fișierele GIF sunt întotdeauna reduse la cel mult 256 de culori unice. Algoritmul de compresie pentru fișierele GIF este mai puțin complex decât pentru fișierele JPG, dar atunci când este utilizat pe imagini color și text, produce foarte dimensiuni mici de fișiere.
Formatul GIF nu este potrivit pentru imagini fotografice sau imagini cu culori degradate. Deoarece formatul GIF are un număr limitat de culori, gradientele și fotografiile vor sfârși cu bandare și pixelare atunci când sunt salvate ca fișier GIF.
Imagini JPG
Utilizați imagini JPG pentru fotografii și alte imagini care au milioane de culori. Folosește un algoritm de compresie complex care vă permite să creați grafică mai mică pierzând o parte din calitatea imaginii. Aceasta se numește o compresie „cu pierderi”, deoarece o parte din informațiile despre imagine se pierd atunci când imaginea este comprimată.
Formatul JPG nu este potrivit pentru imagini cu text, blocuri mari de culoare solidă și forme simple cu margini clare. Acest lucru se datorează faptului că atunci când imaginea este comprimată, textul, culoarea sau liniile se pot estompa, rezultând o imagine care nu este atât de clară precum ar fi salvată într-un alt format.
Imagini PNG
Formatul PNG a fost dezvoltat ca înlocuitor pentru formatul GIF atunci când a apărut că imaginile GIF vor fi supuse unei redevențe. Grafica PNG are o rată de compresie mai bună decât imaginile GIF, ceea ce duce la imagini mai mici decât același fișier salvat ca GIF. Fișierele PNG oferă transparență alfa, ceea ce înseamnă că puteți avea zone ale imaginilor care sunt fie complet transparente, fie chiar folosesc o gamă de transparență alfa. De exemplu, o umbră verticală folosește o serie de efecte de transparență și ar fi potrivită pentru un PNG (sau ne puteți opri doar folosind umbrele CSS).
Imaginile PNG, precum GIF-urile, nu sunt potrivite pentru fotografii. Este posibil să rezolvați problema bandării care afectează fotografiile salvate ca fișiere GIF folosind culori adevărate, dar acest lucru poate duce la imagini foarte mari. De asemenea, imaginile PNG nu sunt bine acceptate de telefoanele mobile mai vechi și telefoanele cu funcții.
Imagini SVG
SVG înseamnă Scalable Vector Graphic. Spre deosebire de formatele bazate pe raster găsite în JPG, GIF și PNG, aceste fișiere folosesc vectori pentru a crea fișiere foarte mici, care pot fi redate la orice dimensiune, fără a pierde calitatea creșterii dimensiunii fișierului. Acestea sunt create pentru ilustrații precum icoane și chiar sigle.
Pregătirea imaginilor pentru livrarea web
Indiferent de formatul de imagine pe care îl utilizați, asigurați-vă că toate imaginile de pe acel site sunt pregătit pentru livrarea web. Imaginile prea mari pot face ca un site să ruleze încet și să afecteze performanța generală. Pentru a combate acest lucru, aceste imagini trebuie optimizate pentru a găsi echilibrul dintre calitatea înaltă și cea mai mică dimensiune de fișier posibilă la acel nivel de calitate.
Alegerea formatului corect de imagini face parte din luptă, dar și asigurarea că ați pregătit acele fișiere este următorul pas în acest important proces de livrare web.