Cómo hacer buenas páginas web (volver al índice)

Imágenes

No todos los navegadores las soportan, pero para los que sí, haz que las vean bonitas.

Cuándo usarlas

Yo divido las imágenes en dos tipos:

• Decorativas: complementan al texto y lo hacen más bonito.
• Necesarias: hacen falta para entender el texto. Por ejemplo, si contienen un mapa, una fórmula matemática, o algo que no puede explicarse con palabras.

Todo lo que digo aquí se aplica a cualquier imagen, pero en especial a las que son necesarias en una página. Éstas hay que tratarlas especialmente bien, porque son importantes y hay que dar alternativas a los que no puedan verlas.

Nunca uses imágenes para espaciar el contenido. Con CSS los márgenes se ponen en un momento y sin complicarse la vida.

Formatos gráficos

Hay pocas alternativas, y casi todas tienen algo malo. Lo que yo siempre recomiendo es:

• Para fotos o imágenes borrosas en las que salen trozos difuminados o no te importa perder calidad, usa el JPG. Ocupará poco, pero los detalles que pierdas en la conversión no los podrás recuperar.
• Para imágenes en las que hay zonas grandes del mismo color, sin trozos muy borrosos, como un cómic o una captura de pantalla, usa PNG. No se pierde calidad, y ocupa muy poco.
• Si la imagen tiene trozos transparentes o semi-transparentes, usa PNG. Soporta niveles de opacidad, que quedan muy bonitos.
• Si la imagen es animada: no hay muchas opciones buenas. Confío en que APNG será un buen formato cuando esté acabado, pero de momento habría que usar GIF animado. MNG es un buen formato para usar en Intranets y sitios donde podamos asegurarnos de que todos los navegadores tengan el soporte MNG activado.

Los demás formatos (PCX, GIF, BMP, PNM, TIFF, TGA, ...) son muy anticuados y poco útiles, además de ocupar demasiado para usarse en una página web.

Pon siempre el atributo alt

Todas las imágenes tienen que tener un texto alternativo, que se mostrará si el usuario tiene desactivadas las imágenes en su navegador (no quiere verlas) o si por alguna razón no puede (por ejemplo, si ha habido un error en la conexión o la imagen no existe, o también si el usuario es ciego). Además, mientras no hay ninguna imagen por mostrar porque se está cargando, el navegador pone este texto.

El texto alternativo hay que ponerlo con el atributo alt, por ejemplo <img src="imagen3.jpg" alt="Foto de mi ordenador grande">. Debe ser una descripción de la imagen (qué es la imagen), y no comentarios extra, ya que si se muestra el texto es porque la imagen no se puede ver.

Todas las imágenes importantes de la página deben llevar un buen atributo alt. Las imágenes decorativas o que no vale la pena explicarlas con palabras pueden llevar alt="" (vacío), pero el caso es que siempre hay que poner el alt.

Ese texto que sale al pasar el ratón se hace con title

Si quieres que al pasar el ratón por encima de una imagen salga un cuadrito con un texto, tienes que poner el atribute title (título de la imagen). No se hace con el atributo alt (ver apartado anterior) ya que ése sirve como sustituto de la imagen, para cuando no se puede mostrar. El title es para añadir información sobre la imagen o comentarla. Naturalmente, puedes poner los dos.

Por ejemplo, <img src="imagen3.jpg" alt="Foto de mi ordenador grande" title="Todos esos cables molestan mucho y cuestan de limpiar">.

Usa el CSS para la altura, anchura y borde

En vez de usar los atributos height, width y border, haz algo como <img src="imagen3.jpg"alt="" style="height:280px; width:210px; border: 1px solid black;">, porque son cosas relacionadas con el diseño (y el CSS a lo mejor te permite usar clases para evitar repetir información).

Va bien que el navegador conozca la altura y anchura antes de cargar la imagen, porque así puede dibujar un cuadrito del tamaño exacto, en donde se colocará cuando esté cargada. Si no lo pones y la imagen es mucho más grande de lo que el navegador se había imaginado, todos los elementos de la página se reajustan para que quepa, y eso queda muy feo y molesta.

Siguiente: Enlaces