Ahora que ya tenemos la mayor parte del HTML formateado, toca hacer revisión del resto de elementos más detallados. Y, al igual que pasó con los enlaces, con las imágenes voy a dedicar un capítulo entero para ello ya que aunque la configuración no es tan compleja, se lo merece.
Las imágenes se representan con el elemento img. Una imagen puede ser un mapa estático (png, gif, jpg…), vectorial (pdf, xml con svg…), imágenes anmadas (gif, apng…) y otra serie de elementos que cada navegador soporte, pero que el propio HTML 5 no especifica, ya que queda en manos de cada uno de ellos.
src
Este atributo es obligatorio al añadir una imagen e indica la dirección URL donde se encuentra el elemento a mostrar.
alt
Este elemento es el «texto alternativo» en una imagen. Dependiendo de una serie de combinaciones hay que ponerlo o no…
- Si el alt está en blanco, significa que esa imagen es decorativa o suplementaria.
- Si el alt dispone de información, el contenido ofrece información alternativa o sustitutiva de la imagen.
- Si el alt no existe, la imagen debe ser parte del contenido y no hay ningún elemento equivalente. En este caso, los navegadores pueden usar la información del title o del figcaption como sustituto.
Por norma general el atributo alt debería existir, aunque hay casos excepcionales. Algunos casos donde en principio ha de estar son:
- Si la imagen está dentro de un enlace, y ese enlace sólo contiene la imagen, entonces es obligatorio que tenga contenido.
- En el caso de algún diagrama o gráfica, swe recomienda explicar con mucho detalle el contenido de la imagen.
- Si tenemos una imagen como si fuera un icono, y al lado de la imagen hay un texto que la define (y viene a ser el mismo), en estos casos el elemento ha de estar vacío.
- En el caso de logos, insignias, banderas… el contenido ha de ser el nombre de la entidad a la que representa, y no alguna palabra del estilo «logo». En caso de que el logo no se muestre como logo, sino como una imagen descriptiva, es recomendable incluir una descripción de cómo es el logo en sí: formas, colores, etc…
- Si la imagen es un texto sustitutivo, se recomienda que se incluya la misma información que indica el texto.
- Si la imagen es simplemente algo que representa lo que se está hablando alrededor de ella, con un buen fragmento de texto, el atributo debe estar vacío. En estos casos es recomendable usar un título o similar.
- En el caso en que haya varias imágenes complementarias unas a otras (por ejemplo, un logo dividido en varios ficheros), la primera de las imágenes será la que incluirá un texto alternativo, quedando el resto vacíos.
- En el mismo caso, pero que alguna imagen tenga algunos de sus elementos como enlaces, cada una de estas sí que deberán incorporar un texto alternativo.
- En los casos en los que la imagen tiene un valor excesivamente importante, el texto deberá ser muy detallado y significativo.
- Si no se conoce el contenido de una imagen, entonces no debe existir el atributo alt, aunque en estos casos sí que deberá haber un title o un figcaption. Un ejemplo de esto podría ser una imagen de «captcha».
Un detalle importante es que el alt es un elemento que ha de reemplazar la imagen en caso de que no se pueda mostrar, y no es información descriptiva (que sería el title).
En el caso en que las imágenes no estén pensadas para los usuarios (no sé, se me ocurre un contador de visitas de los «muy antiguos») no debe existir el atributo alt y, en este caso, el width y height deben estar forzados a tamaño 0.
width / height
Las imágenes pueden llevar el tamaño de las mismas. Por norma general es interesante indicarlas ya que de esta forma el navegador no tendrá que esperar a finalizar la carga de la página para poder acabar de renderizarla correctamente.
usemap
Este elemento, si existe, indica la información del mapa asociado y será el nombre del mapa.
ismap
Si la imagen es un mapa y se encuentra dentro de un enlace a, entonces hay que indicarlos con este parámetro booleano. Con esto el enlace quedaría en entredicho ya que necesitará de un mapa.
Deja una respuesta