PAC 1 – Publicació, distribució i monetització

Conceptes bàsics. Formats d’imatge i vídeo

Primera part. Formats d’imatge
  • Imatges BMP.

L’extensió BMP en un arxiu d’imatge ens indica que aquesta pertany al format Windows Bitmap. És un format originari del S.O Windows, i consisteix en una matriu de píxels, o punts, cadascú dels quals té un color codificat fins a una profunditat de color de 24 bits (8 bits per a cada canal de color: vermell, verd i blau), o el que és el mateix, 16,7 milions de colors. Són imatges sense compressió (o una compressió molt simple) sense pèrdua d’informació.  Són d’alta qualitat, però el preu a pagar és un tamany molt gran, que per exemple les fan inapropiades per a l´ús en pàgines web.

Els avantatges de fer servir aquest format són que és compatible amb la majoria de programes que s’executen en Windows, i que no requereix maquinari potent per a la seva visualització. És un format adient, per exemple, si hem d’escanejar una imatge amb molt de detall, sempre que l’espai que ocupi al disc no sigui un problema. És adient també per editar les imatges mitjançant programari tipus Photoshop, d’edició de gràfics rasteritzats (en contrast als editors de gràfics vectorials), per a una vegada obtingut el resultat desitjat partint de la màxima qualitat, convertir la imatge a un format comprimit (com ara JPG), on sí que es produeix certa pèrdua de qualitat.

 

  • Imatges GIF.

L’extensió GIF, sigles de Graphics Interchange Format (Format d’Intercanvi Gràfic), fa referència a imatges de menor qualitat, però de molt poc pes, ja que estan limitades a una paleta de colors de 8bits (256 colors diferents) per a cada píxel de la matriu. Aquets 256 colors no han de ser sempre els mateixos, necessàriament (es pot prescindir d’uns i afegir-ne d’altres, sempre que no superi aquets límit de 256 colors diferents). També admet transparències, i una característica especial és que admet l’animació de la imatge mitjançant la combinació d’una sèrie de de quadres diferents, empaquetats al mateix arxiu.

El seu poc pes les fa molt adients per a publicacions en línia de gràfics senzills (per exemple logotips), per l’estalvi d’espai i la rapidesa en la seva descàrrega (tot i que el format PNG l’ha substituït en gran mesura), i la seva característica especial per a crear animacions senzilles i de poc tamany continua sent útil tant en pàgines web (per exemple banners més vistosos que amb una imatge estàtica) com per a difondre aquestes animacions mitjançant xarxes socials o missatgeria instantània.

Tot seguit, un exemple de logotip amb format GIF (amb transparència):

I un exemple de banner GIF animat:

 

  • Imatges JPG.

El nom JPG deriva de Joint Photographic Experts Group, que vindria a significar Grup d’Experts en Fotografia, i que va ser qui va desenvolupar el format.

Parlem d’una imatge de mapa de bits, amb una profunditat de color de 24bits, però en aquest cas sí hi ha una compressió, amb pèrdua de qualitat, però que permet estalviar un espai molt significatiu. La compressió es du a terme mitjançant el càlcul del valor del color d’un píxels en funció dels píxels del seu voltant. El grau de compressió és variable, podent escollir entre un arxiu més lleuger però de pitjor qualitat, o a l’inrevés.

Quan millor funciona la compressió és amb en imatges “reals”, entenent com a tal les que no tenen tipografia o formes geomètriques afegides digitalment (per exemple), ja que la compressió pot difuminar les vores d’aquestes formes.

Aquest bon acompliment en imatge real fa que aquest format sigui adient per a guardar les imatges que genera una càmera digital.  També és adient per a contingut web quan es necessità una qualitat d’imatge superior, buscant un ratio qualitat/tamany adequat a les necessitats.

Trobem tres opcions de format diferents per al JPG, el mode estàndard, l’optimitzat, i el progressiu. El mode estàndard codifica i comprimeix la imatge mitjançant una sèrie de passos (per això també el nom de mode seqüencial). El mode optimitzat és una variació del mode estàndard, que aconsegueix una major compressió a canvi de perdre compatibilitat en algun dispositiu. El mode progressiu emmagatzema la imatge amb diferents estadis del seu procés de codificació, la qual cosa permet, per exemple, que un usuari que descarregui una imatge d’un web rebi primer (molt ràpidament) una imatge de baixa qualitat (un mosaic, com una mena de previsualització), i progressivament versions més nítides de la imatge, fins a completar la imatge final. El preu a pagar per a tenir aquesta característica és que la imatge progressiva té un tamany superior comparat amb els altres dos modes.

