Invatare Atomica

Imaginea digitala

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege cum este construita o imagine digitala: cele doua moduri de a o descrie (raster si vectorial), ce inseamna rezolutia si DPI-ul cand imaginea ajunge pe hartie, cum se scrie o culoare in modelele RGB, HSL si CMYK, si cum alegi formatul de fisier potrivit — JPG, PNG, SVG sau TIFF — pentru ecran, pentru tipar sau pentru arhiva.

Dupa aceasta lectie vei putea:

  • Sa deosebesti o imagine raster (retea de pixeli) de una vectoriala (descrisa matematic) si sa dai exemple concrete pentru fiecare
  • Sa calculezi ce dimensiune fizica are pe hartie o imagine, pornind de la numarul de pixeli si de la DPI-ul de tipar
  • Sa explici diferenta dintre PPI (ecran) si DPI (tipar) si sa stii de ce standardul profesional de tipar este 300 DPI
  • Sa scrii o culoare in RGB, in hexazecimal si in HSL si sa explici de ce tiparul foloseste CMYK
  • Sa alegi intre JPG, PNG, SVG si TIFF dupa destinatie si sa justifici alegerea prin tipul de compresie
  • Sa aplici aceste decizii pe materiale specifice profilului militar: harti topografice, embleme de unitate, planse de instructie, panouri tiparite

Incearca singur!

Provocare:

Ai doua fisiere pentru un panou informativ al unitatii: emblema_unitatii.svg si foto_ceremonie.jpg. Le maresti pe amandoua de zece ori pe ecran. Emblema ramane perfect curata, cu contururi taioase; fotografia se umple de patratele colorate si devine neclara. Ambele fisiere arata la fel de bine la marimea initiala. Scrie ce crezi ca este diferit in interiorul celor doua fisiere, de vreme ce se comporta atat de diferit la marire.

💡 Ai nevoie de un indiciu?

Gandeste-te ce anume este scris efectiv in fisier. Intr-un caz sunt memorate culorile unor patratele asezate intr-o retea fixa: atatea pe orizontala, atatea pe verticala. Cand maresti, nu apar patratele noi — se maresc cele existente, si atunci se vad.

In celalalt caz nu este memorata nicio culoare de pixel, ci instructiuni geometrice: un cerc cu centrul aici si raza atat, o linie de la un punct la altul, o zona umpluta cu o anumita culoare. La marire, aceste instructiuni sunt pur si simplu recalculate la noua dimensiune, deci conturul iese la fel de curat oricat de mare ar fi.

1

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

Doua fisiere, acelasi desen, comportament diferit

Ai emblema unitatii in doua fisiere. Le maresti pe amandoua la latimea unui perete de sala de clasa:

  • emblema.png — conturul stelei se transforma in trepte, iar textul de sub ea se ingroasa si se incetoseaza
  • emblema.svg — conturul ramane la fel de taios ca pe ecranul telefonului, iar textul ramane lizibil

Diferenta nu este de calitate a desenului, ci de ce anume scrie in fisier.

O imagine digitala poate fi construita in doua moduri: raster (numita si bitmap) — o retea de pixeli, in care fisierul memoreaza culoarea fiecarui pixel; sau vectoriala — o descriere matematica, in care fisierul memoreaza puncte, linii, curbe si zone de umplere.
📷 Raster (bitmap)

Imaginea este o grila de pixeli. Fisierul retine culoarea fiecarui pixel in parte. Numarul de pixeli este fixat in momentul in care imaginea a fost creata sau scanata.

  • De unde vine: aparat foto, camera de telefon, scanner, captura de ecran
  • Limita: la marire nu apar detalii noi, ci se maresc pixelii existenti — asta este pixelizarea
  • Formate: JPG, PNG, TIFF, GIF, BMP
✏ Vectorial

Imaginea este o lista de instructiuni geometrice: cerc, dreptunghi, poligon, curba, culoare de umplere, grosime de contur. Programul recalculeaza forma la orice dimensiune ceruta.

  • De unde vine: programe de desen vectorial (Inkscape, Illustrator), unelte de cartografie
  • Avantaj: se mareste la orice dimensiune fara pierdere de claritate
  • Formate: SVG, PDF vectorial, EPS, AI
Aplicatie militara: ce este raster si ce este vectorial in materialele de unitate

Raster: fotografiile de la exercitiile de campanie, ortofotoplanul unei zone de instructie (fotografie aeriana corectata geometric), scanul unui ordin de zi tiparit, captura de ecran a unei aplicatii.

Vectorial: emblema si insigna unitatii, plansa cu semnele conventionale topografice, schema de dispunere a unui dispozitiv desenata pe calculator, plansa cu gradele militare folosita la instructie. Toate acestea trebuie sa arate la fel de curat si pe un ecuson de 3 cm, si pe un banner de 3 metri — ceea ce numai formatul vectorial garanteaza.

2

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

Aceeasi imagine, doua rezultate la tipar

Ai gasit o fotografie de 600 x 450 pixeli si vrei sa o pui pe un panou de prezentare a unitatii.

  • Tiparita la 300 DPI: 600 / 300 = 2 inch latime, adica 5,1 cm. Arata impecabil, dar este cat o poza de buletin.
  • Intinsa la 20 cm latime: 20 cm inseamna 7,87 inch, deci 600 / 7,87 = aproximativ 76 DPI. Se vad pixelii, iar textul din imagine devine ilizibil.

Fisierul este acelasi. S-a schimbat doar cat de mult il intinzi.

Rezolutia unei imagini raster este numarul de pixeli pe orizontala si pe verticala (de exemplu 1920 x 1080). DPI (dots per inch, puncte pe inch) spune cat de dens sunt asezate aceste puncte pe hartie la tipar. Rezolutia singura nu spune cat de mare iese imaginea; abia impreuna cu DPI-ul rezulta o dimensiune fizica.
Formula de lucru

Dimensiune in inch = numar de pixeli / DPI — iar apoi 1 inch = 2,54 cm.

Si invers, cand stii ce marime vrei pe hartie: pixeli necesari = dimensiune in inch x DPI.

Exemplu de verificat: o pagina A4 are 21 x 29,7 cm, adica 8,27 x 11,69 inch. La 300 DPI ai nevoie de 8,27 x 300 = aproximativ 2480 pixeli pe latime si 11,69 x 300 = aproximativ 3508 pixeli pe inaltime. Acesta este motivul pentru care un scan A4 de calitate de tipar are peste 2400 de pixeli pe latura scurta.

PPI pentru ecran, DPI pentru hartie

PPI (pixels per inch) descrie densitatea pixelilor pe un ecran. Monitoarele obisnuite se invart in jurul a 96 PPI; ecranele de telefon si cele de tip Retina depasesc 300 PPI.

DPI descrie densitatea punctelor de cerneala puse de imprimanta pe hartie. Praguri de retinut:

  • 72–96 DPI — suficient doar pentru afisare pe ecran; pe hartie iese granulat
  • 150 DPI — acceptabil pentru afise mari, privite de la cativa metri
  • 300 DPI — standardul profesional de tipar: brosuri, pliante, panouri privite de aproape

Atentie la o capcana: a schimba doar numarul DPI scris in proprietatile fisierului nu adauga niciun pixel. Daca imaginea are 600 de pixeli pe latime, ea are 600 de pixeli si dupa ce ii scrii 300 DPI in metadate.

Aplicatie militara: harta pentru instructie tiparita

Vrei o portiune de harta topografica tiparita la 15 x 15 cm, curata, pentru instructia de orientare. 15 cm inseamna 5,9 inch; la 300 DPI ai nevoie de aproximativ 5,9 x 300 = 1770 de pixeli pe latura. Daca fisierul primit are doar 800 de pixeli, la 15 cm ajungi la aproximativ 135 DPI — curbele de nivel se ingroasa, iar cotele numerice devin greu de citit exact acolo unde elevul are nevoie de precizie. Solutia corecta nu este marirea in editor, ci obtinerea unui fisier-sursa cu mai multi pixeli sau, ideal, a hartii in format vectorial.

3

3. Culoarea pe ecran: RGB, hexazecimal si HSL

Trei scrieri pentru acelasi verde de camuflaj

Vrei un verde inchis pentru fundalul unei planse de instructie. Acelasi verde se poate scrie in trei feluri, iar ecranul afiseaza exact aceeasi culoare:

  • RGB: rgb(74, 104, 65)
  • Hexazecimal: #4A6841
  • HSL: hsl(106, 23%, 33%) — nuanta verde, putin saturata, inchisa

Prima scriere spune cata lumina din fiecare canal. A treia spune ce nuanta, cat de vie si cat de inchisa — mult mai usor de reglat cand cauti o gama de culori inrudite.

RGB (Red, Green, Blue) este un model aditiv: ecranul emite lumina rosie, verde si albastra, iar amestecarea lor da toate celelalte culori. Toate trei la maxim inseamna alb; toate trei la zero inseamna negru. HSL (Hue, Saturation, Lightness) descrie aceeasi culoare prin nuanta, saturatie si luminozitate.
RGB si scrierea hexazecimala

Fiecare canal are o valoare intreaga de la 0 la 255:

  • rgb(0, 0, 0) = negru — niciun canal nu emite lumina
  • rgb(255, 255, 255) = alb — toate trei la maxim
  • rgb(255, 0, 0) = rosu pur; rgb(0, 255, 0) = verde pur; rgb(0, 0, 255) = albastru pur

Aceleasi valori se scriu in HTML si CSS ca #RRGGBB, cu perechi hexazecimale: #000000 = negru, #FFFFFF = alb, #FF0000 = rosu. FF in baza 16 inseamna 255 in baza 10.

Cu 256 de valori pe fiecare canal rezulta 256 x 256 x 256 = 16.777.216 de culori afisabile — ceea ce se numeste culoare pe 24 de biti.

HSL — cand vrei sa reglezi culoarea, nu sa o inventezi

H (Hue, nuanta): un unghi de la 0 la 360 de grade pe roata culorilor. 0 = rosu, 120 = verde, 240 = albastru.

S (Saturation, saturatie): de la 0% (gri complet) la 100% (culoare vie).

L (Lightness, luminozitate): 0% = negru, 50% = nuanta pura, 100% = alb.

Utilitatea practica: pastrezi H si S si schimbi numai L, si obtii o gama coerenta de tonuri ale aceleiasi culori — exact ce trebuie pentru fundal, chenar si accent pe acelasi panou.

Aplicatie militara: culorile unei planse de identificare

Pentru o plansa de identificare a semnelor conventionale trebuie ca aceeasi culoare sa apara identic pe toate ecranele si in toate fisierele. Regula de lucru: noteaza culorile in cod hexazecimal intr-o legenda scrisa (de exemplu: albastru dispozitiv propriu #1F4E79, rosu inamic #C00000, verde vegetatie #4A6841) si foloseste exact acele coduri in fiecare fisier. Culoarea aleasa de fiecare data cu pipeta din alt fisier ajunge, dupa cateva planse, sa difere vizibil de la o foaie la alta.

4

4. Culoarea la tipar: CMYK si problema gamutului

Surpriza de la tipografie

Ai facut pe calculator un afis pentru ziua unitatii, cu un albastru electric foarte viu ales pe ecran. Il duci la tipar si primesti inapoi un afis in care albastrul este vizibil mai sters si mai spre gri. Nimeni nu a gresit nimic: pur si simplu cerneala nu poate reproduce acel albastru.

CMYK (Cyan, Magenta, Yellow, Key/Black) este un model substractiv: cernelurile depuse pe hartie absorb portiuni din lumina alba care cade pe foaie, iar ochiul vede ce ramane reflectat. Cu cat mai multa cerneala, cu atat culoarea este mai inchisa. Valorile se exprima in procente, de la 0% la 100% pentru fiecare din cele patru canale.
Cum se citeste o valoare CMYK
  • CMYK(0%, 0%, 0%, 0%) = alb — nu se pune deloc cerneala, ramane hartia
  • CMYK(0%, 0%, 0%, 100%) = negru pur, obtinut din cerneala neagra
  • CMYK(100%, 0%, 0%, 0%) = cyan pur

De ce mai exista canalul K? Teoretic, cyan plus magenta plus galben la maximum ar da negru. In practica dau un maro murdar, iar suprapunerea a trei cerneluri ude uda si deformeaza hartia. De aceea negrul se tipareste cu o cerneala separata, numita Key (K) — si de aici vine litera, nu de la Black, ca sa nu se confunde cu B-ul de la Blue.

Gamutul — ce culori poate reda fiecare dispozitiv

Gamutul este multimea de culori pe care un dispozitiv le poate reproduce efectiv. Gamutul unui ecran (lumina emisa) este mai larg decat gamutul cernelurilor de tipar (lumina reflectata).

Consecinta practica: culorile foarte saturate — albastru electric, verde neon, portocaliu fluorescent — exista pe ecran, dar nu au echivalent in cerneala. La conversia din RGB in CMYK ele sunt inlocuite cu cea mai apropiata culoare tiparibila, deci ies mai stinse.

Regula de lucru: ce ramane pe ecran (web, prezentare, document digital) se lucreaza in RGB; ce ajunge pe hartie se pregateste in CMYK si, daca este posibil, se cere tipografiei o proba de culoare inainte de tirajul complet.

Aplicatie militara: acelasi material, doua variante de culoare

Pentru un panou de prezentare a unitatii vei avea nevoie de doua variante ale aceluiasi fisier: varianta RGB pentru proiectia din sala de briefing si pentru pagina de internet a scolii, si varianta CMYK pentru panoul tiparit din hol. Culorile heraldice ale emblemei — acolo unde nuanta exacta conteaza — se dau tipografiei ca valori CMYK explicite, nu prin captura de ecran. In felul acesta panoul tiparit si insigna purtata pe uniforma raman in aceeasi nuanta.

5

5. Formate de fisier si tipul de compresie: JPG, PNG, SVG, TIFF

Aceeasi emblema, trei fisiere, trei rezultate

Salvezi emblema unitatii, cu fundal transparent, in trei feluri, si o pui pe fundalul verde al paginii:

  • emblema.jpg — apare un dreptunghi alb in jurul emblemei, iar conturul are mici pete neregulate
  • emblema.png — fundalul verde se vede prin jurul emblemei, conturul este curat
  • emblema.svg — la fel de curata ca PNG-ul, dar ramane curata si daca o maresti pe un banner

Formatul nu este o formalitate de la sfarsit: el decide ce se poate si ce nu se poate face cu fisierul.

Formatul stabileste cum sunt memorati pixelii sau vectorii, ce tip de compresie se aplica si ce functii suporta fisierul (transparenta, straturi, animatie). Compresia poate fi fara pierdere (lossless) — imaginea se reconstituie identic — sau cu pierdere (lossy) — se arunca informatie pentru un fisier mai mic, iar pierderea este definitiva.
JPG / JPEG — fotografii, fisiere mici
  • Tip: raster, compresie cu pierdere (lossy)
  • Bun la: fotografii si imagini cu treceri fine de culoare, unde pierderea nu se observa
  • Slab la: text, linii subtiri, contururi taioase — apar halouri si zone patratoase
  • Nu suporta transparenta. Extensii: .jpg, .jpeg
PNG — grafica, transparenta, capturi de ecran
  • Tip: raster, compresie fara pierdere (lossless)
  • Suporta transparenta prin canal alpha, inclusiv transparenta partiala per pixel
  • Bun la: sigle si embleme, capturi de ecran, scheme, imagini cu text
  • Limita: pentru fotografii da fisiere mult mai mari decat JPG
SVG si TIFF — scalabilitate si arhiva

SVG (Scalable Vector Graphics): format vectorial, scris in XML, deci este text pe care il poti deschide si citi intr-un editor. Se mareste la orice dimensiune fara pierdere si este afisat direct de orice browser modern. Alegerea corecta pentru embleme, pictograme, scheme si planse care apar in mai multe marimi.

TIFF: format raster fara pierdere, folosit la scanarea si arhivarea documentelor. Fisierele sunt mari, dar pastreaza tot ce a captat scannerul, deci este formatul potrivit pentru originalul de arhiva, nu pentru publicare.

Aplicatie militara: regula celor doua exemplare

Pentru orice material vizual al unitatii se pastreaza doua exemplare: originalul in format fara pierdere — TIFF sau PNG pentru scanuri si fotografii de arhiva, SVG pentru embleme si planse — si copia de folosinta in JPG sau PNG, redimensionata pentru pagina web, pentru prezentare sau pentru e-mail.

Regula care rezulta din compresia cu pierdere: editezi mereu pornind de la original, niciodata de la copia deja comprimata. Un JPG luat de pe pagina web, taiat, resalvat si retrimis de cateva ori ajunge, dupa cateva runde, un material pe care nu se mai poate citi textul din imagine.

6

6. Recapitulare: ghid de decizie rapid

Cele patru decizii din aceasta lectie — raster sau vectorial, cati pixeli, ce model de culoare, ce format — se iau impreuna, de fiecare data cand pregatesti o imagine pentru un anumit scop.
Patru intrebari inainte de a salva o imagine

1. Imaginea va fi marita sau folosita in mai multe dimensiuni?
— Da, si este desen sau schema → vectorial (SVG)
— Nu, sau este fotografie → raster

2. Unde ajunge: pe ecran sau pe hartie?
— Ecran → RGB, iar numarul de pixeli se potriveste cu marimea de afisare
— Hartie → CMYK, minimum 300 DPI la dimensiunea finala

3. Are nevoie de fundal transparent?
— Da → PNG sau SVG
— Nu, si este fotografie → JPG

4. Este original de pastrat sau copie de folosinta?
— Original → format fara pierdere (TIFF, PNG, SVG)
— Copie → JPG sau PNG redimensionat; nu se editeaza niciodata mai departe din ea

Tabel sintetic rapid

Emblema, insigna, pictograma → SVG | vectorial | orice dimensiune, contur curat
Fotografie pentru pagina web → JPG | lossy | RGB | dimensionata la marimea de afisare
Captura de ecran, schema cu text → PNG | lossless | RGB | text lizibil, transparenta posibila
Scan de document pentru arhiva → TIFF | lossless | 300 DPI sau mai mult
Panou sau pliant tiparit → CMYK | 300 DPI la dimensiunea finala | proba de culoare inainte de tiraj
Calcul de verificat mereu → pixeli / DPI = inch; inch x 2,54 = cm

Exercitii practice

Exercitiul 1 (Nivel minim) — Clasificare

Pentru fiecare fisier de mai jos, noteaza: tipul imaginii (raster / vectorial), tipul compresiei (lossless / lossy / fara compresie raster) si daca poate pastra fundalul transparent (DA / NU).

1. foto_poligon.jpg   2. emblema_unitatii.svg   3. captura_aplicatie.png   4. plansa_grade_militare.svg   5. scan_ordin_de_zi.tiff

Vezi rezolvarea

Clasificare fisier cu fisier (tip / compresie / transparenta):

  1. foto_poligon.jpg — raster, compresie lossy (cu pierdere), NU pastreaza transparenta.
  2. emblema_unitatii.svg — vectorial, fara compresie de tip raster (imaginea este descrisa matematic), DA pastreaza transparenta.
  3. captura_aplicatie.png — raster, compresie lossless (fara pierdere), DA pastreaza transparenta prin canalul alpha.
  4. plansa_grade_militare.svg — vectorial, fara compresie raster, DA pastreaza transparenta.
  5. scan_ordin_de_zi.tiff — raster, compresie lossless, DA (TIFF suporta transparenta, dar principalul motiv pentru care este ales aici este pastrarea integrala a scanului).

Regula de recunoscut dupa extensie: .jpg = mereu raster si lossy, fara transparenta; .svg = mereu vectorial; .png = raster, lossless, cu transparenta; .tiff = raster, lossless, folosit la arhiva.

Exercitiul 2 (Nivel standard) — Alegerea formatului potrivit

Pregatesti materialele vizuale pentru ziua unitatii. Pentru fiecare situatie precizeaza: formatul de fisier, modelul de culoare si rezolutia sau DPI-ul potrivit, si justifica fiecare alegere printr-un argument din lectie.

a) Emblema unitatii, pusa in antetul paginii web a scolii si, in alta zi, pe un banner de 2 metri.
b) Fotografia de grup de la ceremonie, publicata pe pagina web.
c) Aceeasi fotografie de grup, tiparita pe un panou de 20 x 15 cm din holul scolii.
d) Captura de ecran a unei aplicatii, cu text mic, folosita intr-un ghid de utilizare.

Vezi rezolvarea

Format, model de culoare si rezolutie pentru fiecare situatie:

  1. a) Emblema, web si banner de 2 m — SVG, vectorial: se mareste la orice dimensiune fara pixelizare, deci acelasi fisier serveste si antetului paginii, si bannerului. Model de culoare: RGB pentru varianta de ecran, CMYK pentru varianta tiparita a bannerului. DPI-ul nu se aplica unei imagini vectoriale — forma este recalculata la dimensiunea ceruta.
  2. b) Fotografie de grup, pe web — JPG: este fotografie, deci compresia lossy nu se observa si fisierul ramane mic. Model de culoare RGB (destinatia este ecranul). Numarul de pixeli se potriveste cu latimea de afisare in pagina; nu are rost sa incarci o imagine de 4000 de pixeli pentru un spatiu de 800.
  3. c) Aceeasi fotografie, tiparita la 20 x 15 cm — JPG de calitate maxima sau TIFF, pornind de la originalul din aparat, nu de la varianta pusa pe web. Model de culoare CMYK. La 300 DPI, 20 cm inseamna 20 / 2,54 = 7,87 inch, deci sunt necesari 7,87 x 300 = aproximativ 2362 de pixeli pe latime, si 15 / 2,54 x 300 = aproximativ 1772 de pixeli pe inaltime.
  4. d) Captura de ecran cu text mic — PNG: compresie lossless, deci literele raman taioase; JPG ar introduce halouri exact in jurul textului, care este partea importanta. Model de culoare RGB. Captura se pastreaza la dimensiunea ei nativa in pixeli, fara redimensionare, ca sa nu se incetoseze textul.

Exercitiul 3 (Nivel performanta) — Verdict argumentat pe o fotografie primita

Ai primit o singura fotografie, de 1024 x 768 pixeli, si ti se cere sa faci din ea un panou tiparit format A4 portret (21 x 29,7 cm), la standardul profesional de 300 DPI. Raspunde motivat:

1. Cati pixeli pe latime ar fi necesari pentru 21 cm la 300 DPI? Ajunge fotografia primita?
2. La ce dimensiune fizica maxima poate fi tiparita corect aceasta fotografie, la 300 DPI?
3. Daca cineva insista sa fie intinsa oricum pe toata latimea de 21 cm, la ce DPI real se ajunge si ce se vede pe hartie?
4. Ce solutii ai, si ce solutie NU rezolva problema?

Vezi rezolvarea

Se aplica formula din lectie: pixeli / DPI = inch, si 1 inch = 2,54 cm.

  1. Pixeli necesari: 21 cm / 2,54 = 8,27 inch; 8,27 x 300 = aproximativ 2480 de pixeli pe latime. Fotografia are 1024, adica sub jumatate din necesar. NU ajunge.
  2. Dimensiune maxima corecta la 300 DPI: 1024 / 300 = 3,41 inch = aproximativ 8,7 cm latime, si 768 / 300 = 2,56 inch = aproximativ 6,5 cm inaltime. Deci fotografia este buna pentru o ilustratie mica in pagina, nu pentru un panou A4.
  3. Daca este intinsa pe 21 cm: 1024 pixeli / 8,27 inch = aproximativ 124 DPI, adica sub jumatate din standardul de 300 DPI. Pe hartie se vad pixelii, contururile devin trepte, iar textul din imagine, daca exista, devine greu de citit.
  4. Solutii reale: (a) se cere fisierul original de la aparatul foto, care are aproape sigur mai multi pixeli decat copia primita; (b) se refotografiaza subiectul la rezolutie mare; (c) se pastreaza fotografia la dimensiunea la care este corecta (aproximativ 8,7 cm) si se construieste panoul in jurul ei, cu text si elemente vectoriale; (d) daca este vorba de o schema sau o emblema, nu de o fotografie, se cere varianta vectoriala (SVG), care nu are aceasta limita. Ce NU rezolva problema: marirea imaginii in editor si scrierea valorii 300 in campul DPI din proprietatile fisierului — niciuna dintre aceste operatii nu adauga detaliu real; numarul de pixeli captati de aparat ramane acelasi.

Criterii de evaluare: calcul corect cu formula pixeli / DPI; folosirea corecta a factorului 2,54; verdict clar formulat (nu ajunge) in loc de un raspuns evaziv; identificarea capcanei cu DPI-ul scris in metadate.

Ce ai invatat astazi

  • Raster = retea fixa de pixeli (fotografii, scanuri, capturi de ecran); vectorial = descriere matematica a formelor (embleme, planse, scheme)
  • Imaginea vectoriala se mareste la orice dimensiune fara pierdere; cea raster se pixeleaza, fiindca la marire nu apar detalii noi
  • Rezolutia este numarul de pixeli; DPI spune cat de dens sunt asezati pe hartie. Formula: pixeli / DPI = inch, iar 1 inch = 2,54 cm
  • Praguri de retinut: 72–96 DPI doar pentru ecran, 150 DPI pentru afise privite de departe, 300 DPI pentru tipar profesional
  • RGB este aditiv, pentru ecran: fiecare canal de la 0 la 255, scris si hexazecimal (#FF0000 = rosu); HSL descrie aceeasi culoare prin nuanta (0–360 grade), saturatie si luminozitate
  • CMYK este substractiv, pentru tipar: patru canale in procente, cu K = Key pentru negru; gamutul cernelurilor este mai mic decat al ecranului, deci culorile foarte vii ies mai stinse la tipar
  • JPG: lossy, fotografii, fara transparenta. PNG: lossless, transparenta, text si scheme. SVG: vectorial, orice dimensiune. TIFF: lossless, arhiva scanurilor
  • Compresia cu pierdere este definitiva: resalvarea repetata a unui JPG degradeaza progresiv imaginea, deci editezi mereu pornind de la original, nu de la copia de folosinta

Vrei mai mult?

Provocare: Ia o fotografie de pe telefon si deschide-i proprietatile (clic dreapta -> Proprietati -> Detalii, pe Windows). Noteaza dimensiunea in pixeli si marimea fisierului. Calculeaza, cu formula din lectie, la ce marime in centimetri poate fi tiparita corect la 300 DPI. Apoi salveaza aceeasi imagine si ca PNG si compara marimile fisierelor: vei vedea concret de ce fotografiile se tin in JPG, nu in PNG.

De gandit: Un SVG este un fisier text pe care il poti deschide in Notepad si citi. Un JPG, deschis la fel, este un sir de caractere fara sens. De ce este posibil ca imaginea vectoriala sa fie text lizibil, iar cea raster nu?

Deschidere: Hartile digitale de pe telefon raman clare oricat le maresti, iar etichetele localitatilor nu se pixeleaza niciodata — pentru ca strazile si limitele sunt stocate ca date vectoriale, si abia la afisare sunt desenate la dimensiunea ceruta. Aceeasi logica sta in spatele hartilor topografice digitale folosite la instructia de orientare.

Urmatoarea lectie

Continua cu Pagina web: structura HTML - inveti sa construiesti o pagina web cu elemente HTML si sa aplici stiluri CSS de baza.

Continua →