Imaginile contribuie cel mai mult la atractivitatea vizuală a site-ului dvs. și reprezintă de obicei cea mai mare parte a lățimii de bandă utilizată la încărcarea paginilor web. Folosind o combinație de tipuri de imagini și tehnici mai noi găsite în HTML5, cum ar fi canvas, și reproducerea imaginilor folosind CSS, putem echilibra calitatea și dimensiunea pentru a reduce nevoile noastre de lățime de bandă și a permite site-ului nostru să fie mai flexibil.
Formate
Imaginile sunt fișiere, la fel ca orice alt document de pe computer, dar pot fi codificate și formatate diferit pentru a reproduce imaginea pe care doriți să o vedeți. Acestea sunt denumite grafice raster și grafice vectoriale. Aceste formate reprezintă două metode foarte diferite de crearea unei imagini.
Raster
Fișierele imagine cu care majoritatea dintre noi sunt deja familiarizați sunt de obicei în format raster. Exemple de acestea sunt JPEG, GIF și BMP. Când interacționăm cu fotografiile făcute cu camere digitale, de exemplu, avem de-a face cu fișiere JPEG sau JPG. Fișierele raster recreează o imagine prin înregistrarea valorii de culoare a pixelilor, care reprezintă cel mai mic punct unic de pe un ecran căruia îi poate fi atribuită o culoare de către afișaj. Cu cât este mai mare numărul de pixeli (sau densitatea, măsurată ca pixeli pe inch) se traduce în cât de clară este imaginea și cât de mare poate fi redată fără a pierde calitatea.
Numărul de culori disponibile în fișierul imagine se bazează pe lungimea valorii disponibile pentru fiecare punct. Dacă am permite doar un singur caracter binar pentru fiecare punct de pixel, am putea menține dimensiunea fișierului cât mai mică posibil. Totuși, aceasta ar însemna că ne putem reprezenta imaginea doar în alb și negru (binarul ne permite doar două opțiuni, 0 sau 1, așa că putem reprezenta doar două culori). Când permitem valorilor mai lungi să reprezinte un singur punct, putem atribui valorilor o gamă mai mare de culori. Odată ce le mărim, totuși, schimbăm dimensiunile mai mici ale imaginilor pentru a avea imagini mai colorate. Imaginile mari pot încetini experiența utilizatorului, iar dacă încărcarea durează prea mult, utilizatorii vor pleca.
În mod tradițional, ne-am confruntat cu acest compromis utilizând diferite formate de imagine în diferite zone ale site-ului nostru. În timp ce rezervăm JPG pentru imaginile sau fotografiile noastre mai mari, putem folosi GIF pentru pictograme și indicatori mai mici. GIF-urile ne limitează la 256 de culori, dar din moment ce majoritatea pictogramelor folosesc puține culori, putem valorifica beneficiile acestui format aici. Este important să rețineți că imaginile raster își vor pierde rapid calitatea atunci când sunt redate la dimensiuni mai mari decât lățimea sau înălțimea imaginii originale.
Vectoriale
Imaginile vectoriale stochează informații despre culori și locații ca definiții ale unghiurilor, liniilor și curbelor în format matematic. Avantajul unei imagini formatată vectorial este că poate fi mărită atât în sus, cât și în jos, fără distorsiuni sau degradare a calității. Acest lucru se datorează faptului că imaginea este „desenată” de browser de fiecare dată când este încărcată, iar procesorul efectuează pașii necesari pentru a recrea imaginea. Deoarece imaginea poate fi scalată, același fișier imagine poate fi desenat foarte mare sau foarte mic, fără a modifica dimensiunea fișierului. Vom căpăta o experiență practică în modul în care sunt desenate imaginile vectoriale atunci când ne uităm la noile funcții Canvas în HTML.
Tabelul 3 Formate de imagine
| Format | Compresie | Platforme | Culori | Note |
| JPEG (Joint Photographic Experts Group) | Cu pierderi | Unix, Win, Mac | 24-bit per pixel; 16.7 milioane culori. | JPEG este un algoritm de compresie; formatul este de fapt JFIF (JPEG File Interchange Format) |
| GIF (Graphic Interchange Format) | Fara pierderi | Unix, Win, Mac | 8-bit; 256 culori (paleta web 216). Permite transparența. | Algoritmul de compresie LZW dezvoltat de CompuServe; brevet deținut acum de Unisys, care taxează pentru utilizarea codului în programele de grafică. Odată ce Unisys a început să-și impună brevetul (în 1995), programele au început să se mute în PNG. |
| BMP (Bitmap graphics) | Necomprimată | Win | 24-bit; 16.7 milioane culori. | Ca toate formatele necomprimate, aceste fișiere sunt foarte mari. |
| PICT | Fara pierderi | Mac | Compresie foarte mică; fișiere mari | |
| TIFF (Tag Interchange File Format) | Fara pierderi sau necomprimată | Unix, Mac, Win | TIFF-LZW folosește compresiile proprietare LZW (consultați GIF). | |
| PNG (Portable Network Graphics) | Fara pierderi | Unix, Mac, Win | 48-bit; “culoare reală” plus transparență | Va înlocui probabil GIF-ul. Acceptat în IE, NN 4 și versiuni ulterioare. O specificație WC3. |
Este posibil să observați coloana de compresie. Acesta este actul de eliminare sau modificare a datelor care reprezintă un fișier într-un mod care face dimensiunea totală a fișierului mai mică. Procedând astfel, putem transmite fișiere mai rapid și vor ocupa mai puțin spațiu în memorie. Când discutăm despre compresie în ceea ce privește grafica, trebuie să ne gândim dacă va avea un rezultat cu pierderi sau fără pierderi. Un rezultat fără pierderi înseamnă că tehnicile de compresie utilizate nu elimină datele din copia originală, astfel încât să putem restabili imaginea la dimensiunea și aspectul original exact. O structură de compresii cu pierderi poate duce la o compresie mai mare, dar obține un avantaj suplimentar prin eliminarea informațiilor din fișier.
De exemplu, imaginează-ți o poză cu tine și prietenii tăi pe plajă, cu un cer albastru senin în spatele tău. Datele din fișierul imagine vor măsura „albastrul” cerului în diferite culori de albastru, la un nivel mai mare decât îl poate distinge ochiul. Făcând o medie a albastrui și făcând ca mai mulți pixeli ai cerului să aibă aceeași culoare, am eliminat informațiile. Anumite niveluri de compresie cu pierderi vor fi în continuare imposibil de distins de original, dar la orice nivel, versiunea fișierului comprimată cu pierderi nu va putea fi restabilită la original, deoarece valorile suplimentare au fost eliminate.
Care e mai bun? Ca de obicei, depinde de intenția ta. Dacă imaginea poate fi comprimată cu pierderi și este încă acceptabilă pentru dvs. și pentru utilizatorii dvs., iar a avea cele mai mici dimensiuni posibile de fișiere (bun, desigur, pentru dispozitivele mobile) este o prioritate, atunci mergeți pe ea. Scenariile optimizate pentru calitate vor necesita probabil o compresie fără pierderi, cum ar fi site-urile care folosesc imagini mari ca fundal.
Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu
Filosofia tehnologiei blockchain – Ontologii
O incursiune în ontologiile și implicațiile tehnologiei revoluționare blockchain.
Traducere şi traducători
Ghidul esențial pentru toți cei pasionați de arta traducerii și complexitatea comunicării interculturale.
Big Data: Modele de afaceri – Securitatea megadatelor
Nu rata oportunitatea de a rămâne competitiv într-o lume bazată pe date!
Lasă un răspuns