Invatare Atomica

Imaginea digitala: raster, vectorial, rezolutie si formate

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei invata cum este construita o imagine digitala — din pixeli (raster) sau din formule (vectorial) — ce inseamna rezolutia si DPI-ul cand tiparesti o plansa sau o fisa de lucru, cum se deosebeste culoarea de pe ecran (RGB) de culoarea de pe hartie (CMYK) si dupa ce criterii alegi formatul potrivit: JPG, PNG sau SVG. Sunt deciziile pe care le iei de fiecare data cand pregatesti un material didactic pentru copii sau pentru portofoliul de practica pedagogica.

Dupa aceasta lectie vei putea:

  • Sa deosebesti o imagine raster de una vectoriala si sa explici ce se intampla cu fiecare la marire
  • Sa citesti rezolutia unei imagini in pixeli si sa calculezi ce dimensiune are pe hartie la 300 DPI
  • Sa explici modelul aditiv RGB (ecran) si modelul substractiv CMYK (tipar) si de ce culorile difera
  • Sa alegi intre JPG, PNG si SVG pentru un material didactic concret, cu justificare
  • Sa recunosti compresia cu pierdere si sa eviti degradarea unui fisier prin resalvari repetate

Incearca singur!

Provocare:

Deschide pe calculator o fotografie facuta cu telefonul si mareste-o la 500% (zoom). Apoi deschide o iconita sau o sigla in format SVG si mareste-o la fel de mult. Noteaza ce vezi in fiecare caz. De ce crezi ca doua imagini care pe ecran arata la fel de clare la marimea normala se comporta atat de diferit cand le maresti?

💡 Ai nevoie de un indiciu?

Fotografia este o retea fixa de puncte colorate: cand o maresti, calculatorul nu are de unde sa inventeze puncte noi, asa ca le ingroasa pe cele existente — apar patratele. Sigla SVG este o descriere matematica a formelor (linii, curbe, culori de umplere): la orice marire, calculatorul redeseneaza formele de la zero, deci marginile raman perfect netede.

1

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

Porneste de la doua materiale pe care le folosesti la clasa:
  • Fotografia unui copil care lucreaza la o macheta, facuta cu telefonul. Maresti mult zona ochilor: apar patratele colorate.
  • Sigla gradinitei, desenata de cineva in Inkscape si salvata ca .svg. O maresti pe toata coala A3 pentru avizier: marginile raman la fel de nete.

Diferenta nu este de calitate a autorului, ci de felul in care imaginea e construita in fisier.

O imagine raster (numita si bitmap) este o retea de pixeli: fisierul retine culoarea fiecarui patratel din grila. O imagine vectoriala este o lista de instructiuni matematice: puncte, linii drepte, curbe, forme inchise si culori de umplere. La afisare, programul le redeseneaza la dimensiunea ceruta.
Cand folosesti fiecare tip — in munca educatorului:
TipDe unde vineSe poate mari?Exemple din activitatea ta
RasterAparat foto, telefon, scaner, captura de ecranNu peste rezolutia proprie (apar patratele)Poze de la serbare, desenele copiilor scanate, capturi din aplicatii
VectorialDesenat in program (Inkscape, Illustrator), fonturiDa, la orice dimensiune, fara pierdereSigla scolii, ecusoane, forme geometrice pentru planse, diplome
Consecinta practica — ecusoanele grupei:

Daca primesti sigla gradinitei ca poza .jpg de 200 de pixeli latime, ea va arata acceptabil pe ecran, dar iese neclara pe un banner de 2 metri. Daca o primesti ca .svg, acelasi fisier serveste si ecusonului de 4 cm, si bannerului de 2 metri. De aceea, cand ceri o sigla, ceri si varianta vectoriala.

2

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

Verifica pe loc, pe calculatorul tau:

Click dreapta pe o imagine in Explorer → Properties (Proprietati) → fila Details (Detalii). Acolo scrie Dimensions (ex: 1024 x 768) si Horizontal resolution / Vertical resolution (ex: 96 dpi). Primul numar spune cat de multa informatie are imaginea; al doilea spune cat de mare va fi pe hartie.

Rezolutia unei imagini raster se exprima in pixeli: 1024 x 768 inseamna 1024 de coloane si 768 de randuri de puncte colorate. DPI (dots per inch, puncte pe tol) spune cati pixeli se inghesuie intr-un tol (2,54 cm) la tiparire. Aceiasi pixeli, la DPI mai mare, dau o imagine mai mica dar mai clara pe hartie.
Formula si un calcul pe care il poti verifica:

