In acest articol nu vom intra in detalii tehnice privitoare la fisiere de tip imagine. Nu acesta este scopul prezentului articolul, pentru detalii tehnice privitoare la acestea, aveti la dispozitie o multime de materiale online, ce detaliaza metodele de compresie/decompresie, istoria, codajul aritmetic, algoritmi etc.
Pe noi ne intereseaza sa luam in discutie, succint in acest articol, cateva sfaturi si puncte de vedere menite sa calauzeasca o persoana ce se afla in situatia de a alege un format de fisier sau altul si nu stie care sunt diferentele practice, aplicabile. De ce sa alegem .jpg/jpeg, de ce nu .png, cand .gif sau .bmp etc. Care sunt cele mai intalnite fisiere imagine in designul web, in ce programe se pot modifica, ce alegem pentru un logo, buton, cover, header, icon-uri?
jpg: fisier imagine raster
- suporta nivele diferite de compresie(si in functie de compresie, avem marimea fisierului dar si calitatea sa)
- pana la 16.7 milioane culori
- nu suporta transparenta
- tip fisier: jpg
- calitate: fisierul original, necompresat
- rezolutie: 500×717
- adancime culoare: 24 biti
- marime: 119 kb
- tip fisier: jpg
- calitate: 50%
- rezolutie: 500×717
- adancime culoare: 24 biti
- marime: 29.3 kb
- tip fisier: jpg
- calitate: fisierul fisierul compresat 10%
- rezolutie: 500×717
- adancime culoare: 24 biti
- marime: 14.2 kb
Dupa cum se poate observa:
- cu cat creste calitatea, creste si marimea fisierului si reciproca este valabila
- nu suporta transparenta
.GIF .PNG .BMP
gif: fisier imagine raster
- suporta animatie
- suporta transparenta si metadata
- in grafica web este folosit in principal pentru butoane si bannere
- rezolutie: 500×717
- marime: 131 kb
- adancime culoare: 256
png: fisier imagine raster
- nu suporta nivele diferite de compresie: doar 8 sau 24 biti (png 32 biti inseamna: 8 biti rosu, 8 biti albastru, 8 biti verde si 8 biti transparenta).
- suport transparenta!
- probabil cel mai folosit format in grafica destinata web-ului
- rezolutie: 500×717
- marime: 409 kb
- adancime culoare: 32 biti
bmp: fisier imagine raster
- stocheaza datele referitoare la culoare pentru fiecare pixel al imaginii, fara nici un fel de compresie
- calitate foarte bune insa marimea fisierului rezultat este foarte mare (nu se foloseste din acest motiv in grafica destinata web-ului)
- nu suporta transparenta
- rezolutie: 500×717
- marime: 1049 kb
- adancime culoare: 24 biti
Comparatie .png vs . jpg
png:
- NU suporta nivele de calitate
- suporta transparenta
- marime: 409 kb
- rezolutie: 500×716
- adancime culoare: 32 biti
jpg:
- calitate 100%
- NU suporta transparenta
- marime: 172 kb
- rezolutie: 500×716
- adancime culoare: 24 biti
Concluzii:
- cand aveti nevoie de transparenta:
- in cazul fisierelor foarte mici (butoane, bannere, icoane) folositi .gif (in functie de gradient 128 sau 256 de culori)
- in cazul fisierelor mai mari folositi .png
- cand nu aveti nevoie de transparenta:
- in cazul fisierelor foarte mici ( butoane, bannere, icons) folositi .jpg, probati la nivel vizual si jucati-va cu calitatea imaginii, putand alege intre 10% – 100% calitate
- in cazul fisierelor medii (intre 150 si 300 pixeli) folositi un nivel de calitate de minim 30%
- in cazul fisierelor de peste 300 pixeli, folosit un nivel de minim 50% calitate, in functie de scop, detaliile imaginii etc.
In principiu, nu aveti de ce sa folositi in cazul graficii web, fisiere .bmp
Intotdeauna incercati sa imbinati calitatea cu marimea, adancimea de culoare si rezolutia (cu rezultate directe in privinta vitezei de incarcare).
Pentru compresia fisierelor:
Bineinteles insa ca solutia Adobe Photoshop reprezinta cea mai buna optiune.
Marime fisiere imagini la aceeasi rezolutie:
- bmp
- png
- jpg
- gif
Tineti cont de faptul ca adancimea de culoare difera (256 biti la .gif respectiv 32 biti la .png)
Leave a Reply
Want to join the discussion?Feel free to contribute!