Formate de imagine mai bune pentru site-ul dvs. web
Imaginile sunt o parte fundamentală a oricărui site web. Dar atunci când lucrați cu ei, trebuie luat în considerare echilibrul necesar între calitatea lor și dimensiunea descărcării lor. Un site web cu imagini de înaltă calitate va consuma multă lățime de bandă și va fi lent pentru a reda în browsere, ceea ce poate penaliza comportamentul: utilizatorii vor părăsi site-ul web dacă durează prea mult să fie afișat.
Formate de imagine utilizate pe web
Prin urmare, este necesar să cunoașteți diferitele formate de imagine care pot fi utilizate pe un site web și să știți când să alegeți unul sau altul. Cele mai utilizate formate în prezent sunt trei: JPG sau JPEG, GIF Da PNG. Toate cele trei sunt formate de imagine bitmap, adică reprezintă o imagine prin codificarea valorilor culorilor și transparenței fiecărui pixel spre deosebire de formatele vectoriale (cum ar fi SVG) care stochează linii, puncte și poligoane pentru a crea imaginea.
Marele avantaj al formatelor bitmap este că permit o compresie excelentă a informațiilor, rezultând fișiere ușoare. Cu toate acestea, atunci când le măriți, imaginea poate ajunge distorsionată sau neclară, arătând pixelii. Prin urmare, a ști cum să optimizezi imaginile astfel încât să apară de bună calitate și să aibă octeți mici este o sarcină care necesită îngrijire și cunoștințe.
O imagine bitmap nu este altceva decât un grilă cu două dimensiuni de pixeli (înălțime și lățime). De exemplu, o imagine de 200 x 200 pixeli are un total de 40.000 pixeli, fiecare dintre aceștia având o valoare RGBA (roșu, verde, albastru, canal alfa sau transparență), iar aceste informații vor ocupa un total de 4 octeți (32 biți) pentru fiecare pixel. Deci, o imagine de 200 x 200, fără nicio optimizare sau compresie, va avea 160.000 de octeți = 156 Kbyte în dimensiune. Puteți vedea cu ușurință că această dimensiune este prea mare pentru standardele web într-o imagine mică. De aceea sunt utilizate formate de imagine care comprimă informațiile.
Apoi, vor fi descrise cele trei formate de imagine și apoi vor fi date o serie de îndrumări cu privire la momentul utilizării fiecăruia dintre ele. În cele din urmă, vom vedea cum putem optimiza imaginile folosind software de editare a imaginilor, cum ar fi Adobe Photoshop sau GIMP.
JPG sau JPEG (grupul comun de experți în fotografii)
Imaginile au de obicei extensie .jpg sau .jpeg și este cel mai utilizat format astăzi. Este un algoritm de compresie cu pierderi sau cu pierderi (care nu permite reconstrucția originalului din fișierul comprimat), care se bazează pe faptul că ochiul uman captează schimbările de luminozitate mai bine decât schimbările de culoare și că percepe mai bine aceste modificări în zone de culoare omogenă decât pe marginile obiectelor din imagine. Algoritmul matematic pe care se bazează elimină toate informațiile care nu sunt esențiale pentru ochiul uman.
JPG Dedică, în principiu, 24 de biți fiecărui pixel pentru a-și stoca informațiile, cu care poate lucra cu mai mult de 16 milioane de culori diferite. Dar atunci când aplicăm înțelegerea, putem alege un număr de parametri pentru a controla conversia, cum ar fi gradul de compresie, indicat printr-un procent. De regulă, se consideră că 80% este o imagine de înaltă calitate, 50% de calitate medie și 10% de calitate scăzută. Pe web este obișnuit să lucrați cu valori cuprinse între 70 și 80%.
În plus, JPG vă permite să salvați imagini în modul progresiv, cu alte cuvinte, imaginea este încărcată în mai multe faze, o opțiune de interes atunci când se lucrează cu conexiuni lente, deși produce fișiere ceva mai mari. Este, de asemenea, posibil înmoaie imaginea pentru a evita marginile excesiv de pixelate, deși acest lucru cauzează de obicei estomparea întregii imagini.
Format JPG Este recomandat pentru lucrul cu imagini cu mii sau milioane de culori: fotografii, imagini cu gradiente. Dar nu este potrivit pentru imagini cu text, forme simple sau care conțin blocuri mari de o singură culoare, deoarece produce margini pline de zgomot. De asemenea, o imagine JPEG nu poate suporta transparența.
GIF (format grafic de schimb)
A fost primul format de imagine folosit pe Web, deoarece a fost creat gândind tocmai la o metodă de comprimare a imaginilor care să fie partajată pe rețelele de calculatoare. Imaginile au extensia .gif.
Spre deosebire de JPEG, GIF este un format de compresie fără pierderi, adică permite reconstituirea originalului, deoarece salvează informațiile despre culoare și transparență ale fiecărui pixel și nu distorsionează imaginea. Cu toate acestea, funcționează doar cu 8 biți pentru fiecare pixel, ceea ce vă permite să aveți doar 256 de culori diferite. Confruntat cu această limitare a culorilor, GIF folosește o serie de metode de dithering pentru a simula culorile care nu există în paleta de culori limitată pe care GIF o are disponibilă.
Dar GIF are o caracteristică care îl face unic printre aceste trei formate de imagine: să fim animați. Un GIF poate avea mai multe imagini sau cadre care sunt pictate în diferite perioade de timp simulând un videoclip. Din acest motiv, utilizarea sa crește în prezent pe web. De asemenea, este posibil să efectuați imagini cu fundal transparent deși într-o implementare oarecum limitată, deoarece poate avea doar două valori: toți pixelii sunt transparenți sau opaci, nu puteți specifica o valoare de transparență pentru fiecare dintre ei.