Tipuri de imagini pentru site-uri web

În această postare vom enumera tipurile de imagini pentru site-uri web. Este o problemă la care trebuie acordată atenție, deoarece influențează timpul necesar pentru încărcarea paginilor și spațiul pe disc de pe server. Este prologul altuia în care vom aminti instrumentele Linux pentru pregătirea imaginilor.

Un site are două tipuri de conținut de bază, text și multimedia. Informațiile despre acest conținut călătoresc prin rețea în format de biți și browserul le reconstruiește prin separarea cuvintelor de imagini, video sau sunet.

In cazul imaginilor se folosesc diferite formate care contin informatii despre locatia pixelilor, culori, dimensiuni si algoritm de compresie.

Cele mai utilizate formate de imagine pe site-uri web sunt:

• APNG: A fost dezvoltat de Mozilla pentru a oferi capabilități de animație formatului PNG. Ideal pentru animații care nu sunt sincronizate cu alte resurse, cum ar fi sunetul. Funcționează cu o paletă de culori mult mai largă decât GIF.
• AVIF: A nu se confunda cu formatul video AVI. Numele său este un acronim pentru AV1 Image Format și codifică fluxurile de biți AV1 în containerul HEIF (High Efficiency Image File Format). Are o compresie cu pierderi mai bună decât JPG și PNG și o compresie fără pierderi mai bună decât WebP. Suportă animații și transparență. Ca punct negativ, trebuie remarcat faptul că imaginea trebuie descărcată complet pentru a fi vizualizată, deși acest lucru este compensat de timpul mai scurt de descărcare.
• BMP: Menționez formatul clasic de imagine Windows, doar pentru a vă spune că nu ar trebui să îl utilizați niciodată. Deși există câteva modalități de a le reduce dimensiunea, acestea tind să fie imagini destul de grele.
• GIF: Este un format creat pentru a comprima fără pierderi grafice pe 8 biți. Este ideal pentru animații și imagini simple de pe site-uri destinate locurilor cu conexiuni lente, deoarece vă permite să afișați imaginea completă, dar la o calitate mai scăzută atunci când nu a terminat descărcarea.
• JPEG: Este un format de compresie cu pierderi utilizat pe scară largă pentru fotografii, deși nu este recomandat pentru grafice sau diagrame.
• PNG: De asemenea, utilizat pe scară largă, oferă compresie fără pierderi, management excelent al transparenței și o paletă de culori mai largă decât GIF.
• SVG: În loc de pixeli, acest format definește imaginile cu o serie de comenzi care le construiesc. Este ideal pentru grafice și diagrame care necesită reprezentare precisă.
• TIFF: Nu este un format utilizat pe scară largă, deoarece generează imagini foarte grele. Deși poate fi util dacă ceea ce doriți să încorporați pe site sunt imagini scanate. Puteți stoca mai multe imagini într-un singur fișier.
• WebP: Acest format pentru imagini statice și animații produce fișiere mai mici cu sau fără compresie decât JPEG și PNF. Poate fi folosit și pentru a crea animații. Deși este acceptat de toate browserele moderne, cele mai vechi nu sunt compatibile.

Ce imagine să folosiți pentru fiecare caz

• Fotografie: Ideal este să folosești JPEG sau WebP. În cazul în care dimensiunea este critică, este mai bine să îl folosiți pe al doilea, dacă doriți să vă asigurați compatibilitatea cu browserele mai vechi, primul.
• Pictograme: cel mai bun raport de compatibilitate și dimensiune este oferit de PNG. Se poate folosi și WebP (ținând cont că doar browserele moderne îl acceptă) SAU SVG dacă dorim să folosim o imagine vectorială pe care o vom afișa mărită în altă parte a site-ului.
• Capturi de ecran: Ținând cont că în acest tip de imagini avem nevoie de text pentru a fi văzut, cel mai bine este să folosiți o imagine cu compresie fără pierderi precum PNG sau WebP. Puteți testa cum arată folosind JPEG.
• Diagrame și grafice: Aici, fără îndoială, cea mai bună opțiune este SVG, deși putem pune o imagine în format PNG ca rezervă.