Tipos de imgenes aceptados en el web.

Comportamientos especficos
Graphics Interchange Format)
Joint Photographic Experts Group
Portable Network Graphics)
Area Shape
GIF
(ompuser!e GIF o Graphics Interchange Format) es un "ormato gr#"ico utili$a%o ampliamente
en la &orl% &i%e &eb tanto para im#genes como para animaciones'
El "ormato "u( crea%o por ompuser!e en )*+, para %otar %e un "ormato %e imagen a color
para sus #reas %e %escarga %e "icheros- sustitu.en%o su temprano "ormato /0E en blanco .
negro' GIF lleg1 a ser mu. popular por2ue po%3a usar el algoritmo %e compresi1n 04& (0empel
4i! &elch) para reali$ar la compresi1n %e la imagen- 2ue era m#s e"iciente 2ue la 2ue el
algoritmo /un 0ength Enco%ing (/0E) usa%o para los "ormatos P5 . 6acPaint' Por la tanto-
im#genes %e gran tama7o po%3an ser %escarga%as en un ra$onable perio%o %e tiempo- incluso
con mo%ems mu. lentos'
GIF es un "ormato sin p(r%i%a %e cali%a%- siempre 2ue partamos %e im#genes %e 89: colores o
menos' ;na imagen %e alta cali%a%- como una imagen %e color !er%a%ero (pro"un%i%a% %e color
%e 8< bits o superior) %eber3a re%ucir literalmente el n=mero %e colores mostra%os para
a%aptarla a ese "ormato- . por lo tanto existir3a una p(r%i%a %e cali%a%'
JPEG
>JPEG> signi"ica >Joint Photographic Experts Group>- nombre %e la comisi1n 2ue cre1 la norma-
la cual "ue integra%a %es%e sus inicios por la "usi1n %e !arias agrupaciones en un intento %e
compartir . %esarrollar su experiencia en la %igitali$aci1n %e im#genes' 0a IS?- tres a7os antes
(abril %e )*+@)- hab3a inicia%o sus in!estigaciones en el #rea'
Compresin del JPEG
Es un algoritmo %e compresi1n con p(r%i%a' Esto signi"ica 2ue al %escomprimir la imagen no
obtenemos exactamente la misma imagen 2ue ten3amos antes %e la compresi1n'
;na %e las caracter3sticas 2ue hacen mu. "lexible el JPEG es el po%er aAustar el gra%o %e
compresi1n' Si especi"icamos una compresi1n mu. alta se per%er# una canti%a% signi"icati!a
%e cali%a%- pero obten%remos archi!os %e pe2ue7o tama7o' on una tasa %e compresi1n baAa
obtenemos una cali%a% mu. pareci%a a la %el original- . un archi!o ma.or'
Esta p(r%i%a %e cali%a% se acumula' Esto signi"ica 2ue si comprime una imagen . la
%escomprime obten%r# una cali%a% %e imagen- pero si !uel!e a comprimirla . %escomprimirla
otra !e$ obten%r# una p(r%i%a ma.or' a%a !e$ 2ue comprima . %escomprima la imagen- (sta
per%er# algo %e cali%a%' 0a compresi1n con p(r%i%a no es con!eniente en im#genes o gr#"icos
2ue tengan textos o l3neas . sobre to%o para archi!os 2ue contengan gran%es #reas %e colores
s1li%os'
El algoritmo %e compresi1n JPEG se basa en %os %e"ectos !isuales %el oAo humano- uno es el
hecho %e 2ue es mucho m#s sensible al cambio en la luminancia 2ue en la crominancia- es
%ecir- notamos m#s claramente los cambios %e brillo 2ue %e color' El otro es 2ue notamos con
m#s "acili%a% pe2ue7os cambios %e brillo en $onas homog(neas 2ue en $onas %on%e la
!ariaci1n es gran%e- por eAemplo en los bor%es %e los cuerpos %e los obAetos'
PNG
(Portable Network Graphics) es un "ormato gr#"ico basa%o en un algoritmo %e compresi1n sin
p(r%i%a para bitmaps no suAeto a patentes' Este "ormato "ue %esarrolla%o en buena parte para
sol!entar las %e"iciencias %el "ormato GIF . permite almacenar im#genes con una ma.or
pro"un%i%a% %e contraste . otros importantes %atos'
0as im#genes PNG usan la extensi1n ('png) . han obteni%o un tipo 6I6E (imageBpng)
aproba%o el )< %e octubre %e )**:'
istoria ! desarrollo
0as moti!aciones para crear el "ormato PNG se generaron en )**9- %espu(s %e 2ue ;nis.s
anunciara 2ue har3a cumplir la patente %e so"tware %el algoritmo %e compresi1n %e %atos 04&
utili$a%o por el GIF (patente %e EE';;' <'99+'@C8 . otras alre%e%or %el globo)' Dab3a otros
problemas con el "ormato GIF 2ue hac3an %eseable un cambio- por eAemplo su limitaci1n a
paletas %e + bits %e 89: colores como m#ximo- cuan%o los or%ena%ores .a soportaban miles o
millones %e colores'
?riginalmente PNG era un acr1nimo recursi!o 2ue signi"icaba PNG no es GIF (PNGEs Not GIF)'
Aun2ue el GIF soporta animaci1n- el PNG se %esarroll1 como un "ormato %e imagen est#tico .
se cre1 el "ormato 6NG como su !ariante anima%a'
El PNG gan1 ma.or populari%a% en agosto %e )*** cuan%o ;nis.s puso "in a su pol3tica %e
licencias %e patente libres %e %erechos para los %esarrolla%ores %e so"tware libre o no
comercial'
Especi"icaci1n %e la !ersi1n )'C %e PNG "ue lan$a%a el ) %e Aulio %e )**: . %espu(s apareci1
como /F 8C+@' /#pi%amente se con!irti1 en una recomen%aci1n &@ el ) %e octubre %e
)**:
Fersi1n )') con algunos pe2ue7os cambios . con @ nue!as extensiones o >chunks> "ue libera%a
el @) %e %iciembre %e )**+
Fersi1n )'8' Nue!a extensi1n' 0ibera%a el )) %e agosto %e )***
Nue!a !ersi1n- ligeramente %i"erente %e la anterior . con una nue!a extensi1n' Actualmente
PNG es un est#n%ar internacional (IS?BIE )9*<+G8CC@)- tambi(n recomen%a%o por la &@ el
)C %e no!iembre %e 8CC@'
El est#n%ar a partir %e 8CC< es (IS?BIE )9*<+G8CC<)
Compresin
El m(to%o %e compresi1n utili$a%o por el PNG es conoci%o como %e"laci1n (en ingl(s >He"late
algorithm>)' Iambi(n existen m(to%os %e "iltra%o' En la especi"icaci1n )'8 se %e"ine un =nico
tipo %e "iltro- 2ue inclu.e 9 mo%os %e pre%icci1n %el !alor %el pixel- 2ue resulta mu. =til para
meAorar la compresi1n- %on%e se elige para ca%a l3nea %e la imagen (scanline) un m(to%o %e
"iltra%o 2ue pre%ice el color %e ca%a p3xel bas#n%ose en los colores %e los p3xeles pre!ios .
resta al color %el p3xel actual- el color pronostica%o' 0os cinco m(to%os sonG None- Sub- ;p-
A!erage . Paeth'
Estos "iltros pue%en re%ucir notablemente el tama7o "inal %el archi!o- aun2ue %epen%e en gran
me%i%a %e la imagen %e entra%a' El algoritmo %e compresi1n pue%e encargarse %e la a%ecua%a
elecci1n %el m(to%o 2ue ma.or re%ucci1n o"re$ca'
El tipo %e me%ia 6I6E para PNG es >imageBpng> (aproba%o el )< %e octubre %e )**:)
"nimacin
PNG no o"rece animaci1n' 6NG es un "ormato %e imagen 2ue soporta animaci1n . est#
basa%o en las i%eas . en algunas secciones %e PNG- pero es un sistema compleAo . no permite
el !isiona%o %e una sola imagen cosa 2ue si hace GIF' APNG es otro "ormato basa%o en PNG
2ue soporta animaci1n . es m#s sencillo 2ue 6NG' APNG soporta el !isiona%o %e una sola
imagen en caso %e 2ue el %eco%i"ica%or no entien%a este "ormato' En to%o caso ninguno %e
estos "ormatos es ampliamente usa%o'
omparaci1n t(cnica con otros "ormatos
Comparacin con GIF
En la ma.or3a %e los casos- PNG comprime meAor 2ue el "ormato GIF- aun2ue algunas
implementaciones (!(ase Photoshop) reali$an una mala selecci1n %e los m(to%os %e "iltra%o .
se generan "icheros %e ma.or tama7o'
El PNG a%mite- al igual 2ue el GIF- im#genes in%exa%as con transparencia %e ) bit o >binaria>'
Este tipo %e transparencia no re2uiere %e un canal a%icional . =nicamente a%mite 2ue un color
%e la paleta apare$ca transparente al )CCJ'
El PNG a%mite "ormatos con una pro"un%i%a% %e color %e millones %e colores (color !er%a%ero)
. canal al"a- lo 2ue proporciona unos rangos %e color mucho m#s ricos . precisos 2ue el GIF .
%isponer %e !alores %e transparencia interme%ios' Hesa"ortuna%amente- esto permite 2ue se
compare err1neamente PNGs %e color !er%a%ero con un GIF %e color in%exa%o (89: colores)
GIF soporta animaci1n . PNG no' (!er secci1n %e animaci1n- arriba)
Comparacin con JPEG
Imagen compuesta comparan%o JPEG . PNGG n1tese los arti"icios en la imagen JPEG !ersus
el "on%o en color s1li%o para la misma imagen en PNG'
PNG . JPEG son "ormatos 2ue est#n %ise7a%os para "unciones %i"erentes- por lo 2ue
=nicamente se pue%e reali$ar una comparaci1n generalista'
JPEG tiene una relaci1n %e compresi1n enorme en perAuicio %e la cali%a% %e la imagen- i%eal
para im#genes %e gran tama7o . "otogra"3as' No a%mite trasparencia'
PNG es un "ormato sin per%i%a %e cali%a% con una excelente compresi1n- i%eal para im#genes
"orma%as por gran%es #reas %e color plano o con pocas !ariaciones %e color' A%mite canal al"a
. algunos atributos extra como la correcci1n gamma'
PNG en la web
Pese a 2ue las car#cter3sticas t(cnicas . %e compresi1n hacen %el PNG un "ormato i%eal para
sustituir al GIF- su a%opci1n ha si%o mu. lenta %ebi%o en parte a comparaciones err1neas .
algunas %es!entaAas t(cnicasG
No est# soporta%o por algunos na!ega%ores mu. !ieAos (sin embargo estos na!ega%ores son
mu. raros ho. en %3a)'
No a%mite animaci1n'
0a a%ministraci1n %e color "allaba en algunos na!ega%ores (actualmente no es mu. importante
. se pue%e e!itar)'
Falsas creencias#
Internet Explorer : no soporta PNGs transparentes' Dabr3a 2ue mati$ar un punto' Internet
Explorer : e in"eriores a%miten transparencias binarias como en el GIF- pero "allan al mostrar
im#genes con canal al"a' Eso se %ebe a 2ue el pa2uete 2ue especi"ica el canal al"a es opcional
(t/NS) seg=n la especi"icaci1n PNG- sin embargo Internet Explorer , si los a%mite'
0as im#genes en PNG pesan m#s 2ue los GIF' He nue!o- no es cierto' Esta "alsa creencia es
%ebi%o a 2ue se compara con PNGs mal co%i"ica%os o %e @8 bits con GIFs %e 89: colores'
$"P"% &E I$'GENE%# "(E" %"PE
0os mapas %e im#genes es un planteamiento %e na!egaci1n 2ue incorpora una serie %e
enlaces %entro %e una misma imagen' Estos enlaces son %e"ini%os por "iguras geom(tricas .
"uncionan exactamente %el mismo mo%o 2ue los otros enlaces'
En un principio- estos mapas no eran %irectamente reconoci%os por los na!ega%ores .
recurr3an a tecnolog3as %e la%o %el ser!i%or para ser !isuali$a%os' Do. en %3a pue%en ser
implementa%os por me%io %e c1%igo DI60'
Po%emos utili$ar estos mapas- por eAemplo- en porta%as %on%e %amos a conocer ca%a una %e
las secciones %el sitio por me%io %e una imagen' Iambi(n pue%e ser mu. pr#ctico en mapas
geogr#"icos %on%e ca%a ciu%a%- pro!incia o punto cual2uiera representa un enlace a una
p#gina'
En cual2uier caso- el uso %e estos mapas ha %e estar sistem#ticamente acompa7a%o %e un
texto explicati!o 2ue %( a conocer al usuario la posibili%a% %e hacer clic sobre los %istintos
puntos %e la imagen' Frases como >Da$ clic sobre tal icono para acce%er a tal in"ormaci1n>
resultan mu. in%icati!as a la hora %e hacer intuiti!a la na!egaci1n por los mapas %e im#genes'
Por otro la%o- no esta %e m#s intro%ucir esa misma explicaci1n en el atributo title %e la imagen'
As3 pues- un mapa %e imagen esta compuesto %e %os partesG
0a imagen propiamente %icha 2ue estar# situa%a como %e costumbre %entro %e la eti2ueta
Kbo%.L %e nuestro %ocumento DI60'
;n c1%igo- situa%o en el interior %e la eti2ueta KmapL- 2ue %elimitara por me%io %e l3neas
geom(tricas imaginarias ca%a una %e las #reas %e los enlaces presenta%os en la imagen'
0as l3neas geom(tricas 2ue %elimitan los enlaces- es %ecir- las #reas %e los
enlaces- han %e ser %e"ini%as por me%io %e coor%ena%as' a%a imagen es
%e"ini%a por unas %imensiones %e ancho (5) . alto (M) . ca%a punto %e la
imagen pue%e ser %e"ini%o por tanto %icien%o a 2ue altura (x) . anchura (.)
nos encontramos' He este mo%o- la es2uina superior i$2uier%a
correspon%e a la posici1n C-C . la es2uina in"erior %erecha correspon%e a
las coor%ena%as 5-M' Si %eseamos saber 2u( coor%ena%as correspon%en
a un punto concreto %e nuestra imagen- lo meAor es utili$ar un programa %e
%ise7o gra"ico como Photoshop- Fireworks- o Paint Shop Pro'
0a meAor "orma %e explicar el "uncionamiento %e este tipo %e mapas es a
partir %e un eAemplo pr#ctico' Supongamos 2ue tenemos una imagen con
un mapa como estaG

Pulsa en los c3rculos para acce%er a las seccionesN
Hentro %e ella 2ueremos intro%ucir un enlace a ca%a uno %e los elementos 2ue la componen'
Para ello- %e"iniremos nuestros enlaces como $onas circulares %e pe2ue7o tama7o 2ue ser#n
%istribui%as a lo largo . ancho %e la imagen'
Feamos a continuaci1n el c1%igo 2ue utili$aremosG
Ktable bor%erOC wi%thO<9CLKtrLKt% alignO>center>L
Kmap nameO>mapa)>L
Karea shapeO>I/0E> coor%sO><<-@:-8*> hre"O>P> titleO>Pulsa para !er la p#gina %e mis
amigos> L
Karea shapeO>I/0E> coor%sO>)<C-@9-@)> hre"O>P> titleO>Pulsa para !er mi no!ia>L
Karea altO>Pulsa para conocer a mi Familia> shapeO>circle> coor%sO>8@*-@,-@C> hre"O>P>L
Karea altO>Pulsa para conocer mi trabaAo> shapeO>I/0E> coor%sO>@@:-@:-@)> hre"O>P>L
KBmapL
Kimg srcOimagesBhtmlBmapa)'gi"> wi%thO>@+C> heightO>,8> titleO>6apa %e im#genes' Pulsa en
ca%a una %e los c3rculos'> bor%erO>C> usemapO>Pmapa)>L
KbrL
Pulsa en los c3rculos para acce%er a las seccionesN
KBt%LKBtrLKBtableL
Este es un eAemplo parcial %e utili$aci1n %e los mapas- "altar3a colocar los hre" con !alores
reales . no con la P' a%a uno %e los enlaces %e las #reas Qatributo hre" %e la eti2ueta KareaLQ
%eber3an lle!ar a una p#gina web' El eAemplo 2ue%ar3a completo si creasemos to%as las
p#ginas %on%e enla$ar las #reas . colocasemos los hre" %irigi%os hacia %ichas p#ginas' omo
no hemos hecho las p#ginas >%estino> hemos coloca%o enlaces 2ue no lle!an a ning=n sitio-
2ue- como pue%es !er- se in%ica con el caracter >P>'
Po%(is obser!ar- tal . como hemos explica%o antes- 2ue nuestro mapa consta %e %os partes
principalesG la imagen . la eti2ueta KmapL 2ue %e"ine las #reas %e ca%a enlace'
a%a #rea se in%ica con una eti2ueta KareaL- 2ue tiene los siguientes atributosG
alt -. title
Para in%icar un texto 2ue se mostrar# cuan%o situemos el rat1n en el #rea'
shape
In%ica el tipo %e #rea'
coor%s
0as coor%ena%as 2ue %e"inen el #rea' Ser#n un grupo %e !alores num(ricos %istintos
%epen%ien%o %el tipo %e #rea (shape) 2ue estemos %e"inien%o'
hre"
Para in%icar el %estino %el enlace correspon%iente al #rea'
En este caso hemos utili$a%o unas #reas circulares (shapeO>I/0E>)- 2ue se %e"inen
in%ican%o el centro %el c3rculo Quna coor%ena%a (5-M) . el ra%io- 2ue es un n=mero entero 2ue
se correspon%e con el n=mero %e pixels %es%e el centro hasta el bor%e %el c3rculo'
Iipos %e #reasG shape %istintas
Existen tres tipos %e #reas %istintas- su"icientes para hacer casi
cual2uier tipo %e "igura' En el %ibuAo 2ue acompa7a estas l3neas se
pue%e !er una representaci1n %e las #reas- 2ue %etallamos a
continuaci1n'
shapeO>/EI>
rea un #rea rectangular' Para %e"inirla se utili$an las coor%ena%as %e
los puntos %e la es2uina superior i$2uier%a . la es2uina in"erior %erecha'
Ial como est#n nombra%as %ichas coor%ena%as en nuestro %ibuAo- el
#rea ten%r3a la siguiente eti2uetaG
Karea shapeO>/EI> coor%sO>5)-M)-58-M8> hre"O>P>L
shapeO>I/0E>
rea un #rea circular- 2ue se in%ica con la coor%ena%a %el centro %el
c3rculo . el ra%io' A la !ista %e nuestro %ibuAo- la eti2ueta %e un #rea
circular ten%r3a esta "ormaG
Karea shapeO>I/0E> coor%sO>5)-M)-/> hre"O>P>L
shapeO>P?0M>
Este tipo %e #rea- poligonal- es la m#s compleAa %e to%as' ;n pol3gono
2ue%a %e"ini%o in%ican%o to%os sus puntos- pero atenci1n- los tenemos
2ue in%icar en or%en- siguien%o el camino marca%o por el per3metro %el pol3gono' A la !ista %el
%ibuAo . los nombres 2ue hemos %a%o a los puntos %el pol3gono- la eti2ueta KareaL 2ue%ar3a %e
esta "orma'
Karea shapeO>P?0M> coor%sO> 5)-M)- 58-M8- 5@-M@- 5<-M<> hre"O>P>L