Imágenes en html: la etiqueta img

Imágenes en html: la etiqueta img

Hoy en día se nos hace difícil imaginar aquellas primeras páginas web sin imágenes. La etiqueta <img/> de html se propuso por primera vez en 1993 por Marc Andreessen.¡Si os gusta la arqueología digital pasaros por este enlace! Y se introdujo de forma oficial con el stándard HTML2.0 en 1995.

Tuvieron que pasar cinco años desde que el HTML saliera a la luz para que fueran un stándard y reconocida por los navegadores de la época como Mosaic y posteriormente Netscape.

La imagen HTML

Sintaxis etiqueta img
Etiqueta img HTML con sus atributos

La etiqueta img hace posible que las páginas web puedan tener imágenes.

Los formatos más extendidos son el .gif, el .png y el .jpg. Se trata de formatos no vectoriales y con perdida de calidad de la imagen. El formato .svg es cada vez más popular por ser vectorial, pero ni de lejos es a día de hoy un habitual de las páginas web.

  • El formato punto gif es que da una menor calidad de todos y permite hasta 256 colores. Mediante el efecto dithering consistente en un efecto óptico podemos visualizar más colores de los que realmente existen. Las imágenes gif permiten una transparencia e imágenes animadas.
  • El formato .jpg es el formato que mejor resultado calidad/compresión nos da. De los 3 formatos descritos es el más optimizado. Ofrece una calidad mayor al gif.
  • El formato .png permite transparencias y con diferencia el que permite más colores. También es el más pesado de todos. Típicamente suele usarse para logotipos e imágenes que necesitan transparencias.
  • El formato svg puede ser hackeado mediante scripts.

En cuanto a los distintos atributos que pueden acompañar a una imagen:

  • alt. Suele ser un texto descriptivo de la imagen. Junto el texto que le rodea y el contexto de la imagen en el documento web  tiene un papel en el SEO por imágenes muy importante.
  • title. Se usa para garantizar la usabilidad y la accesibilidad web, ayudando a la navegabilidad a aquellas pesonas de visión reducida.
  • width i height. Sorprendéntemente estos 2 atributos no son deprecated en html5. Si no se indica lo contrario se entienda que sus medidas son en píxeles. Si en un documento web se ha indicado el widht o height, siempre podamos usar el valor auto para forzar al navegador a redimensionar la imagen sin perder las proporciones originales.
  • usemap es un atributo que ha caído un poco en desuso pero que conviene conocer. Su uso es muy similar al de las anclas pero en este caso para un mapa de imágenes.

Atributos obsoletos

La etiqueta <img/> es una de las más antiguas que existen. En su recorrido de HTML2.0 pasando por el html 3.2, el 4.1 y el XHTML 1.0 ha experimentado cambios e implementado nuevos atributos. Muchos de estos atributos actualmente estan deprecated.

Deberemos usar CSS en su lugar. Veámos de cuales se trata en la siguiente tabla:

Atributos html obsoletos en html5 para img
Atributos obsoletos en HTML5 para la etiqueta <img>

En esta entrada hemos visto el concepto de enlace. ¿Te atreverías a hacer una imagen que al hacerle click se viera una entrada? ¡Dímelo en los comentarios!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

2 Comentarios
  • jose sanchez
    Publicado a las 10:32h, 16 febrero Responder

    Conocía todos los formatos de imágenes y sobre el svg, de oídas, tampoco sabia que se creada por código, pero la gran sorpresa para mi ha sido el comentario que haces sobre introducir script malicioso en el mismo código de creación de la imagen. Gracias por ponernos en conocimiento de ello. ;))

    • Francesc Ricart
      Publicado a las 12:51h, 16 febrero Responder

      hola jose!
      debo reconocer que he sido un poco sensacionalista porqué al final todo queda dentro del navegador… pero puede llegar a asustar algún despistado 😉 Si te interesa el tema dale un vistazo a esta lectura dónde explica como hacerlo paso por paso.
      Coge también una imagen .svg y ábrela con el sublime. Verás que detrás de un simple .svg hay un montón de código.

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.