A continuació, enllaços a diferents versions de la imatge BMP convertida a JPG (enllaços  al seva ubicació remota per tal de no saturar el document amb imatges). La compressió és fa en valors aproximats als demanats (90, 60 i 20%) segons l’escala de 12 nivells de qualitat de les opcions d’exportació de Photoshop (nivell 11, que equival a un 92% de compressió; nivell 7,a un 58%; nivell 2, a un 17%).

Mode estàndard:

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Estandard_Qualitat_92x100.jpg

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Estandard_Qualitat_58x100.jpg

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Estandard_Qualitat_17x100.jpg

Mode Optimitzat:

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Optimitzat_Qualitat_92x100.jpg

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Optimitzat_Qualitat_58x100.jpg

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Optimitzat_Qualitat_17x100.jpg

Mode Progressiu (3 fases de progrés):

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Prog3_Qualitat_92x100.jpg

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Prog3_Qualitat_58x100.jpg

http://www.enricmartin.com/pac1-publicacio/Footage_JPG_Prog3_Qualitat_17x100.jpg

Les diferències de qualitat que es poden apreciar al visualitzar les diferents versions no depenen tant del mètode de compressió com del percentatge d’aquest. Així, la diferència entre el 92% i el 58% no són molt evidents (al menys fins a zooms moderats), però al passar al 17% sí s’observa una pèrdua evident: una difuminació que va passant a pixelació molt apreciable conforme anem apropant el zoom.

Pel que fa al pes de les imatges, i ha un estalvi molt evident al passar de 92 a 58% (passa de de 1.15 Mb aprox. a 350/360 Kb). El següent estalvi, al comprimir al 17%, ja no és tant substanciós (es queda en 180/190 Kb, però amb un peatge a pagar en pèrdua de qualitat massa gran).

Així doncs, al meu entendre, els dos ratios de compressió més aprofitables, entre els tres analitzats, serien el 92%, per a fotografia digital (desar les imatges al disc local amb major qualitat), i el 58% per a pujar al web. Com a més la diferència de pes entre els formats estàndard, optimitzat i progressiu és molt petita, per al web seria aconsellable fer servir la imatge progressiva, per a facilitar la visualització en el navegador del client si es disposa de poc ample de banda.

Tot seguit una captura d’imatge de l’opció de guardar per al web, on es pot comparar l’original amb altres tres variants, amb diferents paràmetres de compressió. Aquí sí que podem escollir els percentatges de compressió exactes (90,60 i 20), però no altres paràmetres, com el mètode (aquí s’ha de fer servir el progressiu obligatòriament).

 

  • El format PNG.

El nom PNG (Portable Network Graphics, gràfics portables per a la xarxa) ja ens dóna pistes del seu leiv motiv, substituir el format GIF al web. És un format de compressió sense perduda, com el BMP. El PNG és més versàtil que els dos formats esmentats perquè combina la possibilitat de generar arxius molt lleugers (amb 256 colors), o arxius d’alta qualitat (16,7 milions de colors), i també permet incorporar una canal alfa de transparència. També permet estalviar pes mitjançant la indexació de colors (la imatge només incorpora una sèrie de colors, en lloc de la paleta sencera, necessitant menys bits de profunditat de color). És, doncs, un format idoni per a web, on es pot treure partit d’aquestes característiques, per exemple a logotips (aprofitant la transparència), imatges sintètiques, amb colors sòlids (banners, ilustracions…), i deixant les fotografies “reals” per al format JPG, més eficient en quant al tamany.

Avui en dia el format PNG ha substituït, en general, al GIF, per les raons esmentades, però aquest darrer encara conserva un as a la màniga que el preserva de la seva extinció, i és la seva capacitat de crear animacions senzilles, útils, per exemple, per a banners publicitaris, com ja s’ha esmentat.

Enllaços a la imatge convertida a format PNG, en 8 i 24 bits. La primera opció pesa menys de la meitat, i en aquesta imatge, on la gama cromàtica no és molt variada (verd i grisos), la qualitat és prou acceptable. Per a una imatge amb molta més varietat de colors els 256 colors serien insuficients.

http://www.enricmartin.com/pac1-publicacio/Footage_BMP_a_PNG_8bits.png

http://www.enricmartin.com/pac1-publicacio/Footage_BMP_a_PNG_24bits.png

 

  • El format TIFF.

TIFF són les inicials de Tagged Image File Format, que ve a significar arxiu d’imatge amb etiquetes. Com el seu nom indica, a més de la imatge en forma de mapa de bits (comprimida sense pèrdua), l’arxiu conté també uns camps amb informació addicional sobre aquesta. La seva qualitat d’imatge (tot i el seu gran tamany), i la seva gran compatibilitat amb qualsevol aplicació, les feia idònies per a les primeres càmeres fotogràfiques digitals de qualitat, o professionals. Avui en dia, però, la millora en els algorismes de compressió del format JPG, juntament amb la possibilitat de guardar la imatge “original” captada pel sensor, en format RAW, per a una edició posterior professional (a les càmeres professionals i de gama alta), ha fet perdre pistonada a aquest format.

Aquest format té una altra utilitat, i és que permet guardar informació per capes. Novament, però, aquesta característica també s’ha vist superada per altres tipus de formats que admeten capes, com el PSD.

Tot seguit, enllaços a la imatge convertida a PNG en dues variants, amb i sense compressió.  Amb la compressió (que és sense pèrdua) s’aconsegueix passar d’un tamany de 2,8 Mb a un tamany de 1 Mb aprox., sense pèrdua de qualitat apreciable. Així doncs, l’avantatge d’aquest format respecte al TIFF d’origen parla és evident.

http://www.enricmartin.com/pac1-publicacio/Footage_TIFF_a_PNG_comprimit.png

http://www.enricmartin.com/pac1-publicacio/Footage_TIFF_a_PNG_sense_compr.png

I la imatge convertida a TGA, que és l’acrònim de Truevision (marca comercial) Graphics Adapter. És un format pioner en poder mostrar imatges de color verdader (16,7 milions) en ordinadors domèstics, gràcies al maquinari fabricat per Truevision. Una segona revisió va permetre afegir el canal de transparència. Va ser el format de gràfics utilitzat en molts videojocs dels 80 i 90.  La seva menor capacitat de compressió enfront a formats més moderns, com el PNG (en aquest exemple, la imatge TGA comprimida ocupa 2,7 Mb enfront 1 Mb que ocupa el PNG), fa que avui en dia quedi en un segon pla.

http://www.enricmartin.com/pac1-publicacio/Footage_TIFF_a_TGA_comprimit.tga

 

  • El format SVG.

Aquest format (Scalable Vector Graphics, gràfics vectorials escalables) es diferència dels anteriors en que no és un mapa de bits, si no un gràfic vectorial. Es a dir, la imatge està composada per una sèrie de components vectorials (per exemple, una línia no es una successió de píxels, si no una informació estructurada en format XML, que indica les coordenades dels extrems de la línia, el gruix i color d’aquesta, etc.). Òbviament, parlem d’imatges sintètiques, no de fotografia real. El gran avantatge d’aquest format és que les imatges són escalables sense perdre qualitat (no hi ha problemes de pixelació, p. ex.), i a més o ocupen poc espai al disc. També permeten incorporar tipografia TrueType, amb els mateixos avantatges (escalable…).  És un format àmpliament compatible, i per tot això esmentat es un format d’imatge molt adient per al web (inclús es poden modificar les seves característiques mitjançant etiquetes CSS, la qual cosa les fa ideals per al disseny responsiu).

Afegir finalment que aquest format també s’utilitza en imatge animades (el conegut Flash, per exemple), tot i que aquesta característica està caient en desús des de l’aparició de l’HTML5 i les seves noves etiquetes d’animació.

 

Segona part. Formats de vídeo digital.
  • Format vs Còdec.

Començant pel còdec (paraula que deriva de codificador-descodificador), és un algorisme que codifica la imatge, és a dir, transforma una seqüència de fotogrames en un continu per a la reproducció (per exemple, a 24 fotogrames per segon). El mateix algorisme descodifica aquest vídeo de manera que permeti el seu visionat en un ordinador, dispositiu mòbil, reproductor de sobretaula, etc.  Hi ha còdecs d’imatge, d’àudio, de subtítols, de menús de reproducció…

Tots aquests elements d’un arxiu vídeo s’han de posar junts (el més evident és l’àudio i la imatge, que van estretament lligats), y aquest arxiu que els agrupa es diu contenidor. És aquí on parlem de format, ja que hi ha diferents variants, o formats,  de contenidors.

Exemples de diferents formats de contenidors són el MP4, AVI, MKV, FLV…

Exemples de còdecs d’àudio poden ser el MP3, AAC, WMA…

I còdecs d’imatge poden ser DivX, H264, Xvid…

 

  • El format MPEG.

MPEG, acrònim de Moving Picture Experts Group (Grup d’Experts d’Imatge en Moviment), és un tipus de format expressat de manera genèrica, ja que agrupa diferents variants tant de vídeo com d’àudio (com ara el famós MP3).

Parlant de les característiques i variacions d’aquest format, seria més adient parlar, per començar, dels còdecs, començant pel MPEG-1. Breument, dir que és un format de vídeo  Progressiu (la imatge mostra fotogrames sencers en cada frame) que té una resolució similar al vídeo VHS analògic (352×288 píxels).

Una evolució d’aquest és el MPEG-2, de característiques similars, però que admet vídeo entrellaçat (cada fotograma es divideix en dues parts), que és el format televisiu, i per això aquet format permet la difusió d’imatge digital per aquet mitjà. També es veu augmentada la seva resolució, que va des de SD (576×480) píxels (parlant sempre del sistema europeu PAL) fins a HD, Full HD (1280×720 i 1920×1080 píxels), i inclús més.

La següent evolució és el MPEG-4  (MPEG-3 no suposava avantatges respecte a l’anterior i es va abandonar), que presenta uns avantatges de major compressió i menor necessitat d’ample de banda que MPEG-2, i incorpora noves característiques com ara la gestió dels drets digitals. És per tot això que el substitueix en la difusió de vídeo a través d’Internet, i és especialment adient per a dispositius mòbils 8toto i que ha quedat superat per altres còdecs explicats tot seguit).

Resumint, el MPEG-1 ja estaria desfasat per les seves limitacions, la segona variant té un ampli ús en televisió, format físic com ara DVD o BluRay, cinema, incloent el 3D… i el MPEG-4 seria una millora d’aquest segon.

Hem parlat dels tipus de còdec MPEG, però el format admet una varietat d’aquests, com ara H.264, DivX, VP8…, a banda dels d’àudio, com MP3, AAC, AC3…

 

  • Conversió MPEG a MP4 amb còdec H.264

Començant pel còdec H.264, dir que el principal avantatge sobre el MPEG-4 anbas explicat és que permet una compressió majors, del doble o inclús més, i amb una qualitat d’imatge millor. Això el fa encara més adient per a la difusió de contingut a traves e la xarxa i sobre dispositius mòbils, però també per a la distribució de vídeo digital en altres formats, com ara pel·lícules en emmagatzemades en suport físic (com ara un disc dur).

El format MP4, i concretament utilitzant el còdec H.264, s’utilitza àmpliament en reproductors portàtils (amb còdec d’àudio AAC), permetent resolucions de fins a 4K. Té una compatibilitat molt alta (tota mena de dispositius mòbils, reproductors de saló, televisors a través de l’USB…)

http://www.enricmartin.com/pac1-publicacio/MPG_a_MP4_H264.mp4

 

  • Conversió MPEG a MP4 amb còdec H.265

El còdec H.265 és una evolució del H.264, i la seva millora consisteix, com no pot ser d’altra manera, una major capacitat de compressió i una millor qualitat. Això implica menor necessitat d’ample de banda (un 50% aproximadament), cosa que permet, especialment, ampliar els canals d difusió del vídeo de molt alta i ultra alta definició (4K).

La principal diferència tècnica entre el H.264 i H.265 és que l’algorisme del segon permet processar (aplicar la compressió) conjuntament una major quantitat de blocs, matrius de fins a 64×64 blocs, enfront a 16×16 blocs com a màxim que és capes de processar el H.264. Cal dir que un bloc és una secció de la imatge de 16×16 píxels.

http://www.enricmartin.com/pac1-publicacio/MPG_a_MP4_H265.mp4

