Professional Documents
Culture Documents
continuada #1
Formats dimatge
INDEX
Introducci Pgina 3
JPEG Pgina 5
JPEG2000 Pgina 14
BMP Pgina 17
GIF Pgina 18
JPEG Pgina 19
PNG Pgina 20
SVG Pgina 20
Multimdia emprada Pgina 21
Multimdia emprada Pgina 21
2 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
Introducci
0. Confirma que les tres imatges no estan comprimides calculant el seu pes en bytes i comparant-
lo amb el que posseeixen.
Per fer aquest exercici, ho he fet amb el programa MediaInfo tal com ens recomana lanunciat. Aix
doncs, per fer-ho, he realitzat les segents passes:
1. Installaci del programa MediaInfo
2. Obrim totes les fotografies una per una, en format HTML (personalment, crec que es la millor
opci per veure tots els parmetres).
3. Podem veure que:
1. face.bmp
2. desert.bmp
3. avenue.bmp
3 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
2- desert.bmp
3- avenue.bmp
Podem veure que no es el mateix pes (no del tot, ja que varien certs MB), aix ve degut a que amb
Photoshop empra diferents bits/canals que amb el MediaInfo, i per fer els mateixos clculs no els podem
crear ja que no ens deixa crear la informaci amb 24 bits (noms 8, 16 i 32 bits). De tots modes, sempre
pesar ms a Photoshop degut als bits per canal.
Aix doncs, noms ens queda fer els clculs del pes duna imatge, per fer-ho farem:
1- face.bmp
- 440*440 = 193600pixels
- 24/8 = 3
- 193600*3/1024 = 567.1875KB a MediaInfo 567KB
2- desert.bmp
- 1000*562 = 562000pixels
- 24 bits/8 byte = 3
- 562000*3/1024 = 1646,484375KB a MB = 1,646484375MB a MediaInfo 1.61MB
4 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
3- avenue.bmp
- 1000*667 = 193600pixels
- 32/8 = 4 OJO, 32BITS de profunditat
- 667000*4/1024/1024 = 2.54440..MB tal qual com el MediaInfo
Aix doncs podem dir que les imatges no estan comprimides.
JPEG
Per fer aquest apartat amb el XnConvert, el que tenim que fer primerament, a part dinstallar el programa,
carregar les imatges (ho farem amb carpetes) al programa. Per fer-ho, clicarem a Afegir carpeta... i
seleccionarem la carpeta amb les tres imatges per defecte, i apareixeran com a continuaci.
Un cop carregades, els apartats per a la creaci de la taula ho tindrem que fer amb la pestanya de Sortida,
un cop aqu, el primer ser seleccionar una altre carpeta de sortida i el format. Aix doncs farem:
1. Creaci de carpetes per cadascuna de la qualitat que ha de tenir
2. Per cadascuna de les imatges a generar ho realitzarem en cadascuna de les carpetes anteriors,
comenant per 100Q.
3. Canviar el nom segons la carpeta seleccionada. s a dir, si estem fent les imatges amb 100Q, el
nom de sortida ser el segent:
I aix amb totes les imatges (si estem fent les de 2Q, {Filename]_2Q, etc.
4. Ara, introduirem els parmetres per a la qualitat de cadascuna de les imatges que tenim que
realitzar i ho convertirem guardant-ho en cadascuna de les carpetes creades anteriorment. Aix
doncs, realitzarem:
5 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
- 100Q:
A partir daqu, totes les imatges tindran els mateixos parmetres que el 100Q a excepte de, com es natural,
la qualitat:
- 80Q:
- 60Q:
- 40Q:
- 20Q:
- 10Q:
- 2Q:
6 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
Ara ja tenim totes les imatges generades i procedirem a crear la taula per cadascuna de les imatges:
1. face.bmp
Factor Q
100 80 60 40 20 10 2
(%)
Pes final
95.2 29.8 21.5 17.3 12.2 8.83 5.43
(Kbytes)
Qualitat
subjectiva 5 4 3 2 1 1 0
(0 5)
2. desert.bmp
Factor Q
100 80 60 40 20 10 2
(%)
Pes final
281 23.0 15.9 13.8 11.8 10.6 9.81
(Kbytes)
Qualitat
subjectiva 5 4 3 2 1 1 0
(0 5)
3. avenue.bmp
Factor Q
100 80 60 40 20 10 2
(%)
Pes final
680 178 120 92.3 60.9 39.4 17.3
(Kbytes)
Qualitat
subjectiva 5 4 3 2 1 1 0
(0 5)
Grfica expressada com a barra (i en KB, per aix els super-valors del eix Y):
569.4 6956.5 10062.9 11594.2 13559.3 15094.3 16309.9
200.0
150.0
Factor Q (%)
100.0
face.bmp
desert.bmp
avenue.bmp
50.0
6.0 3.2
373.5 1427.0 1.4 2116.7 1.2 2751.9 1.4 4170.8 1.4 6446.7 1.6 14682.1
0.0
100 80 60 40 20 10 2
Factor de compressi (en KB)
7 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
face.bmp
Factor Q (%) 100 80 60 40 20 10 2
Factor de compressi 6.0 3.2 1.4 1.2 1.4 1.4 1.6
desert.bmp
Factor Q (%) 100 80 60 40 20 10 2
Factor de compressi 569.4 6956.5 10062.9 11594.2 13559.3 15094.3 16309.9
avenue.bmp
Factor Q (%) 100 80 60 40 20 10 2
Factor de compressi 373.5 1427.0 2116.7 2751.9 4170.8 6446.7 14682.1
Original
face.bmp 567
desert.bmp 160000
avenue.bmp 254000
3. Que les tres imatges tinguin mides diferents, afecta al comparar el factor de compressi
entre elles?
Si que afecta, doncs que tinguin mides diferents influir tamb amb el pes de la imatge i per
complementaria tamb influir en el factor de compressi. A ms a ms, tamb ha de influir en la
profunditat de color, doncs la imatge avenue.bmp s de 32 bits mentre que les altres dues son de
24 bits, s per aix que he volgut fer la prova de les tres imatges, amb les mateixes mides (440x440) i
fer una compressi del 100% a JPG. Podem veure com les mides de tots son ms o menys la
mateixa, per la de 32 bits augmenta.
Conversi de les imatges a 440x440 (menys la de face.bmp que ja ho era) i podem veure el pes
Podem veure com les imatges al passar-se a la mateixa mida, que la de avenue.bmp t un pes
superior i aix es degut a la profunditat de color de la imatge, que s de 32 bits a diferncia de les
altres dues.
Ara doncs, farem la conversi a JPG amb les imatges convertides a 440x440 i podem veure que si
8 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
que hi ha diferncia.
Aix doncs, com a conclusi i retornant a la pregunta principal, si que afecta, doncs si tingussim les
mateixes mides, el factor de compressi seria ms o menys similar.
4. Mitjanant Photoshop o GIMP, genera la imatge diferencia de les tres imatges entre la
imatge original i el cas Q=60%. Genera-les tamb en el cas Q=20%. A partir daquestes dues
inspeccions visuals subjectives, quines caracterstiques de la imatge sn les ms afectades per
la compressi? Enumera almenys dos.
Aquest exercici el farem com ens indica la pgina 38 del mdul 1. Per fer-ho, el que tenim que fer es,
primerament obrir totes les imatges originals i totes les imatges amb Q=60% a Photoshop.
2- Mirem la demostraci de que la capa es tota negra, observant els nivells de la capa.
9 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
5- Observem com lhistograma ja no es tan uniforme com el primer, que era tot negre.
6- Movem el gadget blanc cap a la esquerre per a ressaltar visualment els errors.
Repetim aquest procs amb les altres dues imatges i podem veure el resultat de la imatge original i les
imatges amb Q=60% com a continuaci.
10 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
Repetirem els punts del 1~6 amb les imatges originals i les de Q=20% tal com ens demana lanunciat. Podem veure la
diferencia a continuaci de les imatges amb Q=20% i les que tenim a la part superior daquest pargraf, les de Q=60%
per a procedir a resoldre les preguntes de lanunciat.
11 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
Un cop hem fet el procs amb la diferncia de les imatges amb Q=60% i Q=20% podem dir que les parts
ms afectades son els contorns i els grans contrasts de les imatges. En la imatge que ms ho podem apreciar,
sobretot, es la de avenue.bmp un cop aplicada la diferncia podem observar el contrast aplicat i els
contorns com han estat afectades per la diferncia de la imatge.
12 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
- Repetirem totes les passes que hem fet anteriorment. Primerament crearem una carpeta anomenada JPEG
estndard optimitzat en cadascuna de les carpetes anteriors ( 20Q, 40Q, <...> 100Q ) on treballarem amb les
imatges daquest apartat.
- Amb el XnConvert procedim a fer totes les passes de les imatges, amb les diferents mesures de qualitat:
1- Introdum les imatges originals a treballar
2- Afegim el nom de sortida {filename}.XQ_JPEG_estndard_optimitzat sent X la qualitat desitjada
3- Afegim la carpeta de sortida de les imatges (creada anteriorment en cadascuna de les carpetes
creades en lexercici 1).
4- Introdum els mateixos parmetres per amb la optimitzaci de Huffman
Aix doncs tindrem tres imatges en cadascuna de les carpetes de JPEG estndard optimitzat amb les tres
imatges com a continuaci, cadascuna amb la seva qualitat i amb la Optimitzaci taula Huffman.
13 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
JPEG2000
3. JPEG2000 en mode amb prdues
Un cop realitzat tot el procs de compressi a JPEG2000, amb el parmetre que ens demana lanunciat com
podem veure a continuaci (per als Q=10%), podrem tamb veure la taula comparativa amb les tres imatges
com varem fer anteriorment.
face.bmp
Factor Q (%) 100 80 60 40 20 10 2
Pes final (Kbytes) 139 138 122 50 3 1 1
Qualitat subjectiva (0 5) 5 5 4 3 2 1 0
Factor de compressi 4.1 4.1 4.6 11.3 189.0 567.0 567.0
desert.bmp
Factor Q (%) 100 80 60 40 20 10 2
Pes final (Kbytes) 561 560 501 5 1 1 1
Qualitat subjectiva (0 5) 5 5 4 3 2 1 0
Factor de compressi 285.2 285.7 319.4 32000.0 160000.0 160000.0 160000.0
avenue.bmp
Factor Q (%) 100 80 60 40 20 10 2
Pes final (Kbytes) 1239 1237 1155 440 5 1 1
Qualitat subjectiva (0 5) 5 5 4 3 2 1 0
Factor de compressi 205.0 205.3 219.9 577.3 50800.0 254000.0 254000.0
14 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
3. Visualitza la imatge diferencia de les tres imatges entre la imatge original i els casos Q=60%
i Q=20%. En quines zones hi ha major afectaci?
Primer introduirem les imatges amb la diferncia com varem fer en lexercici anterior.
15 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
Podem veure com totes les imatges han estat afectades amb la diferncia de la original. A Q=60% la
menys afectada s la face.bmp la qual es pot apreciar un poc la imatge, cosa que no podem fer
amb les altres dues imatges.
A Q=20% ocorre el mateix, sent la imatge face.bmp la menys afectada per indistingible. Amb
aquest format, la diferncia genera moltssims errors de pxels amb qualsevol qualitat si la comparam
amb la imatge original.
16 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
1) BMP
En aquest apartat comparem el fitxer face.bmp amb la seva versi en format gif.
1. Converteix el fitxer .bmp en gif mitjanant XnConvert (o qualsevol altre programa)
- Per fer-ho emprarem el Photoshop
- Carregarem la imatge a Photoshop, clicarem a exportar > exportar cmo i seleccionarem
lextensi GIF
17 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
3. Quines conclusions podem extreure de la comparaci? Per a quins casos pot ser til el BMP ?
BMP s un format dimatges ms simple que existeix doncs tot i que permet compressi, normalment s
sense compressi i empra una taula indexant colors de baix a dalt de dreta a esquerra. Com a problema ens
presenta el seu pes, on per exemple per el mn dInternet s un punt negatiu (per exemple per pgines web)
degut a que la crrega pot ser lenta amb aquest format.
2) GIF
En aquest apartat comparem el fitxer face.gif generat a lanterior apartat amb la seva versi en format jpg.
1. Partint del fitxer .bmp, converteix-lo en jpg amb qualitat al 90%
- Empram el programa XnConvert, obrim el fitxer face.bmp posem els parmetres com ens demana
lanunciat i executem el programa per a convertir-ho.
18 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
3. Quines conclusions podem extreure de la comparaci? Per a quins casos pot ser til el GIF ?
En el seu moment, GIF va ser un dels formats ms emprats per Internet. Posteriorment va caure en loblit,
per a dia davui torna a ser un format molt utilitzat en Internet grcies a que suporta transparncies i
sobretot, a la capacitat de emprar-ho per a imatges en moviment.
GIF s un format sense prdues emprat per a imatges amb pocs colors o molts colors que es poden repetir
en una mateixa imatge, per que no t la qualitat suficient per a imatges dalta qualitat o fotografies
professionals, doncs suporta fins a 256 colors.
3) JPEG
En aquest apartat comparem la imatge de avenue amb les seves versions en format jpg i .gif.
1. Partint del fitxer .bmp, converteix-lo en jpg amb qualitat al 90% i converteix-lo tamb a .gif
- Ho realitzarem amb XnConvert i Photoshop
- Obrim la imatge avenue.bmp i seleccionam els parmetres segents:
1- Per a JPG a Q=90% emprarem XnConvert amb els parmetres
2- Per a GIF emprarem Photoshop tal com varem fer en lapartat anterior.
2. Comparar la qualitat subjectiva dels fitxers jpg i gif i el seu pes resultant.
- Pes de la imatge: Podem veure com la imatge en format JPG pesa uns 257KB mentre que la
imatge a GIF pesa 533 KB. Aix doncs podem dir que JPEG millora considerablement en quant a pes
dimatge sobre GIF doncs aquest duplica el pes.
- Qualitat de la imatge: Tot i a que a 90% de qualitat no s pot apreciar molt b la qualitat duna i
altre imatge, si que podem veure com al format GIF hi ha certes prdues de qualitat enfront a JPEG.
3. Quines conclusions podem extreure de la comparaci? Per a quins casos pot ser til el JPEG?
Si comparem els dos formats que hem treballat, la principal diferncia seria dir que JPEG enfront a GIF no
suporta transparncies, per el primer tracta molt millor la qualitat dimatge grcies a que ofereix 16 milions
de colors en front dels 256 del GIF. Tamb una altre diferncia es que JPEG s un format amb prdues,
mentre que el GIF no.
JPEG s til per a imatges amb molts de colors, fotografies o imatges amb degradacions, per no saconsella
emprar per transparncies (no en t), imatges animades, fotografies amb textos, icones dentre altres.
19 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
4) PNG
En aquest apartat comparem el fitxer face.gif utilitzat en apartats anteriors amb la seva versi en format png.
1. Partint del fitxer .bmp, converteix-lo en png amb compressi 9
- Emprarem el programa XnConvert per fer-ho amb els segents parmetres.
5) SVG
En aquest apartat comparem el fitxer face.svg adjuntat amb lenunciat i la seva versi en format png generat
en lapartat anterior.
1. Comparar la qualitat subjectiva dels fitxers i el seu pes.
- Pes de la imatge: Primerament podem dir que el format PNG generat pesa uns 74.2KB mentre que
el format SVG pesa uns 54.5KB sent aquest segon menor.
- Qualitat de la imatge: s nota considerablement la diferncia de qualitat, sent SVG la de millor
qualitat.
2. Quines conclusions podem extreure de la comparaci? Per a quins casos pot ser til el SVG ?
Primerament caldr dir que SVG s un format vectorial i que al principi donava molts de problemes amb
certs navegadors (com Internet Explorer) per posteriorment va ser acceptat com a estndard. s molt til i
molt emprat sobretot per a la creaci dicones o logotips, per tamb per a imatges vectorials i/o
geomtriques, doncs podem ampliar/estirar o comprimir-la sense perdre qualitat dimatge.
Si parlem de formats raster podem dir que SVG s el que menor espai ocupa.
20 ~ 21
Publicaci, distribuci i monetitzaci PAC#1
Aitor Javier Santaeugenia Mar Universitat Oberta de Catalunya
Multimdia emprada
MediaInfo v. 0.7.93. [https://mediaarea.net/es/MediaInfo/Download]
XnConvert v. 1.73 [http://www.xnview.com/en/xnconvert/#downloads]
Adobe Photoshop CC 2017
Imatges de referncia adjuntes amb lanunciat
Bibliografia
- RIBELLES GARCA, ALEX. Mdul 1. Conceptes bsics de vdeo i udio. Introducci. Barcelona, Universitat Oberta
de Catalunya.
- (Mar, 2017). Infografia. [en lnia]. http://es.ccm.net/contents/710-infografia
- MORGAN, JOSH. (23 de Mar del 2016). XNCONVERT JPEG create (no sound). [en lnia].
https://www.youtube.com/watch?v=IQSYEfeNrB4
- TATIANA, DERLY. (20 de Septembre del 2011). Ventajas i desventajas del BMP (formato de imagen). [en lnia].
http://www.alegsa.com.ar/Diccionario/C/17799.php
- AMPARO, ADRIAN. (24 de Juny del 2009). Usos, ventajas y desventajas de: .jpeg .gif .png y .bmp . [en lnia].
http://adrianamparo.blogspot.com.es/2009/06/usos-ventajas-y-desventajas-de-jpeg-gif.html
21 ~ 21