Imágenes en la Web
Insertar imágenes
Las imágenes se utilizan para ilustrar una página, complementar un texto o simplemente por estética. A continuación, algunos consejos para elegir las imágenes:
- El tamaño de las imágenes no debe ser muy grande (máximo 600 x 400).
- El peso de las imágenes (tamaño del archivo) no debe ser mayor a 40 KB. Un visitante que ve que la página tarda en cargar más de 15 o 20 segundos, probablemente se irá y no volverá.
- Si se utiliza una imagen de fondo, esta no debe interferir con la lectura del texto.
- Procurar un equilibrio entre el tamaño y la calidad de la imagen.
- Si se utilizan imágenes con derechos de autor (copyright), se deben cumplir los requerimientos de cada autor.
Para insertar imágenes en una página web, se utiliza la etiqueta <img> y su atributo src (abreviatura de «source», o fuente). El parámetro src especifica la URL del archivo que contiene la imagen; es decir, indica el nombre del archivo y la ruta.
Tipos de imágenes
Las imágenes que vemos en un monitor están formadas por píxeles. Los ordenadores utilizan dos técnicas para codificar imágenes: mapas de bits e imágenes vectoriales.
A) Mapas de bits
Cada punto de la pantalla es un bit (1 ó 0). Los formatos JPG, PNG y GIF, utilizados en las páginas web, se basan en este método y usan algoritmos de compresión. Si estas imágenes se escalan (se modifica su tamaño), la calidad se degrada.
- Imágenes JPG: Almacenan imágenes de hasta 24 bits de color. Recomendable para fotografías o imágenes con degradados. Se pueden comprimir con diferentes grados, afectando la calidad.
- Imágenes GIF: Almacenan imágenes con hasta 256 colores (8 bits). Permiten definir zonas transparentes e imágenes animadas. (Se recomienda no abusar de las animaciones, ya que generan archivos grandes).
- Imágenes PNG: Permiten transparencias y transparencia graduada (opacidad del 0% al 100%), aunque algunos navegadores no aprovechan esta propiedad. No admiten animaciones.
B) Imágenes vectoriales
Se basan en funciones matemáticas para representar la imagen. Ofrecen excelente calidad y se pueden escalar sin pérdida de calidad. No se usan en páginas web.
C) ¿Qué formato es el mejor?
El formato JPG ofrece buena calidad para un tamaño medio. GIF y PNG proporcionan mayor calidad con menor tamaño que JPG, además de permitir zonas transparentes. La elección del formato depende del tipo de gráfico y la calidad deseada. En principio, las fotografías se ven mejor en JPG, mientras que las imágenes con colores definidos y sin degradados se pueden usar en GIF o PNG. Para imágenes animadas, se utiliza GIF.
Imágenes y enlaces
Las imágenes también pueden ser enlaces. El navegador suele destacar la imagen con un borde, que se puede eliminar con border="0".
Alineación respecto al texto
HTML permite controlar la alineación de las imágenes con el texto mediante el atributo align:
align="top": Alinea la parte superior de la imagen con la parte superior del texto.align="middle": Alinea el centro vertical de la imagen con la línea base del texto.align="bottom": Alinea la parte inferior de la imagen con la línea base del texto.align="left": Coloca la imagen a la izquierda del texto.align="right": Coloca la imagen a la derecha del texto.
Mapas de imágenes
Un mapa de imagen permite definir varias zonas en una imagen, cada una con un enlace diferente. Hay dos maneras de crear mapas de imágenes:
- Mapas del lado del cliente: Se gestionan en el navegador y son los más utilizados.
- Mapas del lado del servidor: Se gestionan en el servidor.