Aspectes a comentar sobre les diferències elntre els còdecs H.264 i H.265: El primer que salta a la vista és que amb el segon còdec el tamany resultant és inferior, 18 Mb enfront a 27 Mb aproximadament, i la qualitat d’imatges és molt similar. Hi ha un inconvenient, però, amb el còdec H.265, i es que ni el navegador Firefox ni el Chrome són poden reproduir-lo en línia. Aquí es demostra la falta de compatibilitat dels còdecs més actuals, qüestio que sense dubte s’anirà solucionant.

 

  • Conversió MPEG a MKV amb còdec VP8

El format o contenidor MKV és quelcom més que un contenidor d’àudio i vídeo, ja que permet incorporar una major quantitat de canals d’àudio, subtítols i contingut multimèdia (inclús videojocs). El seu nom (MKV o Matroska) és ben adient, ja que deriva de Matrioska, la popular nina russa que conté multitud de nines al seu interior.

Els arxius MKV es difonen especialment per a la seva visió en ordinadors, o en reproductors de sobretaula (i televisors) compatibles. És a dir, el seu ús principal és la reproducció de cinema domèstic d’alta qualitat i amb múltiples opcions (idiomes, subtítols…).

Parlant del còdec VP8, dir que (com MKV) és de codi obert, i és el que utilitza, per exemple, Youtube (sobre HTML5).

Vindria a ser un equivalent al còdec H.264.

http://www.enricmartin.com/pac1-publicacio/MPG_a_MKV_VP8.mkv

Cal comentar que aquests vídeos MKV tampo es poden visualitzar directament amb el navegador (tot i que sembli incongruent al fer-ho servir Youtube). Cal descarregar-los al disc dur i fer servir un reproductor adient.

 

  • Conversió MPEG a MKV amb còdec VP9

La comparació entre VP8 i VP9 seria més o menys anàloga a la ja explicada entre H.264 i H.265.

Comparant el VP9 enfront el “competidor” H.265, dir que mentre que el VP8 seria un equivalent al H.264, el VP9 també es pot comparar al H.265 (ambdós permeten vídeo a 8K), però amb una qualitat una mica inferior a igualtat de tamany. El còdec VP9 processa fins a 32×32 blocs, enfront els 64×64 del H.265.

La descodificació del VP9, però, és una mica més fluida que la del H.265, cosa la qual el fa més idoni per a la transmissió en directe a través de la xarxa (streaming) de vídeo d’alta qualitat.

http://www.enricmartin.com/pac1-publicacio/MPG_a_MKV_VP9.mkv

Comentant les diferències entre les dos varians de MKV, he de dir que m’ha sorprés que amb el VP8 l’arxiu resultatn és molt petit (menys de 3 Mb), i la qualitat és bastant inferior a la obtinguda amb el H.264, quan se suposa que són equivalents. Els paràmetres que he fet servir són els mateixos, canvaint simplement el còdec (imatge al final).

Per contra, amb el VP9 el tamany resultant és molt gran, 136 Mb. Amb una qualitat d’imatge, com és lògic, molt bona. És ben segur que degut a la meva inexperiència amb els formats, no he sapigut configurar convenientment els paràmetres.

 

Bibliografía

Materials de l’assignatura:

Comerma Paré, Toni; Ribelles García, Àlex (2016). Plataformes de publicació i distribució. Barcelona: Editorial UOC.

 

Recursos en línia:

http://www.ite.educacion.es/formacion/materiales/107/cd/imagen/imagen0105.html

https://es.wikipedia.org/wiki/Windows_bitmap

http://www.maestrosdelweb.com/jpeg/

https://www.innovassistant.com/cuando-usar-formato-de-imagen-jpg-png-o-gif/

https://www.xatakafoto.com/opinion/el-formato-tiff-a-debate-ventajas-e-inconvenientes

https://www.lifewire.com/tga-file-2622390

https://graffica.info/formato-svg-ventajas/

http://explicandotecnologia.blogspot.com.es/2011/01/diferencia-entre-formatos-contenedores.html

https://es.wikipedia.org/wiki/MPEG-1

https://en.wikipedia.org/wiki/Comparison_of_video_container_formats

https://es.wikipedia.org/wiki/H.264/MPEG-4_AVC

https://www.boxcast.com/blog/hevc-h.265-vs.-h.264-avc-whats-the-difference

http://www.trustedreviews.com/opinion/h-265-vs-vp9-4k-video-codes-explained-2920862

Una respuesta a “PAC 1 – Publicació, distribució i monetització”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *