Există o serie de formate de imagine care pot fi utilizate pe paginile web. Unele exemple comune sunt GIF , JPG și PNG . Fișierele SVG sunt, de asemenea, utilizate frecvent pe site-urile de astăzi, oferind designerilor web încă o altă opțiune pentru imaginea online.
Imagini GIF
Utilizați fișiere GIF pentru imagini care au un număr mic, fix de culori. Fișierele GIF sunt întotdeauna reduse la nu mai mult de 256 de culori unice. Algoritmul de comprimare pentru fișierele GIF este mai puțin complex decât pentru fișierele JPG, dar atunci când este utilizat pentru imagini color și text color, acesta produce dimensiuni foarte mici ale fișierelor .
Formatul GIF nu este potrivit pentru imagini fotografice sau imagini cu culori gradient. Deoarece formatul GIF are un număr limitat de culori, gradientele și fotografiile vor ajunge la bandă și pixelare atunci când vor fi salvate ca fișiere GIF.
Pe scurt, ar trebui să utilizați GIF-uri doar pentru imagini simple cu doar câteva culori, dar puteți utiliza și PNG-uri pentru asta (mai multe despre asta în curând).
Imagini JPG
Utilizați imagini JPG pentru fotografii și alte imagini care au milioane de culori. Utilizează un algoritm complex de comprimare care vă permite să creați grafică mai mică, pierzând o parte din calitatea imaginii. Aceasta se numește comprimare "lossy" deoarece unele informații de imagine sunt pierdute atunci când imaginea este comprimată.
Formatul JPG nu este potrivit pentru imagini cu text, blocuri mari de culoare solidă și forme simple cu muchii clare. Acest lucru se datorează faptului că atunci când imaginea este comprimată, textul, culoarea sau liniile pot să se estompeze, rezultând o imagine care nu este atât de precisă cât ar fi salvată într-un alt format.
Imaginile JPG sunt cele mai utilizate pentru fotografii și imagini care au o mulțime de culori naturale.
Imagini PNG
Formatul PNG a fost dezvoltat ca înlocuitor pentru formatul GIF atunci când a apărut că imaginile GIF ar fi supuse unei taxe de redevență. Graficele PNG au o rată de compresie mai bună decât imaginile GIF care au ca rezultat imagini mai mici decât același fișier salvat ca un GIF. Fișierele PNG oferă transparență alfa, ceea ce înseamnă că puteți avea zone ale imaginilor care sunt fie complet transparente, fie utilizează chiar și o gamă de transparență alfa. De exemplu, o umbră de picătură folosește o gamă de efecte de transparență și ar fi potrivită pentru un PNG (sau pur și simplu să ne oprim folosind umbrele CSS).
Imaginile PNG, cum ar fi GIF-urile, nu sunt potrivite pentru fotografii. Este posibil să încercați problema bandajării care afectează fotografiile salvate ca fișiere GIF utilizând culori reale, dar acest lucru poate duce la imagini foarte mari. Imaginile PNG nu sunt, de asemenea, bine susținute de telefoanele mobile mai vechi și telefoanele cu funcții.
Folosim PNG pentru orice fișier care necesită transparență. De asemenea, folosim PNG-8 pentru orice fișier care ar fi potrivit ca GIF, folosind în schimb acest format PNG.
Imagini SVG
SVG înseamnă Vector Scalable Graphic. Spre deosebire de formatele bazate pe raster, găsite în JPG, GIF și PNG, aceste fișiere utilizează 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. Ele sunt create pentru ilustrații precum icoane și chiar și logo-uri.
Pregătirea imaginilor pentru livrarea pe Web
Indiferent de formatul imaginii pe care îl utilizați, iar site-ul dvs. web va utiliza cu siguranță un număr de formate diferite pe toate paginile sale, trebuie să vă asigurați că toate imaginile de pe acest site sunt pregătite pentru livrarea pe web . Imaginile prea mari pot determina un site să ruleze încet și să influențeze performanța generală. Pentru a combate acest lucru, aceste imagini trebuie să fie optimizate pentru a găsi echilibrul dintre calitatea superioară și cea mai mică dimensiune posibilă la acel nivel de calitate.
Alegerea formatului corect de imagini face parte din bătălie, dar, de asemenea, asigurați-vă că ați pregătit aceste fișiere este următorul pas în acest important proces de livrare web.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard.