Invatare Atomica

Imaginea digitala

Raster vs vectorial · Rezolutie si DPI · RGB si CMYK · Formate de fisier · Compresie

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege din ce este facuta o imagine digitala, de ce unele imagini se strica la marire iar altele nu, cum se leaga pixelii de dimensiunea tiparita, de ce culorile de pe ecran nu ies identic la imprimanta si cum alegi formatul potrivit pentru fiecare situatie din atelier, de pe santier sau din biroul tehnic.

Dupa aceasta lectie vei putea:

  • Sa deosebesti imaginile raster (retea de pixeli) de cele vectoriale (formule matematice) si sa dai exemple din domeniul tehnic
  • Sa explici ce este rezolutia in pixeli si ce inseamna DPI la tiparire
  • Sa calculezi ce dimensiune fizica poate acoperi o imagine tiparita la 300 DPI
  • Sa descrii modelul RGB (ecran, aditiv) si modelul CMYK (tipar, substractiv) si sa explici de ce difera
  • Sa alegi intre JPG, PNG si SVG in functie de continutul imaginii si de destinatia ei
  • Sa distingi compresia fara pierdere de cea cu pierdere si sa eviti degradarea prin resalvari repetate

Incearca singur!

Provocare de gandire — inainte sa incepi:

Ai doua fisiere cu sigla atelierului: sigla.jpg (400 x 200 pixeli) si sigla.svg. Le maresti pe amandoua ca sa acopere o folie de 3 metri pentru duba firmei. Ce se intampla cu fiecare si de ce?

Scrie raspunsul tau mai jos, in maxim 3 randuri:

💡 Ai nevoie de un indiciu? ▶

Un fisier are un numar fix de patratele colorate: 400 x 200 inseamna 80.000 de patratele si nici unul in plus. Celalalt fisier nu contine patratele, ci instructiuni de desenare („cerc cu raza R, linie de la punctul A la punctul B”). Care dintre ele poate fi redesenat la orice marime?

Dupa lectie, revino sa verifici daca ai avut dreptate!

1

1. Raster vs vectorial — doua feluri de a construi o imagine

Doua fisiere, acelasi desen, comportament diferit

Maresti pe ecran, pana la 800%, doua fisiere care arata identic la marime normala:

  • fotografie_piesa_uzata.jpg — apar patratele colorate, marginile piesei devin scari.
  • schema_tablou_electric.svg — liniile raman subtiri si drepte, textul ramane citibil.

Diferenta nu este de calitate a fisierului, ci de felul in care este construita imaginea in interior.

O imagine digitala poate fi construita in doua moduri complet diferite: raster (bitmap) sau vectorial. Modul de construire decide cum se comporta imaginea la marire, cat loc ocupa pe disc si la ce este buna.
📷

Raster (bitmap)

Imaginea este o retea (grila) de pixeli; fiecare pixel are o culoare proprie. Numarul de pixeli este stabilit la creare si nu mai creste.

Exemple din meserie: fotografia unei piese defecte facuta cu telefonul, poza de receptie a marfii, captura de ecran din programul de gestiune, imaginea scanata a unei fise de masuratori.

Limita: marita peste rezolutia proprie, imaginea se pixeleaza (apar patratele).

📏

Vectorial

Imaginea este o descriere matematica: puncte, segmente, curbe, cercuri, forme umplute cu o culoare. Fisierul contine instructiuni de desenare, nu pixeli.

Exemple din meserie: sigla firmei, schema electrica sau hidraulica, desenul de executie cotat, sablonul de debitare pentru CNC, autocolantul de pe utilaj.

Avantaj: se poate reda la orice marime, de la stampila la banner, fara pierdere de claritate.

Programe pe care le poti folosi gratuit: pentru raster — GIMP sau Paint.NET; pentru vectorial — Inkscape. Desenul tehnic vectorial se face in programe CAD (AutoCAD, LibreCAD, FreeCAD), care lucreaza tot cu linii si coordonate, nu cu pixeli.
Greseala frecventa: a lua sigla firmei de pe site (un PNG mic, de exemplu 300 x 120 pixeli) si a o trimite la tipografie pentru un panou. Fisierul nu are de unde sa scoata detalii care nu exista in el. Solutia nu este marirea in Photoshop, ci refacerea siglei ca fisier vectorial (SVG, AI, EPS, PDF vectorial).
2

2. Rezolutia si DPI — de la pixeli la centimetri pe hartie

Aceeasi poza, doua rezultate la tipar

Un coleg trimite la tipar poza unui utilaj, 1600 x 1200 pixeli, pentru un pliant de prezentare.

  • Tiparita pe o suprafata de aproximativ 13,5 x 10,2 cm — arata clar.
  • Aceeasi poza intinsa pe o pagina A4 intreaga — arata moale, cu margini neclare.

Fisierul este identic. S-a schimbat doar cat de mult au fost intinsi aceiasi pixeli pe hartie.

Rezolutia unei imagini raster se exprima in pixeli: 1600 x 1200 inseamna 1600 de coloane si 1200 de randuri, adica 1.920.000 de pixeli in total. DPI (dots per inch, puncte pe inch) spune cati puncte de cerneala depune imprimanta pe un inch de hartie, adica pe 2,54 cm.
Calculul pe care il faci inainte de orice tiparire

Formula este simpla: latime tiparita (in inch) = pixeli pe latime : DPI. Apoi inmultesti cu 2,54 ca sa ai centimetri.

  • 1600 pixeli : 300 DPI = 5,33 inch = 13,5 cm
  • 1200 pixeli : 300 DPI = 4 inch = 10,2 cm

Deci poza de 1600 x 1200 acopera curat cel mult 13,5 x 10,2 cm la calitate de tipar. Invers: o pagina A4 (21 x 29,7 cm) tiparita la 300 DPI cere aproximativ 2480 x 3508 pixeli.

Valori de referinta:
  • 72–96 PPI — densitatea tipica a ecranelor obisnuite (pixels per inch); suficient pentru site, prezentare, ecran de utilaj.
  • 150 DPI — acceptabil pentru tiparire interna la imprimanta de birou, documente de lucru.
  • 300 DPI — standardul pentru tipar profesional: pliante, cataloage de piese, etichete de produs.
  • Sub 300 DPI, la banner sau panou — acceptabil, pentru ca se priveste de la distanta mare; tipografiile lucreaza frecvent la 72–150 DPI la dimensiunea reala a panoului.
Atentie la falsul 300 DPI: in orice program de editare poti seta eticheta „300 DPI” fara ca imaginea sa castige un singur pixel nou. Daca setezi 300 DPI si programul iti pastreaza dimensiunea fizica, el inventeaza pixeli prin interpolare — fisierul creste, claritatea nu. Singura sursa de detaliu este poza facuta de la inceput la rezolutie mare.
3

3. Modelul RGB — culoarea pe ecran

Uita-te de aproape la un ecran

Daca privesti cu o lupa un monitor sau ecranul telefonului, vezi ca fiecare pixel alb este de fapt trei beculete lipite: unul rosu, unul verde, unul albastru, aprinse toate la maxim. Un pixel negru inseamna toate trei stinse. Galbenul de pe ecran nu are nicio sursa galbena: sunt rosul si verdele aprinse impreuna.

RGB (Red, Green, Blue — rosu, verde, albastru) este un model de culoare aditiv: culorile se obtin adunand lumina. Toate trei la maxim dau alb; toate trei stinse dau negru. Este modelul folosit de orice dispozitiv care emite lumina.
Cum se scrie o culoare RGB
  • Fiecare canal are o valoare intre 0 si 255 (8 biti pe canal), deci 256 x 256 x 256 = 16.777.216 de culori posibile.
  • Negru = (0, 0, 0). Alb = (255, 255, 255). Rosu pur = (255, 0, 0).
  • In HTML si CSS aceleasi valori se scriu si hexazecimal, in perechi: #FF0000 = rosu, #FFFFFF = alb, #000000 = negru, #808080 = gri mediu.
  • Perechea 00 inseamna 0, perechea FF inseamna 255. Cand cele trei perechi sunt egale, culoarea este un gri.
Unde iti foloseste concret: cand stabilesti culorile site-ului de prezentare al firmei sau ale unui panou de comanda desenat in aplicatie, culoarea o dai in RGB sau hexazecimal. Orice imagine care ramane pe ecran — site, prezentare, documentatie PDF citita pe calculator, interfata unui aparat — se pregateste in RGB.
Contrastul conteaza mai mult decat culoarea: un text gri deschis (#AAAAAA) pe fond alb este greu de citit pe un ecran de utilaj din hala, unde bate lumina. Pentru text de lucru alege culori departate ca luminozitate: text inchis pe fond deschis sau invers.
4

4. Modelul CMYK — culoarea pe hartie

Deschide capacul unei imprimante

Inauntru sunt patru cartuse: cyan (bleu), magenta (roz-purpuriu), yellow (galben) si negru. Niciun cartus rosu, verde sau albastru. Hartia nu emite lumina: ea reflecta lumina camerei, iar cerneala scade din ce se reflecta.

CMYK (Cyan, Magenta, Yellow, Key/Black) este un model substractiv: fiecare strat de cerneala absoarbe o parte din lumina alba care cade pe hartie. Mai multa cerneala inseamna culoare mai inchisa. Fiecare canal se exprima in procente, de la 0% la 100%.
Valori si de ce exista canalul K
  • CMYK (0%, 0%, 0%, 0%) = alb, adica hartia curata, fara cerneala.
  • CMYK (0%, 0%, 0%, 100%) = negru pur, doar din cartusul negru.
  • CMYK (100%, 0%, 0%, 0%) = cyan pur.
  • C + M + Y suprapuse in teorie dau negru, in practica dau un brun-inchis murdar, uda hartia si costa trei cerneluri in loc de una. De aceea exista K (Key, negru), care da negru curat si text clar.
🖥

RGB — ecran

Aditiv, prin lumina. Canale 0–255. Poate afisa albastru electric si verde neon foarte saturate. Pentru site, prezentare, interfata.

🖨

CMYK — tipar

Substractiv, prin cerneala. Canale 0–100%. Gama de culori (gamut) mai mica: tonurile foarte saturate ies mai stinse. Pentru pliant, catalog, eticheta.

Surpriza de la tipografie: ai ales pe ecran un albastru intens pentru sigla, iar pliantul vine cu un albastru sters. Nu e greseala tipografiei: acel albastru nu exista in gama cernelurilor CMYK. Cand stii de la inceput ca lucrarea se tipareste, lucrezi in CMYK sau ceri tipografiei o proba de culoare inainte de tiraj.
5

5. Formate de fisier — JPG, PNG, SVG si cand se folosesc

Acelasi continut, trei fisiere, trei rezultate

Salvezi captura unui tabel de comenzi in trei feluri si te uiti la rezultat:

  • tabel.jpg — 180 KB, dar cifrele au un halou cenusiu in jur.
  • tabel.png — 240 KB, cifrele sunt taioase, exact ca pe ecran.
  • sigla.png pusa peste o poza — fundalul din jurul siglei ramane transparent; aceeasi sigla salvata JPG vine cu un dreptunghi alb in jur.
Formatul unui fisier de imagine decide cum sunt stocati pixelii sau vectorii, cat de mult se comprima si ce functii suplimentare exista (transparenta, animatie). Alegerea gresita duce la calitate pierduta, fisiere inutil de mari sau la incompatibilitati la tipar.

JPG / JPEG

Raster, compresie cu pierdere. Excelent pentru fotografii cu treceri fine de culoare. Nu suporta transparenta. Extensii: .jpg, .jpeg.

Folosit la: poze cu lucrarea executata pentru galeria site-ului, foto de receptie marfa, poze de santier trimise pe e-mail.

PNG

Raster, compresie fara pierdere. Suporta transparenta pe canal alpha, inclusiv partiala. Fisiere mai mari decat JPG la fotografii.

Folosit la: capturi de ecran pentru manuale si proceduri, sigla cu fundal transparent, grafice si scheme exportate ca imagine.

SVG

Vectorial, scris in XML (text pe care il poti deschide in Notepad). Scalabil la orice dimensiune. Se poate stiliza cu CSS in pagina web.

Folosit la: sigla firmei pe site, iconite, scheme si diagrame desenate in Inkscape, sabloane de debitare.

GIF

Raster, maximum 256 de culori in paleta, suporta animatie si transparenta simpla (un pixel e ori vizibil, ori complet transparent).

Folosit la: animatii scurte de instruire, un pas repetat dintr-o procedura. Nepotrivit pentru fotografii.

WebP

Raster modern, poate comprima si cu pierdere, si fara, suporta transparenta si animatie. Fisiere mai mici decat JPG la calitate asemanatoare.

Folosit la: imaginile de pe site, ca sa se incarce mai repede pe telefon.

TIFF si PDF

TIFF: raster fara pierdere, folosit la scanare si arhivare. PDF: poate contine si vectori, si imagini raster; este formatul cerut de tipografii.

Folosit la: scanarea documentelor tehnice, trimiterea lucrarii finale la tipar.

Regula de buzunar: fotografie → JPG; captura de ecran, schema sau sigla cu transparenta → PNG; desen, sigla sau schema care trebuie marita oricat → SVG; lucrare de trimis la tipografie → PDF.
6

6. Compresia — cat de mic poate fi fisierul fara sa strice imaginea

De unde vine diferenta de 10 ori

Faci cu telefonul poza unui utilaj: 4000 x 3000 pixeli, adica 12.000.000 de pixeli. Fiecare pixel are nevoie de 3 octeti (cate unul pentru R, G si B), deci imaginea necomprimata ar ocupa aproximativ 36.000.000 de octeti, adica in jur de 34 MB. Pe telefon fisierul are insa 3–4 MB. Diferenta o face compresia.

Compresia reduce spatiul ocupat de fisier. Exista doua feluri: fara pierdere (lossless) — imaginea refacuta este identica pixel cu pixel cu originalul — si cu pierdere (lossy) — se arunca informatie considerata putin vizibila, in schimbul unui fisier mult mai mic; ce s-a aruncat nu se mai poate recupera.
✅

Fara pierdere (lossless)

PNG, TIFF, GIF, WebP in modul lossless. Fiecare pixel revine exact. Potrivit cand conteaza precizia: capturi de ecran, documente scanate, scheme, arhivarea desenelor de executie.

⚠

Cu pierdere (lossy)

JPG si WebP in modul lossy. Fisier mult mai mic, dar informatia aruncata nu revine. La compresie prea agresiva apar zone patrate si halouri in jurul marginilor si al literelor.

Cum lucrezi corect cu o poza de lucrare
  • Pastreaza originalul de pe aparat intr-un folder de arhiva si nu il modifica niciodata direct.
  • Editeaza pe o copie; daca faci mai multi pasi, salveaza pasii intermediari in PNG sau in formatul propriu al programului (.xcf la GIMP), nu in JPG.
  • Exporta JPG o singura data, la final, cu calitatea intre 75 si 85 — peste 90 fisierul creste mult fara castig vizibil.
  • Pentru site, redimensioneaza intai imaginea la latimea la care se afiseaza (de exemplu 1200 pixeli) si abia apoi exporta; o poza de 4000 pixeli pusa direct pe site incarca pagina degeaba.
Cazul clasic de pe grupul de lucru: o poza cu un aviz de insotire este trimisa pe chat, salvata, retrimisa, iar salvata — de fiecare data reprocesata JPG. Dupa cateva runde cifrele nu se mai citesc. Solutia: scanare in PNG sau PDF si trimiterea ca fisier atasat, nu ca imagine recomprimata de aplicatie.
7

7. Recapitulare — harta lectiei

Iata cum se leaga toate conceptele lectiei — o privire de ansamblu utila inainte de exercitii:

Raster

Retea fixa de pixeli. Fotografii, capturi de ecran, scanari. Marita peste rezolutia proprie, se pixeleaza.

Vectorial

Descriere matematica a formelor. Sigle, scheme, desene de executie, sabloane. Scalabila la orice marime.

Rezolutie si DPI

Rezolutia = numarul de pixeli. DPI = puncte de cerneala pe inch. Latime tiparita = pixeli : DPI (in inch); 300 DPI pentru tipar profesional.

RGB

Aditiv, prin lumina, pentru ecran. Canale 0–255, scrise si hexazecimal (#RRGGBB). 16,7 milioane de culori.

CMYK

Substractiv, prin cerneala, pentru tipar. Canale 0–100%. Canalul K da negrul curat. Gama de culori mai mica decat RGB.

Formate

JPG pentru fotografii, PNG pentru capturi si transparenta, SVG pentru vectorial, PDF pentru tipografie.

Compresie

Lossless (PNG, TIFF) pastreaza fiecare pixel. Lossy (JPG) micsoreaza mult fisierul, dar pierderea este ireversibila si se acumuleaza la resalvari.

Regula de lucru

Pastreaza originalul, editeaza pe copie, exporta JPG o singura data, la final, si verifica DPI-ul inainte de a trimite la tipar.

Aplicatie practica directa: pregatesti pliantul atelierului. Poza lucrarii executate o faci la rezolutie mare si o exporti JPG o singura data; sigla o iei in SVG ca sa fie curata si pe carte de vizita, si pe panou; verifici ca fiecare imagine acopera la 300 DPI dimensiunea ceruta pe pagina; predai tipografiei un PDF pregatit in CMYK.

Exercitii practice

Exercitiul 1 (Nivel minim) — Raster sau vectorial?

Pentru fiecare fisier de mai jos, spune daca este raster sau vectorial si ce fel de compresie foloseste formatul (fara pierdere, cu pierdere sau niciuna):

  1. piesa_uzata_rulment.jpg
  2. sigla_atelier.svg
  3. captura_program_facturare.png
  4. schema_tablou_electric.svg
  5. foto_hala_productie.jpg

Pentru fiecare, scrie si o propozitie: ce se intampla daca fisierul este marit de 5 ori?

Vezi rezolvarea

Rezolvare model:

  1. piesa_uzata_rulment.jpg — RASTER, compresie CU PIERDERE. Marit de 5 ori, apar patratele si halouri in jurul marginilor piesei.
  2. sigla_atelier.svg — VECTORIAL, fara compresie de imagine (fisierul este text XML; poate fi eventual arhivat). Marit de 5 ori, arata la fel de curat: formele se redeseneaza.
  3. captura_program_facturare.png — RASTER, compresie FARA PIERDERE. Marita de 5 ori se vad pixelii, dar nu apar halouri in jurul literelor, pentru ca nu s-a pierdut informatie la salvare.
  4. schema_tablou_electric.svg — VECTORIAL. Marita de 5 ori, liniile raman subtiri si drepte, textul ramane citibil; se poate tipari pe A3 sau pe A0 la fel de bine.
  5. foto_hala_productie.jpg — RASTER, compresie CU PIERDERE. Marita de 5 ori, imaginea devine moale si apar zone patrate in fundal.

Observatie: extensia fisierului iti spune deja tipul. .jpg si .png sunt intotdeauna raster; .svg este vectorial.

Exercitiul 2 (Nivel standard) — Alege formatul potrivit

Pregatesti materialele de prezentare pentru un atelier de service auto. Pentru fiecare situatie, indica formatul potrivit si justifica in una-doua propozitii:

  1. Fotografia unei masini reparate, pusa in galeria de pe site.
  2. Sigla atelierului, asezata peste o fotografie de fundal, fara dreptunghi alb in jur.
  3. Aceeasi sigla, trimisa firmei care face inscriptionarea vitrinei de 4 metri.
  4. Captura de ecran din programul de programari, pusa in ghidul de utilizare al colegilor.
  5. Pliantul finalizat, trimis tipografiei pentru tiraj de 500 de bucati.

Spune in plus, pentru punctele 1 si 5, in ce model de culoare pregatesti imaginea: RGB sau CMYK?

Vezi rezolvarea

Rezolvare model:

  1. JPG — este o fotografie cu treceri fine de culoare, iar compresia cu pierdere da un fisier mic, potrivit pentru incarcarea rapida a paginii. Model de culoare: RGB, pentru ca imaginea ramane pe ecran. (WebP ar fi si mai mic, tot cu pierdere.)
  2. PNG — singurul dintre formatele raster uzuale care pastreaza transparenta pe canal alpha; JPG ar aseza sigla pe un dreptunghi alb.
  3. SVG (sau alt fisier vectorial: AI, EPS, PDF vectorial) — inscriptionarea de 4 metri cere o imagine care se redeseneaza la orice marime. Un PNG de pe site, oricat de bun, nu are pixelii necesari.
  4. PNG — captura contine text marunt si margini nete; compresia fara pierdere pastreaza literele citibile, in timp ce JPG le-ar inconjura cu halouri.
  5. PDF — este formatul standard cerut de tipografii, pentru ca poate contine si text vectorial, si imagini raster, si informatiile de tipar. Model de culoare: CMYK, pentru ca lucrarea se tipareste cu cele patru cerneluri.

Exercitiul 3 (Nivel performanta) — Pregatirea unui pliant pentru tipar

Atelierul comanda un pliant A4 (21 x 29,7 cm), tiparit profesional la 300 DPI. Ai la dispozitie:

  • o fotografie a halei, de 1024 x 768 pixeli, descarcata de pe vechiul site;
  • o fotografie a unei lucrari, facuta cu telefonul, de 4000 x 3000 pixeli;
  • sigla firmei, doar ca PNG de 300 x 120 pixeli.

Rezolva, cu calcul si justificare:

  1. Cati pixeli trebuie sa aiba o imagine care acopera toata pagina A4 la 300 DPI?
  2. Ce dimensiune fizica maxima poate acoperi, la 300 DPI, fotografia de 1024 x 768? Poate fi folosita pe jumatate de pagina (aprox. 21 x 14 cm)?
  3. Fotografia de 4000 x 3000 este suficienta pentru toata pagina A4? Argumenteaza cu cifre.
  4. Ce faci cu sigla de 300 x 120 si de ce nu este o solutie sa o maresti in editorul de imagini?
  5. In ce model de culoare predai fisierul si de ce culorile pot arata diferit fata de ecran?
Vezi rezolvarea

Rezolvare model (formula: pixeli : DPI = inch; inch x 2,54 = cm):

  1. A4 la 300 DPI. 21 cm : 2,54 = 8,27 inch; 8,27 x 300 = aproximativ 2480 pixeli pe latime. 29,7 cm : 2,54 = 11,69 inch; 11,69 x 300 = aproximativ 3508 pixeli pe inaltime. Deci este nevoie de circa 2480 x 3508 pixeli.
  2. Fotografia de 1024 x 768. 1024 : 300 = 3,41 inch = 8,7 cm; 768 : 300 = 2,56 inch = 6,5 cm. Acopera curat cel mult 8,7 x 6,5 cm. Pentru jumatate de pagina (21 x 14 cm) NU ajunge: ar trebui intinsa de peste doua ori, ceea ce inseamna in jur de 120 DPI reali, adica imagine vizibil moale la tipar.
  3. Fotografia de 4000 x 3000. Asa cum este orientata, NU ajunge pentru toata pagina. Pagina A4 sta pe inaltime si cere 2480 x 3508 pixeli, iar fotografia sta pe latime: are 4000 pixeli pe latime (peste cei 2480 ceruti), dar doar 3000 pe inaltime (sub cei 3508 ceruti). Daca ar acoperi toata inaltimea de 29,7 cm, cei 3000 de pixeli s-ar intinde pe 11,69 inch: 3000 : 11,69 = circa 257 DPI, sub pragul de 300. Latura mai slaba decide, chiar daca pe latime ar exista rezerva (4000 : 8,27 = circa 484 DPI). Doua solutii corecte: (a) o folosesti pe toata latimea paginii, dar nu pe toata inaltimea — la 484 DPI ea acopera 21 x 15,7 cm, adica o banda lata in partea de sus a pliantului, cu rezerva si pentru decupare; (b) refaci poza tinand telefonul pe verticala, ca sa iasa 3000 x 4000 — atunci 3000 : 8,27 = circa 363 DPI pe latime si 4000 : 11,69 = circa 342 DPI pe inaltime, deci ambele laturi trec de 300 si poza umple pagina.
  4. Sigla de 300 x 120. La 300 DPI ea acopera doar 2,5 x 1 cm. Marirea in editorul de imagini nu ajuta: programul nu are de unde sa scoata detalii care nu exista in fisier, ci doar interpoleaza (ghiceste) pixeli, iar marginile devin neclare. Solutia corecta este obtinerea sau refacerea siglei in format vectorial (SVG, AI, EPS, PDF vectorial), care se reda curat la orice marime.
  5. Model de culoare. Fisierul final se preda in CMYK, in PDF. Culorile pot arata mai stinse decat pe ecran pentru ca ecranul lucreaza aditiv, in RGB, si poate afisa tonuri saturate pe care cele patru cerneluri nu le pot reproduce (gamut mai mic). Ca sa eviti surprizele, ceri tipografiei o proba de culoare inainte de tiraj.

Criterii de evaluare: formula pixeli : DPI aplicata corect; la punctul 3, verificarea ambelor laturi si concluzia data dupa latura care limiteaza, nu dupa cea favorabila; concluzia sustinuta cu cifre, nu din impresie; distinctia raster/vectorial folosita corect la punctul 4; explicatia gamutului la punctul 5.

Ce ai invatat astazi

  • Imaginea raster este o retea fixa de pixeli (fotografii, capturi, scanari) si se pixeleaza la marire; imaginea vectoriala este o descriere matematica a formelor (sigle, scheme, desene de executie) si se reda curat la orice marime
  • Rezolutia se masoara in pixeli, iar DPI spune cate puncte de cerneala se depun pe un inch (2,54 cm) de hartie
  • Dimensiunea tiparita se calculeaza cu formula: pixeli : DPI = inch, apoi inch x 2,54 = cm; o pagina A4 la 300 DPI cere circa 2480 x 3508 pixeli
  • 72–96 PPI sunt suficienti pentru ecran, 300 DPI este standardul tiparului profesional, iar setarea etichetei „300 DPI” nu adauga detalii care nu exista in fisier
  • RGB este model aditiv, prin lumina, cu canale de la 0 la 255 si scriere hexazecimala (#RRGGBB), folosit pentru tot ce ramane pe ecran
  • CMYK este model substractiv, prin cerneala, cu canale in procente; canalul K da negrul curat, iar gama lui de culori este mai mica decat a RGB
  • JPG pentru fotografii, PNG pentru capturi de ecran si transparenta, SVG pentru orice trebuie marit oricat, PDF pentru tipografie
  • Compresia fara pierdere (PNG, TIFF) pastreaza fiecare pixel; cea cu pierdere (JPG) micsoreaza mult fisierul, dar pierderea este ireversibila si se acumuleaza la fiecare resalvare

Vrei mai mult?

Provocare: Ia o fotografie proprie si deschide-i proprietatile in GIMP sau in Paint.NET. Noteaza rezolutia in pixeli, apoi calculeaza singur ce dimensiune fizica poate acoperi la 300 DPI, la 150 DPI si la 72 DPI. Salveaz-o de trei ori ca JPG, la calitate 90, 60 si 20, si compara marimea fisierelor cu ce se vede in jurul marginilor. Scrie de la ce calitate incolo diferenta incepe sa se vada cu ochiul liber pe ecranul tau.

De ce? Un fisier vectorial de sigla poate avea 4 KB, iar un JPG al aceleiasi sigle 400 KB. Amandoua arata la fel pe ecran, la marime mica. De ce, atunci, tipografia il cere tocmai pe cel de 4 KB? Gandeste-te ce anume contine fiecare fisier: unul o lista de instructiuni de desenare, celalalt culoarea fiecarui patratel in parte.

Mai departe: Lectia spune ca un pixel are nevoie de 3 octeti, cate unul pentru rosu, verde si albastru. Mai e ceva ce lectia nu spune: exista imagini care aloca 16 biti pe canal in loc de 8. Se numesc imagini pe 16 biti si nu se vad mai bine pe ecran — se vad mai bine dupa ce le prelucrezi. Cand inchizi si deschizi de mai multe ori luminozitatea unei imagini pe 8 biti, in degradeuri apar dungi vizibile, pentru ca cele 256 de trepte disponibile nu mai ajung pentru ajustari repetate. Aceeasi idee sta in spatele fisierelor RAW de la aparatele foto profesionale si in spatele masuratorilor pe 12 sau 16 biti ale unui senzor industrial: aduni mai multe trepte decat iti trebuie la afisare, tocmai ca sa ai din ce pierde pe drum. Asta deschide o preocupare de care lectia nu s-a atins inca: rezerva de precizie — se pastreaza la intrare, nu se recupereaza la iesire.

Urmatoarea lectie

Continua cu Pagina web: structura HTML si stilizare CSS — cum se construieste o pagina web, cum se adauga text, imagini si legaturi, si cum se aplica stiluri de baza.

Continua →