Invatare Atomica

Imaginea digitala

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege cum functioneaza o imagine pe calculator — de ce exista doua tipuri complet diferite (raster si vectorial), ce inseamna rezolutia si DPI-ul, cum amesteca calculatorul culorile (RGB vs CMYK) si de ce JPG, PNG sau SVG nu sunt acelasi lucru.

Dupa aceasta lectie vei putea:

  • Sa explici diferenta dintre imaginea raster si cea vectoriala si sa dai exemple de utilizare
  • Sa definesti rezolutia (pixeli) si DPI-ul si sa le interpretezi in contexte practice (ecran, tipar)
  • Sa descrii modelele de culoare RGB si CMYK si domeniul de utilizare al fiecaruia
  • Sa compari formatele JPG, PNG si SVG: tip, compresie, transparenta, utilizare recomandata
  • Sa alegi formatul potrivit pentru o situatie concreta (foto, schema, logo, grafic stiintific)

Incearca singur!

Provocare — inainte de lectie:

Deschide o fotografie de pe telefonul tau sau de pe calculator. Acum mareste-o pana la maximum (zoom 400–800%). Ce observi? Scrie mai jos ce crezi ca se intampla cu imaginea si de ce arata asa la zoom mare.

Apoi gandeste-te: un logo al scolii tiparit pe o diploma A4 arata clar, dar acelasi logo pus pe un banner de 3 metri arata neclar. De ce crezi ca se intampla asta?

💡 Ai nevoie de un indiciu? ▶

Cand mesti zoom la o fotografie, ajungi sa vezi patratele mici de culoare — acestea se numesc pixeli. Imaginea e construita dintr-o retea de astfel de patratele; daca sunt prea putine si le maresti mult, se vad.

Un logo facut gresit ca fotografie are aceeasi problema pe banner mare. Dar daca logo-ul ar fi vectorial (descris prin formule matematice), ar putea fi marit la orice dimensiune fara sa devina neclar.

1

1. Raster vs vectorial — doua moduri de a stoca o imagine

Exista doua abordari fundamental diferite prin care un calculator stocheaza o imagine. Alegerea influenteaza calitatea la marire, dimensiunea fisierului si utilizarea potrivita.
Imaginea raster (bitmap)

Este o grila dreptunghiulara de pixeli (picture elements). Fiecare pixel are o culoare bine definita. Calitatea depinde de numarul de pixeli: mai multi pixeli = mai mult detaliu. Dezavantaj major: la marire excesiva pixelii devin vizibili — efectul de „pixelare".

Exemple in stiinte: fotografia unui preparat la microscop, imaginea unui gel de electroforeza, fotografia unui fenomen meteorologic — toate sunt raster, adica fotografi reale cu detaliu fin pe o dimensiune fixata.

Formate tipice: JPG, PNG, BMP, TIFF, GIF.

Imaginea vectoriala

Nu stocheaza pixeli, ci instructiuni matematice: „desenează un cerc cu raza 50, umple cu albastru", „trasează o curbă Bezier de la punctul A la punctul B". Calculatorul recalculeaza forma la orice dimensiune.

Avantaj major: poate fi marita la orice dimensiune fara pierdere de calitate — liniile raman perfect netede.

Exemple in stiinte: diagrame de flux pentru protocoale de experiment, harti de distributie a speciilor, grafice pentru prezentari de proiect stiintific (unde axele trebuie sa fie clare la orice marime).

Formate tipice: SVG, AI (Adobe Illustrator), EPS, PDF (poate contine vectorial).

Regula practica: fotografie = raster; logo, schema, grafic de date = vectorial. Un medic nu fotografiaza inima si nu poti „fotografia" structura chimica a glucozei — o desenezi vectorial.
2

2. Rezolutia imaginii si DPI

Rezolutia unei imagini raster = numarul de pixeli pe latime si pe inaltime (ex: 3000 × 2000 pixeli). Cu cat mai multi pixeli, cu atat mai mult detaliu poate fi redat — dar si fisierul este mai mare.
DPI — dots per inch (puncte pe inch)

DPI masoara densitatea de pixeli la tipar: cate puncte de cerneala sunt puse pe fiecare inch de hartie. Acelasi fisier de 3000 x 2000 px tiparit la 300 DPI produce o fotografie de 25 × 17 cm cu calitate excelenta; tiparit la 72 DPI, aceeasi imagine ar acoperi o suprafata mult mai mare dar ar arata neclar.

Valori de referinta:

  • 72–96 DPI — rezolutia ecranelor (suficient pentru afisare digitala)
  • 300 DPI — standard pentru tipar de calitate (carti, reviste, lucrar de laborator)
  • 600–1200 DPI — tipar de precizie inalta (etichete, planse tehnice, planuri anatomice)
Context stiintific: Cand publici o lucrare stiintifica sau un poster de conferinta, revistele impun de obicei minim 300 DPI pentru figuri. O imagine de microscopie electronica exportata la 72 DPI va arata pixelata in print chiar daca pe ecran parea perfecta.
De retinut: DPI conteaza doar la tipar. Pe ecran, ceea ce conteaza este numarul de pixeli al imaginii raportat la rezolutia ecranului (ex: Full HD = 1920 x 1080 px). O imagine de 800 x 600 px pe un ecran 4K va aparea mica, nu neclara.
3

3. Modele de culoare: RGB si CMYK

Un model de culoare este un sistem matematic pentru a descrie si reproduce culori. Calculatoarele folosesc doua modele principale, fiecare potrivit unui mediu diferit.
RGB — model aditiv (pentru ecrane)

Fiecare pixel de pe un ecran este format din trei surse minuscule de lumina: Rosu (Red), Verde (Green), Albastru (Blue). Combinand aceste trei culori primare ale luminii in proportii diferite, se pot obtine aproximativ 16,7 milioane de culori (256 nivele × 256 nivele × 256 nivele = 16.777.216 culori).

  • RGB(255, 0, 0) = rosu pur
  • RGB(0, 255, 0) = verde pur
  • RGB(0, 0, 255) = albastru pur
  • RGB(255, 255, 255) = alb (toate culorile la maxim)
  • RGB(0, 0, 0) = negru (nicio lumina)

Folosit pentru: ecrane (monitoare, telefoane, televizoare), prezentari digitale, site-uri web, grafice de date pentru afisare pe ecran.

CMYK — model substractiv (pentru tipar)

La tipar, cerneala pe hartie alba absoarbe (scade) lumina in loc s-o emita. Culorile de baza sunt: Cyan, Magenta, Yellow (galben) si Key/Black (negru). Amestecul tuturor celor trei culori CMY produce teoretic negru, dar in practica da un maro murdar — de aceea se adauga negru separat (K).

Folosit pentru: imprimante, pliante, postere, reviste stiintifice, rapoarte tiparite, afise de laborator.

Atentie practica: Culorile RGB vazute pe ecran nu se reproduc identic in CMYK la tipar. Nuante de albastru electric sau verde intens arata diferit tiparite. Cand pregatesti un poster pentru o conferinta stiintifica, lucreaza in CMYK sau verifica o proba tiparita inainte.
Legatura cu fizica: RGB este sinteza aditiva a luminii (prism invers: din trei culori faci alb). CMYK este sinteza substractiva (ca pigmentii: amesteci culori si absorbi lumina, rezultatul e mai inchis). Acelasi principiu pe care il studiezi la optica.
4

4. Formate de imagini: JPG, PNG, SVG si compresie

Formatul unui fisier de imagine determina cum sunt stocate datele — cu sau fara pierdere de calitate, cu sau fara transparenta, raster sau vectorial. Alegerea gresita poate degrada calitatea sau mari inutil dimensiunea fisierului.
JPG / JPEG — compresie cu pierdere, pentru fotografii
  • Tip: raster, compresie cu pierdere (lossy)
  • Cum functioneaza: algoritmul analizeaza zone de culori similare si le aproximeaza, reducand dramatic dimensiunea fisierului (de 5–20× fata de BMP nemcomprimat). Cu cat compresia e mai mare, cu atat calitatea scade vizibil (apar „artefacte" la margini).
  • Transparenta: NU suporta
  • Recomandat pentru: fotografii (portrete, peisaje, imagini de microscopie publicata web), imagini cu gradiente fine de culoare
  • De evitat pentru: text, diagrame, grafice cu linii clare — compresia introduce artefacte vizibile
PNG — compresie fara pierdere, pentru grafica
  • Tip: raster, compresie fara pierdere (lossless)
  • Cum functioneaza: compresia PNG nu elimina niciun pixel — gaseste si inlatura redundantele fara sa altereze datele. Fisierul este mai mare decat JPG, dar calitatea ramane perfecta dupa oricati pasi de salvare.
  • Transparenta: DA (canal Alpha per pixel)
  • Recomandat pentru: grafice stiintifice, scheme, diagrame, capturi de ecran cu text, logo-uri in format raster, imagini cu fundal transparent
  • De evitat pentru: fotografii mari cu multe culori (fisierul devine prea mare)
SVG — format vectorial pentru web si prezentari
  • Tip: vectorial (fisier text XML care descrie forme geometrice)
  • Cum functioneaza: fisierul contine instructiuni: „<circle cx="50" cy="50" r="40" fill="blue"/>" — calculatorul deseneaza forma la orice dimensiune, mereu perfect neteda.
  • Transparenta: DA
  • Recomandat pentru: logo-uri, icoane, diagrame, harti, grafice de date interactive pe web, ilustratii stiintifice care trebuie sa arate clar la orice marime
  • De evitat pentru: fotografii (SVG nu poate stoca detaliul fotografic)
Comparatie practica pentru un proiect stiintific:
  • Fotografie planta la microscop → JPG (calitate buna, dimensiune mica)
  • Grafic cu date de temperatura masurate → PNG sau SVG (linii clare, axe lizibile)
  • Logo-ul proiectului pe poster → SVG (perfect la orice marime)
  • Schema anatomica cu fundalul transparent suprapusa pe fotografie → PNG cu Alpha
5

5. Compresia imaginilor — cu pierdere vs fara pierdere

Compresia reduce dimensiunea fisierului de imagine. Exista doua tipuri cu efecte complet diferite asupra calitatii:
⚠

Compresie cu pierdere (lossy)

Algoritmul elimina definitiv informatii considerate „greu sesizabile" de ochiul uman. Exemplu: zone de culoare similara sunt unificate intr-o singura culoare medie.

Efecte: fisier mic, dar calitatea scade la fiecare re-salvare. Artefacte vizibile la compresie mare.

Format tipic: JPG

✓

Compresie fara pierdere (lossless)

Algoritmul inlocuieste secvente repetitive cu coduri scurte (similar cu „repeta culoarea alba de 200 de ori" in loc sa stocheze 200 de pixeli identici).

Efecte: fisier mai mare decat lossy, dar calitatea ramane identica dupa oricati pasi de salvare.

Formate tipice: PNG, BMP, TIFF

Greseala frecventa in prezentari stiintifice: salvarea unui grafic de date (ex: evolutia temperaturii medii pe 10 ani) in JPG. Compresia introduce zgomot vizual langa axe si valori numerice, facand graficul mai greu de citit. Foloseste intotdeauna PNG sau SVG pentru grafice de date.
Analogie sigura: compresia fara pierdere e ca notitele stenografice — scurtezi scrierea, dar la decodificare recuperezi exact acelasi text. Compresia cu pierdere e ca rezumatul unui roman — scurtezi, dar unele detalii dispar definitiv.
6

6. Sinteza — cum alegi corect formatul imaginii

Imaginile digitale nu sunt toate la fel. Alegerea tipului, rezolutiei si formatului corect este o competenta practica esentiala — mai ales cand lucrezi cu date de laborator, postere stiintifice sau prezentari.
Schema decizionala rapida:
  • Este o fotografie? → raster, JPG (calitate buna, dimensiune mica)
  • Este un grafic, schema sau diagrama? → PNG (tipar, prezentare) sau SVG (web, poster)
  • Are nevoie de fundal transparent? → PNG sau SVG (nu JPG)
  • Va fi tiparit la dimensiune mare (poster)? → vectorial SVG sau raster minim 300 DPI
  • Va fi afisata pe ecran / web? → RGB; 72–96 DPI este suficient
  • Va fi tiparita (revista, lucrare)? → CMYK; minim 300 DPI
Contextul stiintelor naturii — exemple reale
  • Fotografie la microscopul optic: JPG sau TIFF, rezolutie mare (cel putin 2000 px pe latura scurta)
  • Grafic temperatura vs timp dintr-un experiment de chimie: PNG cu axe clare sau SVG pentru poster
  • Schema ciclului Krebs pentru prezentare: SVG (vectorial, scalabil) sau PNG la rezolutie inalta
  • Harta de distributie a speciilor pentru un referat de biologie: SVG sau PNG la 300 DPI pentru tipar
  • Tabel cu date de masuratori: nu este o imagine — il creezi in Excel/Calc si il exporti ca tabel sau ca PNG daca trebuie incorporat
Idee cheie: formatul nu este doar un detaliu tehnic — determina daca imaginea ta va fi clara in prezentare, publicabila intr-un referat sau utilizabila pe un poster de conferinta. Un cercetator competent alege formatul potrivit inca de la inceput.

Exercitii practice

Exercitiul 1 (Nivel minim) — Clasificare si identificare

Clasifica urmatoarele imagini in raster sau vectorial si propune formatul potrivit (JPG / PNG / SVG) pentru fiecare:

a) Fotografia unui cristal de clorura de sodiu vazut la microscopul electronic
b) Diagrama ciclului apei (evaporare → condensare → precipitatii)
c) Imaginea unui ser de electroforeza pe gel
d) Logo-ul unui proiect stiintific scolar care va fi pus pe un banner de 2 m
e) Graficul vitezei de reactie in functie de temperatura (curba de Arrhenius)

Exercitiul 2 (Nivel standard) — Rezolutie si DPI

Ai o fotografie de 2400 × 1800 pixeli pe care vrei sa o tiparesti.

a) Calculati dimensiunea fizica a fotografiei tiparite la 300 DPI (in cm; 1 inch = 2,54 cm).
b) Daca o tiparesti la 72 DPI in loc de 300 DPI, imaginea va fi mai mare sau mai mica? Explica.
c) Daca vrei sa tiparesti aceeasi fotografie la 300 DPI dar pe o coala A4 (21 × 29,7 cm), are suficienta rezolutie? Justifica numeric.

Exercitiul 3 (Nivel performanta) — Analiza si decizie

Esti responsabil cu pregatirea materialelor vizuale pentru posterul unui proiect de biologie prezentat la un concurs national. Posterul va fi tiparit la dimensiunea A1 (594 × 841 mm).

Descrie ce decizii iei pentru fiecare element vizual al posterului, justificand alegerea formatului, rezolutiei si modelului de culoare:

a) Fotografia unui organism studiat (adus din teren, fotografiat cu telefonul, 12 megapixeli)
b) Graficul cu datele de temperatura masurate in 30 de puncte geografice (creat in Excel)
c) Harta schematica a zonei de studiu
d) Logo-ul scolii si logo-ul concursului
e) Schema fluxului metodologic al cercetarii (casute si sageti)

Argumenteaza si ce nu ai face (ex: de ce nu folosesti JPG pentru grafice, de ce nu folosesti o fotografie de 800 x 600 px pe un poster A1).

Ce ai invatat astazi

  • Raster = grila de pixeli (fotografie, JPG/PNG); vectorial = formule matematice (schema, SVG)
  • Rezolutia = numarul de pixeli (ex: 1920 × 1080); DPI = densitatea la tipar (300 DPI = calitate profesionala)
  • RGB (aditiv, lumina) = pentru ecrane; CMYK (substractiv, cerneala) = pentru tipar
  • JPG = compresie cu pierdere (fotografii); PNG = fara pierdere + transparenta (grafice, scheme); SVG = vectorial scalabil
  • Formatul potrivit depinde de: tipul imaginii, destinatie (ecran / tipar), nevoia de transparenta, dimensiunea la care va fi afisata
  • In stiinte, graficele de date nu se salveaza niciodata in JPG — artefactele de compresie distorsioneaza informatia vizuala

Urmatoarea lectie

Continua cu Pagina web: structura HTML — cum construiesti o pagina web cu taguri HTML de baza, structura documentului si elemente esentiale.

Continua →