1.4.3 Imágenes: etiqueta 'img'

Formatos de imagen

Los hay de varios tipos como bmp, gif, jpg, png... pero no todos ellos son adecuados para la web, algunos ocupan demasiada memoria o no son compatibles con algunos navegadores.

• Formato JPG o JPEG: se creó para almacenar fotografías, y cada una puede disponer de hasta 16 millones de colores ocupando un reducido tamaño.
  Cuanto mayor es su compresión peor es la calidad, pero el tamaño de la imagen será menor.
  La resolución ideal para la pantalla es de 72 píxeles por pulgada (también ppp, ó dpi), para la imprenta se recomiendan 300 ppp.


• Formato GIF: es el más usado en Internet, almacenan un máximo de 256 colores o tonos de gris -para imágenes en blanco y negro-. Admite imágenes transparentes, entrelazadas -que van apareciendo a medida que las va cargando el navegador web- e imágenes animadas -guardando varias imágenes en un único fichero.


• Formato PNG: se diseño como sucesor del formato GIF, por lo que combina ventajas de los formatos GIF y JPG.
  Ofrece compresión sin perdidas, admite transparencia y entrelazado, permitiendo hasta 16 millones de colores y transparencia de 8 y 24 bits, con lo que se consigue 256 niveles de transparencia... algunos navegadores antiguos como Internet Explorer 6 no soportan las últimas versiones de este formato

En cuanto al formato a elegir:

• JPG para fotografías.
• GIF y PNG para logotipos e imágenes con colores uniformes o imagenes con texto.

Imágenes como entidades (contenido) y como fondo (diseño)

Como entidad:

Para introducir una imagen en un documento HTML se debe emplear la etiqueta IMG con sus atributos necesarios:

<img src="ruta-de-la-imagen.gif" width=100 height=50 alt="texto alternativo" />

Los atributos de la entidad o etiqueta son:

• src se especifica la ruta y nombre del fichero de la imagen
• width define el ancho de la imagen (en píxeles)
• height define su altura
• y entre las comillas de alt se debe introducir siempre un breve texto descriptivo de lo que hay en la imagen, tanto por motivos de accesibilidad para personas discapacitadas, o para accesos desde dispositivos que no pueden mostrar imágenes, como por motivos de indexación por parte de los robots de los buscadores como Google

Como fondo del web (en el archivo de estilo CSS):

body {
background: url (ruta-de-la-imagen.jpg) repeat;
}

• body, que es el selector de la regla, indica que la regla se aplica a todo el cuerpo del documento HTML.
• background es la propiedad de la declaración de la regla, en este caso se refiere al fondo (background) del documento.
• Nos queda el valor de la declaración, url es para indicar la ruta y nombre del fichero de la imagen, entre paréntesis (ruta-de-la-imagen.jpg) (o .gif o .png), y repeat; es para indicar al navegador web que debe mostrar la imagen repetida en todo el fondo de la página web a visualizar, que es la opción por defecto. Además de repeat también se puede usar repeat-x para que solo repita la imagen en horizontal, repeat-y para que la repita en vertical, o no-repeat para que solo la muestre una vez y no repita. Otra opción es fixed, y es para que no se mueva la imagen de fondo al movernos a lo largo de la web.

Dos formas de definir las reglas para definir imagen y color de fondo:

Forma larga:

body {
background-image: url(ruta-de-la-imagen.jpg);
background-color: #CCEECC;
}

Forma corta:

body {
background: #CCEECC, url(ruta-de-la-imagen.jpg);
}

Bancos de imágenes on line:

• De pago, pero ojo con las opciones de las licencias:
• istockphoto.com
• photolia.com
• Gratis, o con licencia Creative Commons:
• sxc.hu.
• FlickrCC.
• Mediateca de EducaMadrid.
• Open Clip Art Gallery.
• Openphoto.
• Free Digital Photos.
• Lista de sitios que ofrecen imágenes free.
• Google como buscador de imágenes reutilizables
  Se accede al buscador de imágenes de Google, después en búsqueda avanzada, y donde pone Derechos de uso (por la parte de abajo de la página) hay que escoger la opción de licencia deseada.

El tamaño recomendado de una imagen para insertar en una web no debe superar los 50kb, tampoco es conveniente cargar la página de muchas imágenes para no ralentizar demasiado su descarga.