Home » Articole » Articole » Calculatoare » Dezvoltarea web » Web design » Web design – Grafica – Formate de imagini raster și imagini vectoriale

Web design – Grafica – Formate de imagini raster și imagini vectoriale

postat în: Imagini, Web design 0

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

Electronic Warfare and Artificial Intelligence
Electronic Warfare and Artificial Intelligence

Sfetcu, Nicolae (2024), Electronic Warfare and Artificial Intelligence, MultiMedia Publishing, ISBN 978-606-033-844-4, DOI: 10.58679/MM14430, https://www.telework.ro/ro/e-books/electronic-warfare-and-artificial-intelligence/   Electronic warfare is a critical component of modern military operations and has undergone significant advances in recent years. This book provides an overview of … Citeşte mai mult

Nu a fost votat $4.99 Selectează opțiunile
PowerPoint - Ghid pentru începători
PowerPoint – Ghid pentru începători

PowerPoint este un instrument excelent pentru prezentări de orice fel, fie în clasă, fie în cadrul unei conferințe. O prezentare PowerPoint este formată dintr-o serie de diapozitive care pot fi proiectate (afișate electronic) sau tipărite într-o varietate de formate de … Citeşte mai mult

Nu a fost votat $0.00 Selectează opțiunile
Ghid Facebook pentru utilizatori
Ghid Facebook pentru utilizatori

Facebook este, de departe, cea mai cunoscută reţea socială, care permite utilizatorilor înregistraţi să îşi creeze profiluri proprii, să încarce şi să partajeze cu prietenii fotografii şi clipuri video, să trimită mesaje şi să păstreze legătura cu prietenii, familia şi … Citeşte mai mult

Nu a fost votat $1.99 Selectează opțiunile

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *