MD1.4. Nocions bàsiques d'imatge digital

Els dos formats essencials de tipus d’imatge digital

És molt important entendre les característiques dels principals tipus d'imatge que podem utilitzar en el disseny.

Per veure imatges en la pantalla d'un dispositiu es poden utilitzar dues categories bàsiques: mapes de bits i vectors. La majoria de programes actuals per crear publicacions permeten incorporar els dos tipus.

Vegem primer les diferències clau.

Un mapa de bits és un format d'imatge al qual la informació de la imatge és una mena de mosaic al qual està definit el color i tonalitat de cada punt.

Si ampliam al màxim una foto digital ens adonam que, efectivament, està formada de diferents pixels acolorits. Això és anàleg al que passa amb la imatge impresa, ja que aquesta està formada per minúsculs puntets de color que percebem com una sola imatge amb els seus diferents colors.

Els formats de mapa de bits més habituals són GIF, PNG i JPG, amb diferents característiques quant a la forma que desen la informació de la imatges.

JPG (o JPEG) és el format més habitual per a fotografies digitals. PNG és apte per a qualsevol tipus d'imatge; per a imatges no fotogràfiques, com logos, gràfics amb molts colors plans, sol ser preferible a JPG. GIF és un format amb una sèrie de limitacions importants, però que té l'avantatge de poder contenir una animació rudimentària, i per això encara se segueix utilitzant per aquestes.

Una imatge digital té unes dimensions en pixels (les unitats en que es mostra a una pantalla, els minúsculs puntets que la formen). Les càmeres digitals solen indicar la resolució de les imatges en Megapixels, és a dir, milions de pixels. Per exemple, una pantalla d’un tamany molt freqüent, de 1920 x 1200 pixels tendria un poc més de 2 Megapixels.

Lògicament, si una imatge té molts pixels pot mostrar detalls amb més fidelitat. Ara bé, com més gran sigui la imatge, més espai ocuparà a l’equip, trigarà més en transferir-se per la xarxa i més memòria farà falta per processar-la.

Una imatge vectorial, en canvi, està definida geomètricament, amb una sèrie de fòrmules. Està formada per una sèrie d’objectes independents del tamany en què es mostrin. Moltes il·lustracions i elements de navegació que trobam a diari a internet estan fetes vectorialment. Això permet, per un costat, canviar el seu tamany o introduir-hi modificacions molt diverses sense que perdi definició ni qualitat. A més, el tamany de l'arxiu sol ser reduït, sobretot si es compara amb allò que es pot representar a la imatge. Els tipus de lletra estan definits també de forma vectorial, la qual cosa fa possible utilitzar tamanys molt diferents sense que es perdi qualitat. Hi ha diferents formats d'arxiu vectorial, com ara AI (de Adobe Illustrator), algunes formes de PDF i, molt especialment, SVG, un format estàndard acceptat pels navegadors i per tant apte per a imatges en línia.

Un cas especial és el dels documents PDF. El format PDF es basa en un llenguatge de descripció de pàgina que permet combinar lliurement formes vectorials, imatges en mapa de bits i text. Per això són tan comuns, els arxius PDF: són un sistema ideal per distribuir documents digitals amb la seguretat que es mantindrà fidelment allò que hem dissenyat.

Pel que fa a les pàgines i aplicacions en línia, a la informació que mostra al navegador també es poden combinar, de manera semblant, text, imatge en mapa de bits i imatge vectorial (en aquest cas en el format estàndard SVG.) Naturalment, podem enllaçar-hi tota una sèrie de components multimèdia com vídeo o àudio, i dotar la pàgina d'interactivitat. Ara bé, en el cas de les pàgines web, sotmeses a canvis en el tamany en que es mostra al dispositiu o a la pantalla, el control del disseny no és tan exacte com es pot fer amb un PDF.

Es poden interconvertir, aquests tipus d'imatge? Passar de vector a mapa de bits és fàcil: és equivalent a fer una captura d'allò que es pot mostrar en pantalla a una ampliació determinada. Per tant, crear una imatge en mapa de bits a partir d'un vector és un procediment trivial dins dels programes vectorials.

En canvi, aconseguir una representació vectorial, geomètrica, d'una fotografia o una imatge de mapa de bits en general pot ser més complex, en especial quan es tracta d'una foto amb moltes formes i colors. Al cas d'una imatge simple, com ara un dibuix en blanc i negre, el resultat és molt més acurat i útil. El procés de vectorització (que pot ser automàtica, o es pot fer manualment) rep diferents noms en funció del programa o aplicació: traçar, convertir a objecte...

Quan s'imprimeix un document, i quan es representa en un monitor o pantalla, aquesta diferència deixa d'existir, ja que es genera una representació de la imatge per al sistema d'impressió a una resolució convenient, és a dir, apareix una imatge en mapa de bits.

Cal dir que en les versions més actuals de moltes aplicacions, es poden combinar indistintament elements vectorials i de mapa de bits. De fet, en algunes de les aplicacions en línia, no saps realment quin tipus d’imatge estàs utilitzant: no te n’adones fins que ho comproves, per exemple ampliant molt el document!

Això facilita molt el treball en el disseny, ja que integram el tipus d’imatge que més convé en un sol espai. Les diferències es mantenen —allò per a a què és més apte cada format, en definitiva— però la frontera entre un tipus i un altre d’imatge es fa borrosa: per exemple, es poden aplicar filtres semblants als fotogràfics a una forma vectorial, o emprar formes vectorials en un programa de retoc fotogràfic. Al final, el programa converteix el resultat definitiu que s’ha de veure en pantalla, o allò que s’hagi d’imprimir, sense que ens haguem de preocupar massa de què és cada cosa!

Programes per manipular les imatges

Editors bàsics de fotografia / bitmaps

A un ordinador de sobretaula ja hi trobam instal·lada alguna utilitat bàsica per processar imatges en mapa de bits, com Preview al Mac o Fotos a Windows.

Per a un Chromebook o per utilitzar en línia al navegador, hi ha una sèrie d’aplicacions en línia que serveixen perfectament, per exemple https://edit.photo/, https://www.online-image-editor.com/, https://www.kapwing.com/image-editor o https://pixlr.com/es/x/.

Editors d’imatge vectorial:

Normalment no en ve de sèrie cap d’instal·lat. A versions recents de Mac hi ha Vectornator (si no el tens el pots obtenir gratuïtament), i Inkscape és de codi obert, gratuït, per a totes les plataformes.

També hi ha l’opció d’emprar un editor vectorial en línia, com https://vectr.com/, http://vecta.io o https://designer.gravit.io/.