CURSO DE HTML 4.01

Elementos de HTML 4.01, etiquetas, atributos. Base del actual HTML5.

8. Tipos de imágenes

8.1 Principales características

En Internet se utilizan principalmente tres tipos de archivos gráficos: GIF, JPG y PNG; pensados especialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños se transmiten más rápidamente por la WWW.

El formato de archivo GIF se usa principalmente para los dibujos e imágenes que tienen transparencias. El formato JPG se usa para las fotografías ya que guarda una paleta de millones de colores. El formato PNG es un intermedio entre estos dos, ya que posee una paleta de millones de colores y también tiene un canal para la transparencia (canal alfa). Estos formatos comprimen las imágenes para guardarlas. Cada uno lo hace de una forma en particular.

Estas imágenes corresponden a las denominadas "mapa de bits". Se las llama así porque están compuestas por pequeños cuadraditos (píxeles) que se combinan como mosaicos formando la imagen. Los mapas de bits contienen información sobre la profundidad del color, cantidad de colores y si posee o no transparencia (en el caso de archivos gif y png).

Existe otro tipo de imagen denominado "vectorial", "gráficos vectoriales o de vectores". Estos están compuestos por la información sobre los vectores (un vector tiene comienzo y final, es como una flecha) que componen la imagen. Cada dibujo vectorial guarda esta información en forma de una fórmula matemática. El formato de archivo más extendido de este tipo es SVG para gráficos y SWF (Flash) para animaciones.

La principal diferencia entre las imágenes de mapa de bits y los vectores, es que éstos se pueden ampliar o achicar sin perder definición; las imágenes de mapa de bits pierden definición (se ven pixeladas) al agrandarse.

8.2 Archivos JPG

Veamos ahora cuáles son las características fundamentales del formato JPG:

Compresión: Su algoritmo (método y forma de notación del cálculo) de compresión hace de este formato el ideal para guardar fotografías. Además, podemos definir la calidad de la imagen, su compresión; con calidad baja el archivo pesará menos, y viceversa. La resolución óptima al ojo humano para trabajar en páginas web es de 72 dpi.

Transparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamos colocar una imagen con un área que parezca transparente procederemos así: con nuestro programa de diseño gráfico seleccionaremos el fondo de la imagen (si es un solo color) y lo pintaremos de la misma tonalidad del fondo que empleamos para nuestra página web. En muchos casos los fondos de la imagen y la página parecerán el mismo, aunque en este caso, es mejor recurrir a los formatos png o gif.

Colores: JPG trabaja con 16 millones de colores.

Imagen jpg
Imagen jpg
Imagen jpg
Imagen jpg aumentada

 

8.3 Archivos GIF

Aparte de ser un archivo ideal para las imágenes que estén dibujadas tiene muchas otras características que son importantes y útiles.

Compresión: Es muy buena para dibujos y gráficos, como ya hemos dicho. Incluso puede ser interesante si la imagen es pequeña, aunque sea una foto o si tiene pocos colores. Los degradados no se ven bien.

Transparencia: Tiene canal alfa (transparente). Para crear un gif transparente debemos utilizar un programa de diseño gráfico; con él podemos indicar qué color del dibujo queremos que sea transparente. También hay aplicaciones web que permiten convertir imágenes jpg a gif con zonas transparentes.

Colores: Utiliza paleta de hasta 256 colores. Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la imagen, por lo general, menos ocupará el archivo. En imágenes pequeñas, el formato GIF proporciona buenos resultados ya que las diferentes tonalidades son imperceptibles a la vista. En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros lo hacemos mientras creamos el gráfico.

Además, el formato GIF soporta animaciones. Una animación es una sucesión de imágenes en un lapso de tiempo.

Imagen jpg
Imagen gif
Imagen jpg
Imagen gif aumentada

 

8.4 Archivos PNG

El formato PNG nació para reemplazar y mejorar el formato GIF.

Conserva las ventajas del GIF en cuanto a transparencia y compresión pero almacena colores con una resolución similar a la de un archivo JPG (millones de colores). También tiene una versión de 8 bits con 256 colores.

El formato PNG puede mostrar una imagen en forma progresiva (al cargar una página con un archivo PNG guardado con este formato, se ve cómo se carga la imagen). Con los otros dos formatos (JPG y GIF) la imagen se ve en cuanto se ha bajado completamente al caché del navegador.

Imagen jpg
Imagen png
Imagen jpg
Imagen png aumentada

 

8.5 Observaciones generales

Se considera que una imagen es "pesada" cuando sobrepasa los 50 Kb. Si fuera una foto descriptiva de algo, podría resultar muy útil enseñar en la página una versión reducida de la imagen (thumbnail o miniatura), conteniendo un link a la imagen en su tamaño real para quien desee verla entera. Cuando necesitemos utilizar una imagen muy grande, es recomendable partirla en diferentes fragmentos y luego armar la imagen como si se tratara de un rompecabezas, mediante una tabla, así la navegación será más rápida.

Con la llegada de HTML5, y la predominancia de la imagen, junto a la velocidad de descarga de nuestras conexiones de internet, se está perdiendo la práctica de optimizar y reducir el peso de las imágenes. Google desarrolló un test de velocidad de carga (speed test) y hay varios más en internet. Una de las cualidades de este test es analizar el contenido del sitio y brindar versiones comprimidas de nuestros archivos, entre ellos las imágenes, y así agilizar la carga tanto en computadoras de escritorio como en celulares. La velocidad de descarga de un sitio depende de su contenido y del tiempo de respuesta del servidor donde esté alojado. Por lo que los resultados de estos tests no reportarían una información concluyente.

Material adicional

Actualización: enero, 2021. Elena Navntoft.