E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Fotografie

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

MEDIA  /  Fotografie  /  Diverse (11)

GIF - JPG - PNG

17.05.2008
GIF - JPG - PNG

Cele mai importante diferente dintre formatele fotografiilor

Total vizualizari: 18059 18059 afisari   |   Comentarii  1   |   Rating   |   (4 voturi)   |   Timp necesar: 20 min 20 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Photoshoptutorials.ws  
Autor:  Scott Frangos
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1 2 »
comenteaza printeaza

Tipul de fisiere folosite in sistem Web.
O scurta privire asupra celor mai importante formate grafice folosite pe web. (Excludem Flash, pentru ca necesita un plug-in, desi suntem de acord ca a devenit o a IV-a forta majora in realizarea site-urilor). GIF, JPEG si PNG.
Vom compara cele 3 formate, apoi le vom folosi si iti vom arata concret diferentele dintre cele 3 formate. (imagini preluate de la PickleZone.com)

O scurta comparatie intre tipul de fisiere.

GIF (Graphic Interchange Format)
Dezvoltat de CompuServe in anii 1980, acest format ofera un maxim de 256 de culori si inca este folosit pentru animatii simple in componenta paginilor web. Imaginile GIF nu contin zgomot in cadrul imaginilor. Cartile sau alte site-uri de web design recomanda folosirea lor doar in anumite situatii.

JPEG (Joint Photographic Experts Group)
Fotografii profesionisti si programatorii au gasit o solutie la inceputul anilor 90 de a incorpora milioane de culori intr-o imagine, cu posibilitatea de a comprima imaginea astfel incat sa o poti salva la calitatea dorita de tine (cu cat e mai mic fisierul cu atat calitatea e mai mica).

PNG - 8&24 (Portable Network Graphic)
Dezvoltat pe la sfarsitul anilor 90 pentru a oferi imbunatatiri atat la formatul GIF cat si la JPEG, PNG-ul de 8-bit ofera maximul de 256 de culori, dar cu o gama mai mare a optiunilor de transparenta fata de GIF. Trebuie tinut cont totusi ca unele optiuni ale transparentei introduse in formatul PNG nu au fost implementate in Internet Explorer 6.0 sau versiunile anterioare. Versiunea de 24-bit, ofera o gama de milioane de culori, ca si JPEG, dar nu poate reduce marimea fisierului asa de mult ca JPEG-ul pentru ca foloseste metode de compresie "lossless" (fara pierdere de date)

Prin comparatia de mai sus putem sa dezvoltam unele formate grafice in functie de linia de lucru.

- GIF sau PNG-8 functioneaza perfect in cazul detaliilor minore in ilustratii simple (mai mici de 256 de culori), si pentru grafice web care contin text (marginile textului ramane ascutit)
- JPEG (abreviat si ca jpg) este cel mai folosit doarece are posibilitatea de a arata fotografii cu continut de milioane de culori, la o marime a fisierului destul de mica.
- GIF este inca formatul care se foloseste pentru animatiile simple (PNG-ul nu este compatibil pentru animatii). Insa in ultimul timp Flash-ul castiga din ce in ce mai mult teren in defavoarea GIF-ului, oferind mult mai multe optiuni de animatii.
- PNG-24, desi e mai mare ca marime de fisier, este o alegere buna daca nu doresti sa pierzi calitatea din fotografii. (reducerea detaliilor si introducerea unor pixeli ca zgomot care nu se gaseau in fotografia originala).
- Folosirea calitatii maxime la JPEG este folosita din ce in ce mai mult in internetul de azi datorita tehnologiei din ce in ce mai avansate.

Atentie! La calitatea maxima JPEG-ul este de asemenea fara pierdere de date!

Comparatii vizuale dintre formatele GIF, JPEG, & PNG

GIF-JPG-PNG

Pentru o mai buna intelegere a termenilor "lossless", compresie sau calitatea imaginii aveti mai jos exemple de imagini prin care puteti vedea diferentele de formate.

Pe masura ce examinam si comparam imaginile de mai jos, trebuie sa retinem cateva lucruri importante:
- majoritatea monitoarelor ofera o rezolutie nu mai mult de 96ppi (ecrane flat), iar altele ofera doar 72ppi, limitand abilitatea noastra de a vedea defectele intr-o imagine.
- Imaginile vor aparea diferit pe diferite computere (mai inchise la culoare cele care au Windows decat cele cu Max) si in diferite situatii de iluminare (fluorescent vs incadescent, etc.)

- Mai exista si variatii datorita diferentelor dintre monitoare. Chiar daca la iesirea din fabrica fiecare monitor se verifica in parte si se calibreaza dupa anumite standarde, ele cu timpul se pot schimba destul de usor (contrast, iluminare, etc.)

Dar chiar si cu aceste limitari, sunt situatii in care este foarte usor sa percepi diferentele de format de imagine.

GIF-JPG-PNG

Mai intai, sa comparam o fotografie in formatele GIF, JPEG si PNG la marimea de 100%.

GIF-JPG-PNG

Am marit imaginea pe capul vulturului. Cand maresti la circa 400%, poti observa diferenta dintre formate si ce se intampla cu pixelii in fotografii. Atat GIF cat si PNG-8 (dreapta sus-jos) arata granulat deoarece s-a pierdut o mare cantitate de culori si nu se mai poate face tranzitia fina de la o culoare la alta. La formatul JPEG (stanga-jos) sunt erori de culori destul de vizibile cu ochiul liber.

Zona cu problme este evidentiata cu sageata rosie. Observa ca jpeg-ul a fost setat la o calitate de 35, o setare comuna, folosita de multi designeri care doresc sa obtina fisiere de dimensiuni mici pentru o incarcare mai rapida a paginii web.

Facand o comparatie, timpul de download a fisierului JPEG este de 10 ori mai mic decat a GIF-ului sau PNG-8.

Priveste ce se intampla la un zoom de 400%.

GIF-JPG-PNG

In aceasta situatie se pare ca JPEG-ul este cea mai buna solutie pentru folosirea imaginii pe internet. Vizionarea fotografiei la 100% nu arata nici un defect la marginile de contrast din cadrul imaginii.

Pagina:
1 2 »
comenteaza printeaza
Alte tutoriale Fotografie:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (1) spune-ti parerea
monolit25 monolit25 , Sambata, 03 Octombrie 2009, ora 22:19
#1

foooooarte interesant tutorial ,am aflat multe.multumesc!

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4320
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4180
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4000
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Powerpoint CSS COREL DRAW Python SEO Outlook Vista Illustrator SWF Verilog JSON Word Javascript AJAX XHTML PHP StyleSheet Photoshop Sony Vegas XML Dreamweaver Ruby on Rails RoR Swift 3D Gimp Excel HTML MySQL Java PSD Fireworks Action Script Bridge Fotografie Flash Lightroom
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software