Escrito por Anibal de la Torre el domingo, 27 de noviembre de 2005 en TIC y Web 2.0 -(5835 hits)
Al ritmo que vamos en esta nueva Web 2.0, parece como si todo el que
llegara ya debiera hacerlo con unos conocimientos adquiridos; y no nos
damos cuenta de que algunas cuestiones, por elementales que nos
parezcan a algunos, tendríamos que estar aclarándolas de forma
periódica. Por ejemplo, seguro que muchos de vosotros, poseedores de
algún blog o fotoblog, no tenéis demasiado claro qué formato gráfico
usar para vuestras imágenes, o qué tamaño asignarles, o qué software
usar para realizar algún ajuste.
Desde luego no os voy a escribir un manual de tratamiento gráfico, simplemente os contaré cómo hago yo las cosas...
Lo primero que no se nos debe olvidar es que, entre los visitantes a
nuestras páginas, siempre los habrá con alguna conexión mucho más lenta
que la nuestra luego:
1.- Usa imágenes de forma lo más limitada posible pues estas cargan
mucho el peso de nuestras páginas y cuanto más pesen, menos lectores
tendremos pues muchos cortarán la descarga antes de que finalice su
larga espera.
2.- Procura siempre reducir el tamaño de tus imágenes al menor que
puedas desde un programa de retoque fotográfico. Esto hará que tus
páginas pesen menos y evitarás muchas de las molestas barras de
desplazamiento horizontal; piensa que no todos los visitantes a tus
páginas tienen las mismas pulgadas que tú en los monitores.
3.- Usa el formato adecuado para cada caso: JPG para fotografías, GIF
para fráficos con transparencias o sin ellas y PNG para lo mismo que
GIF pero con alguna limitación sobre las transparencias.
TAMAÑO
Creo que la principal recomendación podría ser intentar minimizar el
tamaño al máximo que permita una visión óptima. En el caso de viñetas
decorativas yo no suelo pasar de los 200 píxels y en fotografía o
gráficos de los 400. Pero se debe ajustar el tamaño desde un programa
externo de retoque, pues si lo hacemos desde el editor HTML
conseguiremos ajustar el tamaño, pero la imagen viajará por la Red con
su tamaño y peso original, siendo el navegador cliente el que ajustará
el mismo; con esto conseguimos el efecto de diseño deseado pero no
reduciremos el peso de la página.
Para este tipo de ajustes yo uso un programa de retoque fotográfico que es libre (Gimp 2.0) y muy bueno. Una vez abierta la imagen no tendrás más que acceder a la opción de menú Imagen/Escalar la imagen y fijar su nuevo tamaño:
Por defecto, si cambias su anchura o altura, el otro parámetro se
ajusta automáticamente para mantener el aspecto proporcional de la
imágen. Y no olvides guardar los cambios con Archivo/Guardar.
FORMATO
Es conveniente saber qué formatos son más aconsejables utilizar al
trabajar con documentos para la Web. El número de formatos gráficos que
se pueden utilizar en documentos HTML es muy limitado:
· Formato GIF
· Formato JPEG
· Formato PNG (únicamente en las últimas versiones de navegadores).
El formato GIF es más apropiado para gráficas, iconos o imágenes que
contengan elementos geométricos (líneas, círculos, etc. ...). Todos los
ficheros de este formato deben tener la extensión .gif
El formato JPEG se usa para imágenes reales (paisajes, personas, etc.).
Todos los ficheros de este formato deben tener la extensión .jpg o .JPG
Los dos primeros formatos gráficos guardan los datos de las imágenes
comprimidos y por tanto producen imágenes de una calidad aceptable, en
ficheros de un tamaño pequeño. Puedes ver una descripción algo mas
amplia al final del documento.
Para cambiar el formato de una imagen desde gimp basta con acceder a la opción Archivo/Guardar como...;
a continuación elige la carpeta donde deseas guardar la imagen y basta
añadirle al nombre del fichero la extensión adecuada. Por ejemplo, si
has abierto un archivo de imagen en formato BMP, bastará con ponerle
por nombre fotografia.jpg para que Gimp le imponga ese formato
y ajuste su peso. Normalmente te mostrará un par de ventanas que puedes
aceptar con la opción sugerida.
Algunos programas de retoque fotográfico (caso de Macromedia Firefox)
incorporan una opción de exportación que te permite ver en una pantalla
el resultado (tanto en tamaño del archivo como en calidad) de usar
diversos formatos y resoluciones.
FORMATO-AMPLIACIÓN
| BMP |
El formato BMP (Windows BitMaP) es probablemente el formato de fichero para imágenes más simple
que existe. Aunque teóricamente permite compresión, en la práctica
nunca se usa, y consiste simplemente en una cabecera y a continuación
los valores de cada píxel, comenzando por la línea de más abajo y
terminando por la superior, píxel a píxel de izquierda a derecha.
Su única ventaja es su sencillez. Su gran desventaja es el enorme tamaño de los ficheros.
Por ello, estos ficheros no tienen aplicación práctica en internet dado
el gran tamaño que ocupan las imágenes almacenadas en ellos. |
| JPEG |
El formato JPG cubre bastantes de las necesidades en cuanto a compresión de imágenes, con tasas muy superiores a los GIF o PNG , pero es totalmente inadecuado para generar imágenes transparentes, animadas e incluso fotografías que contengan textos, diagramas o iconos.
Lo primero que tenemos que destacar de este formato son dos características muy importantes:
- ofrece
los actuales e imprescindibles 16 millones de colores. Tiene la
posibilidad de poder manejar imágenes con gran profundidad de color
(hasta 16,7 millones de colores). La mayoría de los editores gráficos
son capaces de manejar este formato.
- alcanza
ratios de compresión entre 1:100 a 1:1000. Para obtener esos enormes
ratios de compresión, la imagen comprimida es modificada, descartando
información, o sea, la reproducción no es exactamente igual que la
original. Los niveles de compresión se basan en la cantidad de
información descartada, pero siempre de la forma mejor optimizada,
información que el ojo humano difícilmente va a poder detectar.
Cuando
guardamos una imagen en este formato, podemos establecer el ratio de
compresión que queremos aplicar a la misma. Cuanta mayor compresión
queramos, menos calidad obtendremos, pero también menor tamaño en Kb
del fichero; así que tenemos que mantener un equilibrio entre tamaño y
calidad. Cuando tratamos de comprimir imágenes sencillas ( vectoriales,
con pocos colores, etc. ) vemos como la compresión es mínima y las
modificaciones hechas en la imagen son visibles tras la compresión.
La
abreviación JPEG viene de la iniciales "Joint Photographic Experts
Group". Se trata de un grupo de expertos que definieron las bases de
este formato. Debemos tomar la precaución, cuando trabajamos con
formatos que modifican la imagen, de guardar la imagen original. Si por
ejemplo, convertimos una GIF a JPEG y luego hacemos la conversión
inversa, es posible que el fichero GIF ocupe el doble que el original.
Esto ocurre debido a que el formato JPEG no funciona correctamente con
imágenes que contengan zonas de un sólo color. Existe un formato
gráfico que toma lo mejor de estos dos formatos, el HSI JPEG, que
desactiva la compresión JPEG cuando encuentra zonas extensas del mismo
color. El problema es que es incompatible tanto con el GIF como con el
JPEG.
Así, JPEG es el formato adecuado para imágenes que utilizan muchos colores, como fotografías, o imágenes con degradados. |
| GIF |
Es
el formato originalmente más utilizado en Internet. El JPEG es bastante
posterior, con lo cual muchos navegadores tardaron en adoptarlo. Este
formato es el ideal para imágenes en las que se repite mucho un color,
y las que tienen pocos colores.
Sus características más relevantes son:
- Soporta imágenes de hasta 256 colores, que está muy bien, pero que para imágenes realísticas no es suficiente.
- Permiten transparencias
Existen varios subformatos de este formato GIF:
GIFs transparentes
|
Podemos definir un color de los utilizados en la imagen como
transparente. Así el navegador no nos mostrará ese color, dejando ver
el fondo de la página. Lo vemos con un ejemplo.
Cómo
hacemos que un color sea transparente. Pues depende del programa editor
de gráficos que utilicemos. De todos modos, sea cual sea, debemos
guardar la imagen como GIF, subformato 89a. Lo más normal es tener una
opción con la que digamos al programa qué color queremos que sea
transparente. |
GIFs entrelazados
|
Normalmente según se va cargando una imagen en nuestro navegador, la
podemos ir visualizando de arriba abajo. De todos modos, a menudo
aparecen unas imágenes que al principio se ven borrosas, y que se van
"aclarando" según nos va llegando su información. Se trata de GIFs
entrelazados. En este subformato, en lugar de almacenarse la
información de manera secuencial (línea 1, línea 2, ...) se almacena en
secuencias de saltos de líneas (Por ejemplo, para una imagen de 20 lín,
se guardaría: 1,5,9,13,17 - 2,6,10,14,18 -...)
La
ventaja que presenta esta opción es que no tenemos que esperar a que se
cargue toda la imagen para hacernos una idea de la imagen que está
llegando. La imagen entrelazada y la no entrelazada tarda el mismo
tiempo en cargarse, pero la primera ofrece al usuario la percepción que
se visualiza más rápidamente.
|
GIFs
animados
|
Los GIF animados son gráficos que están en movimiento. En realidad se
trata de una serie de gráficos en formato GIF que se juntan con un
programa y nos da como resultado un solo fichero GIF en el que se van
visualizando todos los GIF que componen la secuencia, dando así la
sensación de movimiento.
|
|
| PNG |
El
formato de imágenes PNG (Portable Network Graphic) nace a partir de los
problemas de patente del algoritmo de compresión que emplean las
imágenes de tipo GIF.
Las
imágenes de tipo PNG poseen todas las características del formato GIF,
con un algoritmo de compresión más eficaz, sin perdida de información y
con posibilidad de emplear un numero de colores superior a los 256 que
impone el formato GIF.
El formato
PNG ofrece un modo de carga escalonado, es decir con una primera
versión de la imagen de 1/8 de calidad, que se carga en 1/8 del tiempo
total, una segunda en 1/4, tercera en 1/2 y por fin la versión final. |
|