latime pe hartie (cm) = latime in pixeli : DPI x 2,54

  • O poza de 1024 x 768 px tiparita la 300 DPI acopera 1024 : 300 x 2,54 = 8,7 cm latime si 768 : 300 x 2,54 = 6,5 cm inaltime. Deci: cat o carte postala mica, nu cat o plansa.
  • Invers: o coala A4 (21 x 29,7 cm) la 300 DPI cere 21 : 2,54 x 300 = 2480 px latime si 29,7 : 2,54 x 300 = 3508 px inaltime.
PPI si DPI — unde apare fiecare:
  • PPI (pixels per inch) descrie densitatea pixelilor pe ecran. Un monitor obisnuit are 96 PPI; ecranele de telefon moderne trec de 300 PPI.
  • DPI descrie punctele de cerneala sau toner puse de imprimanta pe hartie. In practica de zi cu zi, cele doua denumiri se folosesc adesea una in locul celeilalte.
  • Regula de lucru: 72–96 DPI ajung pentru orice imagine care se vede doar pe ecran; minimum 300 DPI pentru orice imagine care ajunge pe hartie.
Capcana clasica la fisele de lucru:

Ai luat de pe internet o imagine de 400 x 300 px si ai intins-o in Word peste jumatate de pagina. Pe ecran pare acceptabila, la imprimanta iese neclara: 400 px intinsi pe 10 cm inseamna doar 400 : (10 : 2,54) = circa 102 DPI, de trei ori sub necesarul de tipar. Marirea in Word nu adauga pixeli, doar ii intinde.

3

3. RGB — culoarea de pe ecran, facuta din lumina

Priveste ecranul cu o lupa (sau o picatura de apa pe sticla):

Fiecare punct alb de pe ecran nu este alb: sunt trei beculete lipite — unul rosu, unul verde, unul albastru — aprinse la maxim toate trei. Cand vezi galben, becul albastru este stins. Cand vezi negru, toate trei sunt stinse. Ecranul adauga lumina, nu vopsea.

RGB (Red, Green, Blue — rosu, verde, albastru) este un model de culoare aditiv: culorile se obtin adunand lumina celor trei canale. Fiecare canal ia valori de la 0 la 255. Toate la maxim dau alb, toate la zero dau negru. Combinatiile posibile sunt 256 x 256 x 256 = 16.777.216 de culori.
Aceeasi culoare, scrisa in doua feluri:
CuloareRGBCod hexazecimal
Negru(0, 0, 0)#000000
Alb(255, 255, 255)#FFFFFF
Rosu pur(255, 0, 0)#FF0000
Verde pur(0, 255, 0)#00FF00
Albastru pur(0, 0, 255)#0000FF
Galben(255, 255, 0)#FFFF00

Codul hexazecimal grupeaza cele trei valori cate doua cifre: primele doua = rosu, urmatoarele doua = verde, ultimele doua = albastru. Il vei folosi in lectia urmatoare, cand stilizezi o pagina web cu CSS.

Unde iti trebuie RGB in activitatea didactica:
  • Orice material care se vede pe ecran: prezentare pentru sedinta cu parintii, jocuri pe tabla interactiva, pagina de grup a clasei.
  • Alegerea culorilor pentru contrast: text inchis pe fond deschis, pentru copiii care citesc greu. Text galben pe alb, de exemplu, este ilizibil tocmai pentru ca cele doua culori difera doar prin canalul albastru.
4

4. CMYK — culoarea de pe hartie, facuta din cerneala

Deschide capacul unei imprimante color de la scoala:

Vei gasi patru cartuse: cyan (albastru-verzui), magenta (roz-purpuriu), yellow (galben) si negru. Nu exista cartus alb: albul este hartia lasata neatinsa. Cu cat pui mai multa cerneala, cu atat mai putina lumina se intoarce spre ochi — culoarea se inchide.

CMYK (Cyan, Magenta, Yellow, Key/Black) este un model substractiv: fiecare cerneala scade o parte din lumina alba reflectata de hartie. Valorile se exprima in procente, de la 0% la 100%. Canalul K (negru) se adauga separat pentru ca amestecul C+M+Y in practica da un maro murdar, nu un negru curat — si pentru ca negrul de text ar consuma inutil trei cerneluri.
RGB si CMYK, fata in fata:
CriteriuRGBCMYK
PrincipiuAditiv (se adauga lumina)Substractiv (cerneala scade lumina)
Valori0–255 pe fiecare canal0%–100% pe fiecare canal
Alb(255, 255, 255) — toate aprinse0% peste tot — hartie curata
Negru(0, 0, 0) — toate stinseK la 100%
Unde se folosesteEcran, proiector, web, prezentariAfise, reviste, diplome, carti tiparite
Gamut — de ce afisul iese altfel decat pe ecran:

Gamutul este multimea culorilor pe care un dispozitiv le poate reda. Ecranul poate afisa verzuri si albastruri mai intense decat pot reproduce cernelurile. Un albastru electric stralucitor ales pe monitor va iesi la tipar mai stins, iar tu vei crede ca tipografia a gresit. De aceea afisele si diplomele se pregatesc direct in CMYK: vezi de la inceput ce vei primi pe hartie.

5

5. Formate de fisier: JPG, PNG, SVG — ce alegi si de ce

Trei materiale, trei formate diferite:
  • Poza de la excursia clasei, pusa pe pagina scolii → JPG (fotografie, fisier mic).
  • Captura de ecran cu instructiunile unei aplicatii, pusa in fisa de lucru → PNG (text si linii clare, fara artefacte).
  • Sigla scolii pusa pe diploma tiparita A3 → SVG (se mareste oricat).
Formatul unui fisier de imagine stabileste cum sunt salvate informatiile: ca pixeli sau ca formule, comprimate cu pierdere sau fara, cu sau fara transparenta. Alegerea gresita a formatului nu se vede pe ecran, dar se vede la tipar sau in timpul de incarcare al paginii.
Tabelul de decizie:
FormatTipCompresieTransparentaPotrivit pentru
JPG / JPEGRasterCu pierdereNuFotografii, imagini cu treceri fine de culoare
PNGRasterFara pierdereDa, canal alphaCapturi de ecran, sigle, grafice cu text si linii
SVGVectorialText XML, se comprima bineDaSigle, iconite, forme geometrice, diagrame
GIFRasterFara pierdere, maxim 256 culoriDa, dar binaraAnimatii scurte, imagini cu putine culori
WEBPRasterCu sau fara pierdereDaImagini web moderne, fisiere mai mici decat JPG
Ce inseamna „transparenta binara” la GIF:

La GIF, un pixel poate fi doar complet vizibil sau complet invizibil. De aceea o sigla GIF pusa pe fond colorat capata un contur zimtat. La PNG, canalul alpha permite si transparenta partiala (de exemplu 40%), asa ca marginile ies netede pe orice fond. Pentru sigla din antetul unei fise, diferenta se vede cu ochiul liber.

SVG este, de fapt, text:

Un fisier .svg poate fi deschis in Notepad: inauntru sunt etichete asemanatoare cu HTML, care descriu formele. Un cerc rosu se scrie asa:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#FF0000" />
</svg>

Fisierul are cateva zeci de octeti si arata perfect si la 4 cm, si la 4 metri. In lectia urmatoare vei recunoaste aceleasi reguli de scriere in HTML.

6

6. Compresia — cat platesti in calitate pentru un fisier mic

Un experiment de cinci minute:

Ia o fotografie de la o activitate si salveaz-o de trei ori ca JPG la calitate joasa, de fiecare data din fisierul rezultat anterior. Mareste apoi zona din jurul unui text (de exemplu numele scolii de pe un panou din poza): vei vedea pete si halouri in jurul literelor. Repeta acelasi lucru cu PNG: nu se schimba nimic.

Compresia micsoreaza fisierul pe disc. Cea fara pierdere (lossless — PNG, GIF, TIFF) rescrie informatia mai economic, dar o pastreaza pe toata: la deschidere obtii exact pixelii originali. Cea cu pierdere (lossy — JPG) arunca detalii pe care ochiul le observa greu; fisierul e mult mai mic, dar informatia aruncata nu mai poate fi recuperata niciodata.
Regula de lucru pentru materialele tale didactice:
  • Pastreaza intotdeauna originalul intr-un folder separat (scanul la 300 DPI, poza direct din telefon).
  • Lucreaza pe copii. Cand exporti pentru site sau pentru trimis pe grup, exporti din original, nu dintr-o copie deja comprimata.
  • Pentru arhiva desenelor copiilor: scanare la 300 DPI, salvare in PNG sau TIFF. Pentru varianta pusa pe site: export JPG la circa 1600 px latime.
Exemplu numeric — expozitia digitala de desene:

Un desen A4 scanat la 300 DPI are 2480 x 3508 px. Salvat ca PNG fara pierdere ocupa de obicei cateva megaocteti. Acelasi desen, redimensionat la 1200 px latime si exportat JPG pentru pagina scolii, ajunge la cateva sute de kiloocteti — de ordinul zecilor de ori mai mic. Pe ecran, diferenta este invizibila; la reimprimare pe A4, varianta de 1200 px ar da doar circa 145 DPI, sub pragul de tipar.

Exercitii practice

Exercitiul 1 (Nivel minim) — Clasificare

Pentru fiecare fisier de mai jos, scrie: (a) raster sau vectorial, (b) tipul de compresie (cu pierdere / fara pierdere), (c) daca suporta transparenta.

  1. serbare_grupa_mare.jpg
  2. sigla_gradinitei.svg
  3. captura_aplicatie_tabla.png
  4. desen_copil_scanat.jpg
  5. iconita_calendar.svg
Vezi rezolvarea

Extensia fisierului spune tipul; tabelul de decizie din tema 5 da restul.

  1. serbare_grupa_mare.jpg — raster; compresie cu pierdere; fara transparenta.
  2. sigla_gradinitei.svg — vectorial; nu are compresie cu pierdere (este text XML); suporta transparenta.
  3. captura_aplicatie_tabla.png — raster; compresie fara pierdere; suporta transparenta (canal alpha).
  4. desen_copil_scanat.jpg — raster; compresie cu pierdere; fara transparenta. Atentie: desenul e facut de mana, dar scanerul produce oricum o imagine raster.
  5. iconita_calendar.svg — vectorial; text XML; suporta transparenta.

Ce se verifica: ca nu confunzi continutul imaginii (desen facut de mana) cu modul in care e salvata in fisier. Un desen scanat este raster; un desen facut in Inkscape este vectorial.

Exercitiul 2 (Nivel standard) — Alegerea formatului si a rezolutiei

Pregatesti materialele pentru portofoliul de practica pedagogica. Pentru fiecare situatie, indica formatul si rezolutia sau DPI-ul necesar, cu o justificare de cel mult doua randuri:

  1. Fotografia unei activitati cu copiii, pusa pe pagina de Facebook a gradinitei.
  2. Sigla gradinitei, asezata in antetul fiselor de lucru tiparite.
  3. O plansa didactica A4 color, dusa la tipografie pentru 30 de exemplare.
  4. Captura de ecran cu meniul unei aplicatii, folosita intr-un ghid pentru colegi.
Vezi rezolvarea
  1. JPG, circa 1200–1600 px latime, 72–96 DPI. Este fotografie (treceri fine de culoare, deci JPG), se vede doar pe ecran, deci nu are rost sa incarci un fisier de tipar.
  2. SVG daca il ai, altfel PNG. SVG-ul se mareste oricat fara pierdere si merge la fel de bine pe fisa A4 si pe un banner. PNG-ul pastreaza transparenta, ca sigla sa nu apara cu dreptunghi alb in jur. JPG este exclus tocmai pentru ca nu are transparenta.
  3. Fisier de 2480 x 3508 px, adica A4 la 300 DPI, pregatit in CMYK. 300 DPI este standardul de tipar (tema 2); CMYK ca sa vezi de la inceput culorile care ies pe hartie, nu pe cele mai intense de pe ecran (tema 4).
  4. PNG, la rezolutia nativa a capturii, fara redimensionare. Captura contine text si linii clare; JPG-ul ar produce halouri in jurul literelor, iar PNG-ul e fara pierdere.

Greseala tipica: aceeasi poza folosita si pe Facebook, si la tipografie. Pentru ecran fisierul mare doar incetineste pagina; pentru tipar, fisierul mic da imagine granulata.

Exercitiul 3 (Nivel performanta) — Expozitia digitala de desene

Grupa a realizat 24 de desene pe format A4. Vrei doua lucruri: (1) o galerie pe pagina scolii si (2) un panou tiparit A3 cu cele mai reusite 6 desene, fiecare tiparit la 12 cm latime. Raspunde motivat:

  1. La ce DPI scanezi desenele si de cati pixeli va avea fiecare scan? Arata calculul.
  2. Ce format alegi pentru arhiva originalelor si ce format pentru galeria de pe site? Justifica prin tipul compresiei.
  3. Cati pixeli latime trebuie sa aiba minimum o imagine tiparita la 12 cm si 300 DPI? Este suficient scanul de la punctul 1?
  4. Un coleg propune sa comprimati toate scanurile ca JPG la calitate joasa „ca sa incapa pe stick” si sa lucrati mai departe din ele. Ce ii raspunzi?
Vezi rezolvarea
  1. Scanare la 300 DPI. A4 = 21 x 29,7 cm. Latime: 21 : 2,54 x 300 = 2480 px. Inaltime: 29,7 : 2,54 x 300 = 3508 px. Deci fiecare scan are aproximativ 2480 x 3508 px. Scanarea la 600 DPI ar dubla laturile si ar impatri dimensiunea fisierului, fara castig la un tipar de 300 DPI.
  2. Arhiva: PNG (sau TIFF) — compresie fara pierdere, deci originalul ramane intact oricate copii ai face din el. Galeria de pe site: JPG la circa 1200–1600 px latime — compresie cu pierdere, dar fisiere de zeci de ori mai mici, iar pe ecran diferenta nu se vede. Exporti JPG-urile din arhiva PNG, niciodata dintr-un JPG deja comprimat.
  3. 12 cm : 2,54 x 300 = 1417 px minimum. Scanul are 2480 px latime, deci este suficient cu mult: chiar si tiparit la 12 cm, imaginea ajunge la 2480 : (12 : 2,54) = circa 525 DPI, peste pragul necesar.
  4. Ii raspunzi ca nu: compresia JPG este ireversibila, iar lucrul repetat pe fisierul comprimat adauga artefacte la fiecare salvare (tema 6). Pastram arhiva fara pierdere si generam din ea variantele mici; spatiul se rezolva cu un disc extern sau cu stocare in cloud, nu prin distrugerea originalelor.

Evaluare: calculele de la 1 si 3 corecte (cu unitati), alegerea formatelor justificata prin tipul compresiei (nu prin obisnuinta), si argumentul de la 4 formulat ca principiu: originalul fara pierdere, derivatele generate din el.

Ce ai invatat astazi

  • Imaginea raster este o retea fixa de pixeli (fotografii, scanuri, capturi) si se pixeleaza la marire; imaginea vectoriala e descrisa prin formule (sigle, iconite, SVG) si se mareste oricat fara pierdere
  • Rezolutia se masoara in pixeli, iar DPI-ul spune cati pixeli intra intr-un tol la tiparire: 72–96 DPI ajung pentru ecran, minimum 300 DPI pentru hartie
  • Latimea pe hartie in cm = latimea in pixeli : DPI x 2,54; o coala A4 la 300 DPI cere 2480 x 3508 px
  • RGB este aditiv (lumina, canale 0–255, folosit pe ecran); CMYK este substractiv (cerneala, canale 0%–100%, folosit la tipar), iar gamutul diferit explica de ce afisul iese mai stins decat pe monitor
  • JPG pentru fotografii (cu pierdere, fara transparenta), PNG pentru capturi si sigle (fara pierdere, cu canal alpha), SVG pentru sigle si iconite scalabile
  • Compresia cu pierdere este ireversibila si se acumuleaza la resalvari: pastrezi originalul fara pierdere si generezi din el fiecare varianta de care ai nevoie

Vrei mai mult?

Provocare: Deschide un fisier .svg in Notepad (click dreapta → Open with → Notepad). Gaseste in interior o valoare de culoare scrisa hexazecimal (fill="#..."), schimb-o si salveaza. Deschide fisierul din nou in browser: culoarea s-a schimbat. Incearca acelasi lucru cu un .jpg — ce vezi in Notepad si de ce?

De ce: De ce o imagine vectoriala poate fi editata cu un simplu editor de text, iar una raster nu? Ce anume din felul in care sunt construite cele doua tipuri de fisiere face diferenta?

Deschidere: Faptul ca SVG-ul e text explica de ce el traieste in aceeasi lume cu paginile web: eticheta <circle> din SVG si eticheta <p> din HTML respecta aceleasi reguli de scriere. In lectia urmatoare vei folosi exact aceste reguli ca sa construiesti o pagina.

Urmatoarea lectie

Continua cu Pagina web: structura HTML si stilizare CSS: vei aseza continutul intr-un document HTML corect, vei insera in pagina imaginile pe care ai invatat azi sa le alegi si vei stabili culorile cu aceleasi coduri hexazecimale din modelul RGB.

Continua →