Quin format d'imatge és millor?

Nivell de coneixements tecnològics necessaris
10%

Abans de començar, és fonamental que et preguntis què vols fer i com s’adapta això a les dues modalitats d’imatge disponibles: mapa de bits i vectorial. Cada modalitat té els seus avantatges i desavantatges, així com diferents programes i formats a considerar. Aquestes decisions influiran en la qualitat, la mida del fitxer i l’adequació de la imatge per a la teva finalitat, sigui per imprimir o per visualitzar en pantalla. 

Aquí trobaràs una guia que t’ajudarà a escollir el format d’imatge més adequat segons les teves necessitats.

Abans de començar: Què vols fer?

Abans de començar cal que et preguntis què vols fer i amb quina d’aquestes dues modalitats encaixa millor per triar quin tipus de grafic i programa has de triar.

Mapa de Bits (Raster)

Avantatges
  • Excel·lent per a imatges fotogràfiques o amb gran detall.
  • Suporta milers o milions de colors.
  • Més realisme i profunditat en les imatges.
  • Fàcil de crear i editar amb programes com Adobe Photoshop. La seva alternativa codi obert i gratuïta és GIMP. També són molt bones eines gratuïtes o a un preu accessible: Procreate (per tablet), Krita o CLIP STUDIO PAINT. 
Desavantatges
  • La qualitat es pot deteriorar en ampliar la imatge.
  • Augmenta la mida del fitxer en augmentar la resolució.
  • No és adequat per a gràfics escalables o impressions de gran format. 
Exemple de treball amb mapa de bits (les fotos normals)

vectorial

Avantatges
  • Escalabilitat perfecta sense pèrdua de qualitat.
  • Mida de fitxer més petit.
  • Ideal per a disseny de logos, icones o il·lustracions simples.
  • Fàcil d’editar i modificar línies, formes i colors.
  • Dificultat a l’hora de treballar amb molts colors, degradats o detalls.
Desavantatges
  • Limitat a formes geomètriques i línies.
  • Menys adequat per a imatges fotogràfiques o amb detalls complexes.
  • Requereix coneixements específics i eines com Adobe Illustrator, és un pèl més difícil que Photoshop perquè es treballa diferent del que estem acostumats. La seva alternativa codi obert i gratuïta és INKSCAPE i és una bona eina.
Exemple de treball vectorial (els vectors)

CONEIX LES MIDES DELS DOCUMENTS, ELS MODES DE COLOR I ELS FORMATS

Formats per imprimir

Mides: cm o mm i ppp

Els mil·límetres (mm) són unitats més petites que els centímetres (cm), amb 10 mm equivalents a 1 cm. Les mides del format de paper DIN A es basen en proporcions específiques, com ara DIN A4, que fa 210 x 297 mm.

Punts per polzada (ppp): els punts per polzada indiquen la densitat de píxels i afecten la qualitat de la visualització o impressió de la imatge.

Per impressions inferiors a DIN A3 pot ser suficient 300 ppp. Per mides superiors podem augmentar a 600 ppp i per gran format 1200 ppp.

CMYK

CMYK: Cian, Magenta, Groc i Clau (Negre), els colors de pigment utilitzats en material imprès, específicament sobre paper.

Formats de les pàgines
El mode de color

Formats digitals

Mides: px i ppp

Píxels (px): Es refereixen a les unitats de mesura utilitzades per expressar la resolució d’una imatge digital. Un píxel és el punt més petit d’informació en una imatge digital i és l’element bàsic que la conforma

Punts per polzada (ppp): És la mesura de la densitat de píxels en una pantalla o una imatge impresa. Com diu la descripció, els píxels que hi ha dins una polzada (1 polzada – Sistema Imperial Britànic = 2,54 cm, segons un acord del 1958).

Per una imatge d’internet, el més habitual és que la imatge estigui a 72 ppp (algunes imatges de pantalla completa, es poden tenir a 96 ppp.

RGB

RGB: Vermell, verd i blau, els colors de llum utilitzats en monitors.

Si no sé si s'imprimirà o es visualitzarà a la pantalla, què puc fer?

  • Per la mida de la pàgina, tria una mida mitjana-gran com ara la d’una pàgina A4 (21 cm x 29,7 cm).
  • La resolució en píxels per polzada (ppp) hauria de ser de 300 ppp. Si s’utilitza per a la web, la majoria de les plataformes ajustaran la mida de forma adequada i ho deduiran a 72 ppp. De format A4 a A3 si totes dues estan a 300 ppp, no es veurà passa malament, però de 72 ppp no en podrem treure un document imprès més gran d’un A5 (14,8 cm x 21 cm) sense que es vegi malament.
  • Pel format de color, personalment, prefereixo el format RGB, ja que els colors es veuran bé en impressió, però en pantalla, el format CMYK pot mostrar els colors de manera diferent, amb alguns colors com el verd o el vermell que poden semblar molt més saturats del normal.

Aquesta solució no és la ideal, però pot ser la menys perjudicial si posteriorment s’han de fer ajustos en les mides i els formats.

AMB QUIN FORMAT GUARDO el meu document?

Una vegada més ens toca pregonar-nos algunes coses: És per imprimir, és per pantalla, ens interessa que el fons sigui transparent, cal que pesi molt poc…? Resumidament, veurem 4 formats més 1 de molt interessant:

JPG (Joint Photographic Experts Group)
  • Serveix per: Almacenar imatges fotogràfiques i gràfics amb molts colors. És àmpliament utilitzat per a fotografies en línia i en impremta.
  • No serveix per: Imatges que necessiten transparència o gràfics amb línies netes i text, ja que pot causar pèrdues de qualitat visibles.
  • Proprietat: JPG és un format amb pèrdues, la qual cosa significa que la qualitat de la imatge es redueix quan es comprimeix.
  • Quan no és apropiat: Per a imatges que necessiten un alt grau de detall o text, com ara logos o il·lustracions.
png (Portable Network Graphics)
  • Serveix per: Emmagatzemar imatges amb transparència, gràfics amb text, icones i il·lustracions. És ideal per a imatges que requereixen una qualitat alta sense pèrdues.
  • No serveix per: Imatges fotogràfiques d’alta resolució a causa de la seva mida de fitxer més gran. No és adequat per a imatges on la compressió és crucial.
  • Proprietat: PNG és un format sense pèrdues, la qual cosa significa que la qualitat de la imatge no es perd amb la compressió.
  • Quan no és apropiat: Per a imatges que necessiten una gran compressió, com ara fotografies d’alta qualitat per a web.
SVG (Scalable Vector Graphics)
  • Serveix per: Dibuixos i gràfics vectorials, icones i logotips. Perfecte per a disseny web, ja que es pot escalar a qualsevol mida sense perdre qualitat.
  • No serveix per: Imatges fotogràfiques o gràfics amb un gran nombre de colors i detalls complexos.
  • Propietat: SVG és un format basat en vector, el que significa que es pot escalar sense pèrdues de qualitat.
  • Quan no és apropiat: Per a fotografies o imatges amb detalls complexos que no es poden representar bé amb vectors.
webp
  • Serveix per: Emmagatzemar imatges amb una bona compressió tant amb pèrdues com sense pèrdues. Ideal per a la web, ja que ofereix una qualitat similar a JPG i PNG amb fitxers més petits.
  • No serveix per: No és tan àmpliament compatible amb tots els navegadors o programari com JPG o PNG.
  • Propietat: WEBP ofereix compressió amb pèrdues i sense pèrdues, la qual cosa el fa flexible.
  • Quan no és apropiat: Si necessites una compatibilitat garantida amb tots els dispositius i navegadors, és millor utilitzar JPG o PNG

Formulari per a la Selecció de Format d'Imatge

Aquest formulari ajudarà a guiar l’usuari en la selecció del format d’imatge més adequat segons les seves necessitats.

1. Necessito que la imatge tingui un fons transparent? Sí / No

2. La imatge és una fotografia (imatge amb molts colors i detalls)? Sí / No

3. La imatge és un gràfic, icona o logotip? Sí / No

4. Necessito que la imatge es pugui escalar a diferents mides sense perdre qualitat? Sí / No

5. La mida del fitxer és una preocupació important per a la meva feina (per exemple, per a càrrega web)? Sí / No

6. Vull que la imatge es vegi igual en tots els navegadors i dispositius? Sí / No

7. Necessito mantenir la màxima qualitat possible sense importar la mida del fitxer? Sí / No

Resultats Basats en les Respostes
  • Si has respost “Sí” a la pregunta 1: Considera usar PNG.
  • Si has respost “Sí” a la pregunta 2 i “No” a la 1: JPG és la millor opció.
  • Si has respost “Sí” a la pregunta 3: Considera usar SVG si necessites escalabilitat. Si no, podries optar per PNG o JPG.
  • Si has respost “Sí” a la pregunta 4: SVG és ideal.
  • Si has respost “Sí” a la pregunta 5: WEBP pot ser una bona opció per a la compressió eficient.
  • Si has respost “Sí” a la pregunta 6: JPG i PNG són formats ben compatibles.
  • Si has respost “Sí” a la pregunta 7: Opta per PNG per evitar pèrdues de qualitat.